Sunday, August 20, 2017

Angular 1: Tạo App Hoàn Chỉnh P2 - Cách Dùng Route

phần 1 ta có đi sơ qua về cách tạo project và chạy được project đơn giản nhất, tiếp đến ở phần này ta sẽ thêm route của angular1 vào để chuyển trang qua lại.

I. Các Thư Viện Cần Thiết
Trong bower.json ta thêm vào "angular-route": "1.5.5" ta sẽ được như bên dưới
{
  ...
  "dependencies": {
    "angular": "1.5.5",
    "bootstrap": "3.2.0",
    "angular-route": "1.5.5"
  }
}
Sau khi thêm vào ta run lại lệnh bower install để tải các thư viện mới thêm vào, sau khi tải xong ta thêm nó vào trang index.html để sử dụng.
...
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
...

II. Tiếp Đến Là Phần Config Các URL Trong Route
1 Ta Phải Đăng Ký ngRoute Với Ứng Dụng trước khi Dùng
Trong file app.js của phần trước ta chỉ có mới khai báo MyCtrl, giờ ta thêm ngRoute vào và ta đăng ký với route hai url mới là san-phamsan-pham/:id file app.js sẽ thành như sau.
(function(){
 "use strict";
 var app = angular.module("App",[
  "ngRoute",
  "MyCtrl"
  ])
  .config(["$routeProvider", function($routeProvider) {
   $routeProvider
    .when("/san-pham", {
     template: "<div>Danh sách sản phẩm</div>",
     controller: "ListSanPhamCtrl"
    }).when("/san-pham/:id", {
     template: "<div>Sản phẩm chi tiết {{idSanPham}}</div>",
     controller: "SanPhamDetailCtrl"
    });
  }]);
})();
2. Thêm controller
Ở trên ta có thêm 2 controller là ListSanPhamCtrl, SanPhamDetailCtrl  ta sẽ định ngĩa nó trong main.ctrl.js đơn giản như sau,
(function(){
 "use strict";
 angular.module("MyCtrl",[])
  .controller("AppCtrl", ["$scope", function($scope){
   $scope.sayHello = "Welcome angular 1";
  }])
  .controller("ListSanPhamCtrl", ["$scope", function($scope){

  }])
  .controller("SanPhamDetailCtrl", ["$scope", "$routeParams", function($scope, $routeParams){
   $scope.idSanPham = $routeParams.id;
  }]);;
})();
ở trên ta có dùng tới $routeParams để lấy path param mà ta đã định nghĩa trong route config

3. ng-view
Tiếp đến nếu muốn hiển thị dữ liệu trong route ta phải thêm ng-view directive vào trang index.html như sau
<body ng-controller="AppCtrl">

 <div ng-bind="sayHello" class="text-center"></div>
 <div ng-view></div>

 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="app/app.js"></script>
 <script src="app/main.ctrl.js"></script>
</body>
4. Kết quả
Giò chúng ta vào trình duyệt và truy cập vào địa chỉ http://localhost:8080/#/san-pham ta được
Còn nếu ta truy cập vào địa chỉ http://localhost:8080/#/san-pham/1 ta được
 Vậy là chúng ta đã xong cái phần cơ bản về Route phải hem,
nhưng trong thực tế không phải 1 trang view của chúng ta chỉ có 1 dòng code như vậy mà còn phức tạp hơn nhiều.
Chúng ta sẽ đi tiếp tới phần sau, đó là cách chúng ta sẽ include 1 file view.html thay vì 1 vài dòng code đơn giản

5. Tải source code ở đây
https://drive.google.com/open?id=0B-JvPy4-xKqkNlRXM1hWNnJiZ1E

6. Cách Sử Dụng View Thay Vì Template Đơn Giản
Trong thực tế thì có rất ít trường hợp ta trả về nội dung đơn giản chỉ có một vài element, mà ta sẽ trả về cả một trang html mà ta đã định nghĩa trong folder views. Giờ chúng ta sẽ thay đổi code một chút để có thê sử dụng được view.
- Ta tạo các file sau san-pham-list.html, san-pham-list.ctrl.js, san-pham-detail.html, san-pham-detail.ctrl.js,  trong thư mục /angular1/app/views với nội dung bên dưới
+ san-pham-list.html
<div class="san-pham-list-com">
 welcome to list san pham view
</div>
+ san-pham-list.ctrl.js
(function(){
 "use strict";
 angular.module("User.SanPhamList.Ctrl",[])
  .controller("ListSanPhamCtrl", ["$scope", function($scope){

  }]);
})();
+ san-pham-detail.html
<div class="san-pham-detail-com">
 Sản phẩm chi tiết {{idSanPham}} from view
</div>
+ san-pham-detail.ctrl.js
(function(){
 "use strict";
 angular.module("User.SanPhamDetail.Ctrl",[])
  .controller("SanPhamDetailCtrl", ["$scope", "$routeParams", function($scope, $routeParams) {
   $scope.idSanPham = $routeParams.id;
  }]);
})();
- Tiếp đến ta sẽ xóa đi các SanPhamDetailCtrlListSanPhamCtrl mà ta đã tạo trong main.ctrl.js, sau đó ta sẽ đắng cho hai module User.SanPhamDetail.Ctrl, User.SanPhamList.Ctrl mà ta vừa mới tạo ta được kết quả như sau.
(function(){
 "use strict";
 angular.module("MyCtrl",[
  "User.SanPhamDetail.Ctrl",
  "User.SanPhamList.Ctrl"
  ])
  .controller("AppCtrl", ["$scope", function($scope) {
   $scope.sayHello = "Welcome angular 1";
  }])
})();
Ở trên là một ví dụ cho import những module con vào module cha và ta chỉ import MyCtrl module trong app.js của mình hoặc ta có thể đăng ký đơn lẻ từng module ở app.js vẫn được, nhưng ở đây mình muốn giữ có app.js clean và chỉ đăng ký các module giành cho thư viện.
- Tiếp đến ta sửa một chút config cho routeProvider file app.js ta thay template bằng templateUrl ta được như sau.
.config(["$routeProvider", function($routeProvider) {
 $routeProvider
  .when("/san-pham", {
   templateUrl: "app/views/san-pham/san-pham-list.html",
   controller: "ListSanPhamCtrl"
  }).when("/san-pham/:id", {
   templateUrl: "app/views/san-pham/san-pham-detail.html",
   controller: "SanPhamDetailCtrl"
  });
}]);
- Cuối cùng ta nhớ phải import san-pham-detail.ctrl.js, san-pham-list.ctrl.js trong file index.html
<body ng-controller="AppCtrl">

 <div ng-bind="sayHello" class="text-center"></div>
 <div ng-view></div>

 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="app/app.js"></script>
 <script src="app/main.ctrl.js"></script>
 <script src="app/views/san-pham/san-pham-detail.ctrl.js"></script>
 <script src="app/views/san-pham/san-pham-list.ctrl.js"></script>
</body>
7. Run Lại Project
Ta sẽ thấy được kết quả như trên
- Vậy là ta dã xong cách dùng Route và view như thế rồi, chỉ là khái niệm cơ bản, nhưng nó cũng giúp chúng ta có một cấu trúc cho một project hoàn hảo.

8. Tải Source Code Tại Đây
https://drive.google.com/open?id=0B-JvPy4-xKqkZWMyX0tBbTZNS0E

No comments:

Post a Comment