Sơ đồ tổng quan angular

Tham khảo: https://www.w3schools.com/angular
Code mẫu:

Nạp thư viện js:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
</ul>
</div>

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="myCol='lightblue'; ...">
Total in dollar: {{ quantity * price }}

<p>First name: {{firstname}}</p>

<table>
<tr ng-repeat="x in names | orderBy:'country' | filter : 'i' | filter :{Cột:x.Name} ">
    <td>{{ x.Name }} - {{ $index + 1 }}</td>
    <td>{{ x.Country }} - {{ lastName | uppercase }} - {{ lastName | lowercase }} - {{ lastName | myFormat}}</td>
</tr>
</table>
<button ng-click="myFunction()">Click me!</button>
</div>

<script>
var app = angular.module("myApp", []);

//Hàm đợi xử lý
$interval(function () {
    alert("hello");
}, 1000);

app.filter('myFormat', function() {
    return function(x) {
        return "Gia tri cua toi:"+ x;
    };
});

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
$scope.changeName = function() {
      $scope.firstname = "Nelly";
  };
   $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
$scope.myFunction= function() {
    alert('xin chao');
  };
$scope.orderByMe = function(tenCot) {
    $scope.myOrderBy = tenCot;
}
});

app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
    $scope.myWelcome = response.data;
});

app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
      $scope.myHeader = "How are you today?";
}, 2000);
});

app.controller('myCtrl', function($scope, $http) {
$http({
    method : "GET",
    url : "welcome.htm"
}).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
});
});

</script>

+ ng-app khởi tạo ứng dụng AngularJS.

+ ng-init khởi tạo dữ liệu ứng dụng.

+ ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, vùng văn bản) với dữ liệu ứng dụng.

+ ng-bind: .....
sự kiện
+ ng-click:
+ ng-disabled:
+ ng-show
+ ng-hide
+ ng-blur
+ ng-change
+ ng-click
+ ng-copy
+ ng-cut
+ ng-dblclick
+ ng-focus
+ ng-keydown
+ ng-keypress
+ ng-keyup
+ ng-mousedown
+ ng-mouseenter
+ ng-mouseleave
+ ng-mousemove
+ ng-mouseover
+ ng-mouseup
+ ng-paste

Mục liên quan: