Những điều thú vị với việc tạo controller trong angularjs

Bài đăng này đã không được cập nhật trong 7 năm

Mở đầu

Angularjs là một bộ Javascript Framework đang được nhiều người yêu thích sử dụng.Trong quá trình tìm hiểu, mình đã học được một điều khá thú vị: đó là có nhiều cách viết để tạo ra một controller trong angularjs, tất nhiên mỗi cách sẽ có những cái hay và hạn chế riêng,sau đây mình xin chia sẻ những gì mình tìm hiểu được.

Khởi tạo

Chúng ta sẽ dùng đoạn html sau để thực hành viết angularjs controller:


 <!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>InStep Movie Hunter</title>
<script
 src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js”>
</script>
<link
href=http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
rel=”stylesheet” />
</head>
<body ng-app>
    <div class=”row  bg-- primary ”>
        <div class=”col-md-6″>Title</div>
        <div class=”col-md-2″>Director</div>
        <div class=”col-md-2″>Release Date</div>
        <div class=”col-md-2″>Rating</div>
    </div>
    <div class=”row” ng-controller=”SearchByMovieCtrl“>
        <div class=”col-md-6″>{{movie.title}}</div>
        <div class=”col-md-2″>{{movie.director}}</div>
        <div class=”col-md-2″>{{movie.date}}</div>
        <div class=”col-md-2″>{{movie.mpaa}}</div>
    </div>

    <script>
        <!— Định nghĩa controller tại đây –>
    </script>
</body>
</html>

Controller với hàm định nghiã

Ở đây, controller đơn giản là một function, có thể viết như sau:


function SearchByMovieCtrl($scope) {
  $scope.movie = {
      title: ‘The Fellowship of the Ring’,
      director: ‘Jackson’,
      date: ‘2001-12-19’,
      mpaa: ‘PG-13’
  }
}

Với cách viết này, controller được tạo ra một cách nhanh chóng, tuy nhiên khi khai báo controller như một function thì nó có thể thực thi bất kì lúc nào, nếu chúng ta sử dụng nhiều hàm thì có thể dẫn đến sự xung đột tên khi có 2 function trùng tên.

Controller với hàm biểu thức

Cách viết này khá giống với cách viết ở trên, có điều thay vì được định nghĩa như một hàm thì nó sẽ được khai báo như sau:

 var SearchByMovieCtrl = function ($scope) {
  $scope.movie = {
      title: ‘The Fellowship of the Ring’,
      director: ‘Jackson’,
      date: ‘2001-12-19’,
      mpaa: ‘PG-13’
  }
}

Cách viết này có những ưu , nhược điểm giống như cách viết trên, tuy nhiên thay vì đặt một function vào không gian tên toàn cầu, thì nó đặt một biến vào không gian tên toàn cầu.

Controller là một module

Module được sử dụng phổ biến trong angularjs và được khuyến khích sử dụng.Ở đây chúng ta có thể khai báo một controller sau khi khai báo modul:

var app = angular.module(“movieHunter”, []);
app.controller(“SearchByMovieCtrl”,
function ($scope) {
  $scope.movie = {
      title: ‘The Fellowship of the Ring’,
      director: ‘Jackson’,
      date: ‘2001-12-19’,
      mpaa: ‘PG-13’
  }
});

Ở đây, trong đoạn code html ở đầu, ta cần thay đổi như sau:

<body ng-app=”movieHunter“>

Cách viết này tốt hơn so với 2 cách ở trên do nó sử dụng module để quản lí các thành phần của ứng dụng.Hơn nữa nó giữ các function ra khỏi không gian biến toàn cầu.

Controller với module và hàm định nghĩa

Ở đây, thay vì đặt nguyên một function bên trong tham số của một phương thức gọi, ta có thể định nghĩa một hàm thông qua một tham chiếu đến nó:

 var app = angular.module(“movieHunter”, []);
function SearchByMovieCtrl($scope) {
  $scope.movie = {
    title: ‘The Fellowship of the Ring’,
    director: ‘Jackson’,
    date: ‘2001-12-19’,
    mpaa: ‘PG-13’
  }
};
app.controller(“SearchByMovieCtrl”,
  SearchByMovieCtrl);

Cách viết này có nhược điểm là lại một lần nữa đặt controller được khởi tạo ra không gian biến toàn cầu.

Controller với module và hàm biểu thức

 var app = angular.module(“movieHunter”, []);
var SearchByMovieCtrl = function ($scope) {
  $scope.movie = {
    title: ‘The Fellowship of the Ring’,
    director: ‘Jackson’,
    date: ‘2001-12-19’,
    mpaa: ‘PG-13’
  }
};
app.controller(“SearchByMovieCtrl”,
  SearchByMovieCtrl);