By GokiSoft.com|
15:55 18/02/2022|
AngularJS
[Video] Tìm hiểu Custom Directive & Nested Controller & Services trong AngularJS - C2110I
#vidu.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Directive in AngularJS</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>
</head>
<body ng-controller="MyController">
<!-- E -->
<!-- Tu dong insert doan html -->
<menu></menu>
<!-- Tu dong insert doan html -->
<menu></menu>
<menu-test></menu-test>
<!-- C -->
<div class="menu-2"></div>
<!-- A -->
<div vidu></div>
<!-- EAC -->
<abc></abc>
<div abc></div>
<div class="abc"></div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
}])
app.directive('menu', [function () {
return {
restrict: 'E',
template: '<h1 style="color: red">Option 1</h1><h1>Option 2</h1><h1>Option 3</h1>'
};
}])
app.directive('menuTest', [function () {
return {
restrict: 'E',
template: '<h1 style="color: blue">Option 1</h1><h1>Option 2</h1><h1>Option 3</h1>'
};
}])
app.directive('menu2', [function () {
return {
restrict: 'C',
template: '<h1 style="color: red">Option 1</h1><h1>Option 2</h1><h1>Option 3</h1>'
};
}])
app.directive('vidu', [function () {
return {
restrict: 'A',
template: '<h1 style="color: red">Option 1</h1><h1>Option 2</h1><h1>Option 3</h1>'
};
}])
app.directive('abc', [function () {
return {
restrict: 'EAC',
template: '<h1 style="color: red">Option 1</h1><h1>Option 2</h1><h1>Option 3</h1>'
};
}])
</script>
</body>
</html>#vidu2.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nested Controller & App in AngularJS</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>
</head>
<body>
<!-- App 1 -->
<div ng-controller="MyController1">
<h1>{{ content }}</h1>
<div ng-controller="MyController3">
<h1>{{ content }}</h1>
</div>
</div>
<div ng-controller="MyController2">
<h1>{{ content }}</h1>
</div>
<script type="text/javascript">
// Nhieu ng-app trong 1 website
var app = angular.module('MyApp', [])
app.controller('MyController1', ['$scope', function ($scope) {
$scope.content = 'Vi du 1'
}])
app.controller('MyController2', ['$scope', function ($scope) {
$scope.content = 'Vi du 2'
}])
app.controller('MyController3', ['$scope', function ($scope) {
$scope.content = 'Vi du 3'
}])
</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)
