By GokiSoft.com|
21:50 20/12/2021|
AngularJS
[Video] Overview kiến thức AngularJS - C2108L
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Management Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- B1. Them thu vien cua AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<div class="container">
<table class="table table-bordered">
<thead></thead>
</table>
<table class="table table-bordered">
<thead></thead>
</table>
<table class="table table-bordered">
<thead></thead>
</table>
<div ng-controller="app1">
</div>
<div ng-controller="app2">
</div>
<button class="btn btn-danger" ng-click="loadContent()">Load Content</button>
<br/><br/><br/>
<div id="content"></div>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.directive('thead', [function () {
return {
template: `<tr>
<th>No</th>
<th>Full Name</th>
<th>Age</th>
<th>Address</th>
<th style="width: 50px"></th>
<th style="width: 50px"></th>
</tr>`
};
}])
app.value('username', 'admin')
app.controller('MyController', function ($scope, $http, username) {
$scope.title = 'Title App okok'
$scope.content = username
$scope.loadContent = function() {
//Tai dc noi dung trang: https://raw.githubusercontent.com/tranvandiep/c2108l/master/lesson04/vidu.html
$http
.get('https://raw.githubusercontent.com/tranvandiep/c2108l/master/lesson04/vidu.html')
.then(function(res) {
// $('#content').html(res.data)
$scope.content = res.data
})
}
})
app.controller('app1', ['$scope', function ($scope) {
$scope.title = 'Title App 1'
}])
app.controller('app2', ['$scope', function ($scope) {
$scope.title = 'Title App 2'
}])
</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)
