By GokiSoft.com| 09:14 16/02/2022|
AngularJS

[Video] Tìm hiểu Value, Constant, Provider, Factory, Service trong AngularJS - C2108G3


#app.js


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

// value
app.value('code', 'C001')

// constant
app.constant('KEY', 'gokisoft.com')

// provider
app.provider('Calculator', [function () {
	this.$get = [function() {
		return {
			tinhtong: function(a, b) {
				return a + b
			},
			tinhhieu: function(a, b) {
				return a - b
			},
			tinhtich: function(a, b) {
				return a * b
			},
			tinhthuong: function(a, b) {
				return a/b
			},
		};
	}];
}])

app.provider('student', [function () {
	this.$get = [function() {
		return {
			'fullname': '',
			'age': 0,
			'address': '',
			running: function() {
				console.log('Sinh vien dang chay')
			},
			sleeping: function() {
				console.log('Sinh vien dang ngu')
			}
		};
	}];
}])

// Factory
app.factory('Cal', [function () {
	return {
		tinhtong: function(a, b) {
			return a + b
		},
		tinhhieu: function(a, b) {
			return a - b
		},
		tinhtich: function(a, b) {
			return a * b
		},
		tinhthuong: function(a, b) {
			return a/b
		},
	};
}])

// Cach trien khai object co thuoc tinh & function
// var std = {
// 	'fullname': '',
// 	'age': 0,
// 	'address': '',
// 	running: function() {
// 		console.log('Sinh vien dang chay')
// 	},
// 	sleeping: function() {
// 		console.log('Sinh vien dang ngu')
// 	}
// }

// // Trien khai bang cach khac
// var std1 = {}
// std1.fullname = ''
// std1.age = 0
// std1.address = ''
// std1.running = function() {
// 	console.log('Sinh vien dang chay')
// }
// std1.sleeping = function() {
// 	console.log('Sinh vien dang ngu')
// }

// Service
app.service('CalService', [function () {
	this.tinhtong = function(a, b) {
		return a + b
	}

	this.tinhhieu = function(a, b) {
		return a - b
	}
	
	this.tinhtich = function(a, b) {
		return a * b
	}
	this.tinhthuong = function(a, b) {
		return a/b
	}
}])


#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 One - AngularJS</title>

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="form-group">
		<input type="number" name="a" placeholder="Enter a" class="form-control" ng-model="a">
		<input type="number" name="b" placeholder="Enter b" class="form-control" ng-model="b">
		<button class="btn btn-success" ng-click="showMenu()">Show Menu</button>
		<button class="btn btn-success" ng-click="tinhtong()">Tinh Tong</button>
	</div>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'code', 'KEY', 'Calculator', function ($scope, code, KEY, Calculator) {
		//Trien khai rat nhieu code - page1

		$scope.showMenu = function() {
			alert('Hien thi menu ' + code + ' - ' + KEY)
			//logic
		}

		$scope.tinhtong = function() {
			var s = Calculator.tinhtong($scope.a, $scope.b)
			alert('Ket qua: ' + s)
		}
	}])
</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 One - AngularJS</title>

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="form-group">
		<button class="btn btn-warning" ng-click="showMenu()">Test Show Menu</button>
	</div>
</div>

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
	app.controller('MyController', ['$scope', 'code', 'student', 'Cal', 'CalService', function ($scope, code, student, Cal, CalService) {
		//Trien khai rat nhieu code - page2

		$scope.showMenu = function() {
			// alert('Hien thi menu *** ' + code)
			// //logic
			// student.running()

			// var s = Cal.tinhtong(1, 10)
			// alert('Ket qua: ' + s)
			var s = CalService.tinhtong(5, 8)
			alert('Ket qua: ' + s)
			var s = CalService.tinhtich(5, 8)
			alert('Ket qua: ' + s)
		}
	}])
</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)

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

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