By GokiSoft.com| 20:08 17/03/2022|
AngularJS

[Video] Tìm hiểu Dependences trong AngularJS và ứng dụng trong thực tế - Khóa học AngularJS


Lý Thuyết

#app.js


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

app.value('title', 'Welcome to learn AngularJS')

app.constant('BASE_URL', 'https://gokisoft.com')

app.provider('student', [function () {
	this.$get = [function() {
		return {
			"fullname": "TRAN VAN A",
			"age": 22,
			"address": "Ha Noi",
			running: function() {
				console.log('running ...')
			},
			sleeping: function(p1, p2) {
				console.log('sleeping ...')
			}
		};
	}];
}])

app.factory('animal', [function () {
	return {
		"name": "Tiger",
		"age": 5
	};
}])

app.service('cal', [function () {
	//cal -> this
	this.x = 5;
	this.y = 10;
	this.tinhtong = function() {
		return this.x + this.y
	}
	this.tinhhieu = function(p1, p2) {
		return p2 - p1;
	}
}])

// function running() {

// }

// function sleeping(p1, p2) {

// }


#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>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<h1 style="text-align: center;">{{ title }}</h1>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'title', 'BASE_URL', 'animal', function($scope, title, BASE_URL, animal){
		$scope.title = title + ' > ' + BASE_URL + ' : Ten Dong Vat -> ' + animal.name
	}])
</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>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<h1 style="text-align: center;">{{ title }}</h1>
<h1 style="text-align: center;">{{ subtitle }}</h1>

<ul>
	<li>Ho Ten: {{ student.fullname }}</li>
	<li>Tuoi: {{ student.age }}</li>
	<li>Dia Chi: {{ student.address }}</li>
</ul>
<p>
	Ket Qua: {{ s }}
</p>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'title', 'student', 'cal', function($scope, title, student, cal){
		$scope.title = title
		$scope.subtitle = 'Test'
		$scope.student = student

		student.running()

		$scope.s = cal.tinhhieu(5, 100)
	}])
</script>
</body>
</html>

Thực hành


#app.js


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


#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 Form</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</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">
			<p>
				<a href="register.html">Create a new account</a>
			</p>
		</div>
		<div class="form-group">
			<button class="btn btn-success">Login</button>
		</div>
	</form>
</div>

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

		$scope.login = function() {
			var isLogin = userManager.login($scope.email, $scope.pwd)
			if(isLogin) {
				window.open('show.html', '_self')
			} else {
				alert('Login failed!!!')
			}
		}
	}])

	// var obj = {
	// 	"fullname": "A",
	// 	"age": 12,
	// 	"address": "Ha Noi"
	// }

	// var json = `{
	// 	"fullname": "A",
	// 	"age": 12,
	// 	"address": "Ha Noi"
	// }`

	// var objList = [
	// 	{
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}, {
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}, {
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}
	// ]

	// var jsonList = `[
	// 		{
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}, {
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}, {
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}
	// 	]`
	// jsonList = '[{"fullname":"A","age":12,"address":"Ha Noi"},{"fullname":"A","age":12,"address":"Ha Noi"},{"fullname":"A","age":12,"address":"Ha Noi"}]';
	//Chuyen object | array -> json string -> object | array -> de dang trong lap trinh
</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 Form</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="saveUser()">
		<div class="form-group">
			<label>Full Name:</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">
			<p>
				<a href="login.html">I have a account</a>
			</p>
		</div>
		<div class="form-group">
			<button class="btn btn-success">Save</button>
		</div>
	</form>
</div>

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

		$scope.saveUser = function() {
			var user = {
				'fullname': $scope.fullname,
				'age': $scope.age,
				'email': $scope.email,
				'pwd': $scope.pwd
			}

			userManager.addUser(user)
		}
	}])
</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>Show User List</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</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" src="user.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'userManager', function ($scope, userManager) {
		$scope.userList = userManager.loadData()
	}])
</script>
</body>
</html>


#user.js


app.service('userManager', [function () {
	this.userList = []

	this.loadData = function() {
		var json = localStorage.getItem('userList')
		if(json != null && json != '') {
			this.userList = JSON.parse(json)
		}

		return this.userList
	}

	this.addUser = function(user) {
		var isFind = false
		for (var i = 0; i < this.userList.length; i++) {
			if(this.userList[i].email == user.email) {
				//update
				this.userList[i] = user
				isFind = true
				break
			}
		}
		if(!isFind) {
			this.userList.push(user)
		}
		console.log(this.userList)

		//Luu localStorage
		var json = JSON.stringify(this.userList)
		localStorage.setItem('userList', json)
	}

	this.login = function(email, pwd) {
		for(item of this.userList) {
			if(item.email == email && item.pwd == pwd) {
				return true
			}
		}
		return false
	}
}])


Tags:



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

5

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

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

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