[Học AngularJS] - Bài 03 - ng-controller
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ụ:
Bài viết này được đăng tại [free tuts .net]
<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 = "freetuts.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.