Tạo bởi Trắc Nghiệm Việt|
[Source Code] Tìm hiểu về dependency value & const & provider & factory & service trong AngularJS
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>