[Học AngularJS] - Bài 03 - ng-controller - AngularJS căn bản
Trong video trước chúng ta đã tìm hiểu ng-app, tiếp bước thì trong video này chúng ta sẽ tìm hiểu về ng-controller, đây là một Directive dùng để điều xử lý một chức năng cụ thế nào đó. # Khai báo ng-controller trong html Để khai báo ng-controller thì tương tự như ng-app chúng ta sẽ sử dụng cú ...
Trong video trước chúng ta đã tìm hiểu ng-app, tiếp bước thì trong video này chúng ta sẽ tìm hiểu về ng-controller, đây là một Directive dùng để điều xử lý một chức năng cụ thế nào đó.
# Khai báo ng-controller trong html
Để khai báo ng-controller thì tương tự như ng-app chúng ta sẽ sử dụng cú pháp ng-controller="name_controller".
Ví dụ:
<body ng-app="myApp" ng-controller="HomeCtrl"> </body>
# Khai báo controller trong javascript
Tất cả các controller khi khai báo ở trong HTML thì bắt buộc ban phải khai báo trong javascript với cú pháp như sau:
myApp = angular.module('myApp', []);
myApp.controller("controller_name", function(){
});Trong đó đoạn code tạo myApp thì bạn đã học ở bài trước rồi
# $cope trong controller
$scope là một Service rất quan trọng trong angularjs (chúng ta sẽ tìm hiểu sau) bởi vì nó sẽ share data giữa các đối tượng HTML, Controller và các Service khác. Trong controller muốn sử dụng nó thì ta chỉ cần khai báo dưới dạng tham số truyền vào là được.
Ví dụ:
myApp = angular.module('myApp', []);
myApp.controller("controller_name", function($scope){
$scope.website = "Zaidap.com.net";
});Trong ví dụ này tôi có tạo một giá trị $scope.website, đây chính là cách lưu dữ liệu. Lúc này bên view HTML muốn sử dụng thì ta chỉ việc dùng cú pháp sau:
<body ng-app="myApp" ng-controller="HomeCtrl">
{{website}}
</body>Lúc này chạy lên bạn sẽ thấy kết quả như mong đợi.
