By GokiSoft.com| 15:45 23/02/2022|
AngularJS

[Source Code] Tìm hiểu về dependency value & const & provider & factory & service trong AngularJS

#app.js


var app = angular.module('MyApp', [])

// Value
app.value('title', "Du lieu dung chung cho cac app")
app.value('content', "Noi dung du lieu")

// Const -> thiet lap cac config cho ca du an -> tao const -> share cho nhieu pages
app.constant('BASE_URL', 'https://gokisoft.com')

// Provider
// var user = {
// 	fullname: 'Tran Van A',
// 	age: 22,
// 	address: 'Ha Noi',
// 	running: function() {
// 		console.log('User is running ...')
// 	},
// 	getInfo: function() {
// 		// this -> truy cap dc doi tuong dang bieu dien: fullname & age & address + methods: running, getInfo
// 		return this.fullname + ',' + this.age
// 	},
// }
app.provider('user', [function () {
	this.$get = [function() {
		return {
			fullname: 'Tran Van A',
			age: 22,
			address: 'Ha Noi',
			running: function() {
				console.log('User is running ...')
			},
			getInfo: function() {
				// this -> truy cap dc doi tuong dang bieu dien: fullname & age & address + methods: running, getInfo
				return this.fullname + ',' + this.age
			},
		};
	}];
}])

// Factory
app.factory('animal', [function () {
	return {
		name: 'Tiger',
		age: 2,
		sleepping: function() {
			console.log('Tiger is sleepping')
		}
	};
}])

// Service
// var student = {}
// student.fullname = 'Tran Van A'
// student.age = 22
// student.running = function {
// 	//Trien khai code tai day
// }

app.service('student', [function () {
	this.fullname = "Tran Van A"
	this.age = 22

	this.running = function() {
		console.log('Student is running')
	}
}])


#page1.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page 1</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	{{ content }}
	<p>
		{{ info }}
	</p>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'title', 'BASE_URL', 'user', function($scope, title, BASE_URL, user){
		$scope.content = title + ' : ' + BASE_URL
		$scope.info = user.fullname + ',' + user.age + ',' + user.address
		$scope.info = user.getInfo()
	}])
</script>
</body>
</html>


#page2.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page 2</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	{{ content }}
	<p>
		Ho & Ten: {{ fullname }}
	</p>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'content', 'animal', 'student', function($scope, content, animal, student){
		$scope.content = content
		animal.sleepping()

		$scope.fullname = student.fullname
		student.running()
	}])
</script>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

GokiSoft.com [Teacher]
GokiSoft.com [Teacher]
GokiSoft.com

2022-02-23 08:53:09


#app.js


var app = angular.module('MyApp', [])

app.provider('store', [function () {
	this.$get = [function() {
		return {
			loadUser: function() {
				var userList = []

				var json = localStorage.getItem('userList')

				if(json != null && json != '') {
					userList = JSON.parse(json)
				}

				console.log(userList)

				return userList
			}
		};
	}];
}])


#login.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>

<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="login()">
		<div class="form-group">
			<label>Email: </label>
			<input required type="email" name="email" class="form-control" ng-model="email">
		</div>
		<div class="form-group">
			<label>Password: </label>
			<input required type="password" name="pwd" class="form-control" ng-model="pwd">
		</div>
		<p>
			<a href="register.html">Register a new account</a>
		</p>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Login</button>
		</div>
	</form>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'store', function($scope, store){
		$scope.userList = store.loadUser()

		$scope.login = function() {
			for(var item of $scope.userList) {
				if(item.email == $scope.email && item.password == $scope.pwd) {
					return window.open('show.html', '_self')
				}
			}

			alert('Login failed')
		}
	}])
</script>
</body>
</html>


#register.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>

<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="saveUser()">
		<div class="form-group">
			<label>Fullname: </label>
			<input required type="text" name="fullname" class="form-control" ng-model="fullname">
		</div>
		<div class="form-group">
			<label>Age: </label>
			<input required type="number" name="age" class="form-control" ng-model="age">
		</div>
		<div class="form-group">
			<label>Email: </label>
			<input required type="email" name="email" class="form-control" ng-model="email">
		</div>
		<div class="form-group">
			<label>Password: </label>
			<input required type="password" name="pwd" class="form-control" ng-model="pwd">
		</div>
		<div class="form-group">
			<label>Confirm Password: </label>
			<input required type="password" name="confirmPwd" class="form-control" ng-model="confirmPwd">
		</div>
		<p>
			<a href="login.html">I have a account</a>
		</p>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Save User</button>
			<button class="btn btn-warning" type="reset">Reset</button>
		</div>
	</form>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', 'store', ['$scope', function($scope, store){
		$scope.userList = store.loadUser()

		$scope.saveUser = function() {
			console.log('save user ...')
			// Kiem tra xem mat khau co khop khong
			if($scope.pwd != $scope.confirmPwd) {
				return alert("Password doesn't match, Plz check it again!!!")
			}

			var user = {
				'fullname': $scope.fullname,
				'email': $scope.email,
				'age': $scope.age,
				'password': $scope.pwd
			}

			// Kiem tra xem email da ton tai chua
			var isFind = false
			for(i=0;i<$scope.userList.length;i++) {
				if($scope.userList[i].email == $scope.email) {
					// Tai khoan da ton tai => update lai thong tin
					$scope.userList[i] = user

					isFind = true
					break
				}
			}

			// Neu khong tim thay thong tin email -> them moi nguoi dung
			if(!isFind) {
				$scope.userList.push(user)
			}

			console.log($scope.userList)

			// Luu thong tin nguoi dung xuong localStorage
			// Chuyen userList (array object) -> json string -> save
			var json = JSON.stringify($scope.userList)
			localStorage.setItem('userList', json)
		}
	}])
</script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>User Management Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<h1>User Management</h1>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Fullname</th>
				<th>Age</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in userList track by $index">
				<td>{{ $index + 1 }}</td>
				<td>{{ item.fullname }}</td>
				<td>{{ item.age }}</td>
				<td>{{ item.email }}</td>
			</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'store', function($scope, store){
		$scope.userList = store.loadUser()
	}])
</script>
</body>
</html>


Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó