By GokiSoft.com|
09:40 11/02/2022|
AngularJS
[Video] Tìm hiểu Route & Custom Directive & Nested Controller trong AngularJS - C2108G3
#custom-directive.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Tutorial</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.6.9/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<!-- E: Tao directive bang tag name -->
<vi-du></vi-du>
<vi-du></vi-du>
<vi-du></vi-du>
<!-- A: Theo Attribute -->
<div test-directive></div>
<div test-directive></div>
<!-- C: Class -->
<div class="test-class"></div>
<!-- ALL -->
<test-all></test-all>
<div test-all></div>
<div class="test-all"></div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
}])
// E: Tao directive bang tag name
app.directive('viDu', [function () {
return {
restrict: 'E',
template: '<h2>Welcome to learn AngularJS</h2>'
};
}])
app.directive('testDirective', [function () {
return {
restrict: 'A',
template: '<h2>Xin Chao</h2>'
};
}])
app.directive('testClass', [function () {
return {
restrict: 'C',
template: '<h2>Xin Chao Class</h2>'
};
}])
app.directive('testAll', [function () {
return {
restrict: 'EAC',
template: '<h2>Xin Chao EAC</h2>'
};
}])
</script>
</body>
</html>#nest.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Tutorial</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.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController1">
<h2>{{ content }}</h2>
</div>
<div ng-controller="MyController2">
<h2>{{ content }}</h2>
</div>
<!-- Phuc tap controller -->
<div ng-controller="MyController3">
<h2>{{ msg }}</h2>
<div ng-controller="MyController4">
<h2>{{ msg }}</h2>
</div>
</div>
<!-- Khong hoat dong dc: do ko duoc binding -->
<h2>{{ content }}</h2>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController1', ['$scope', function ($scope) {
$scope.content = 'Xin Chao Controller 1'
}])
app.controller('MyController2', ['$scope', function ($scope) {
$scope.content = 'Xin Chao Controller 2'
}])
app.controller('MyController3', ['$scope', function ($scope) {
$scope.msg = 'MSG 3'
}])
app.controller('MyController4', ['$scope', function ($scope) {
$scope.msg = 'MSG 4'
}])
</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)
