Thành phần View trong AngularJS | 26 bài hướng dẫn AngularJs miễn phí PDF

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com AngularJS - View AngularJS hỗ trợ Single Page Application thông qua multiple view trang đơn Để làm điều này, AngularJS cung cấp ng-view ng-template directive $routeProvider service ng-view Thẻ ng-view đơn giản tạo nơi giữ hình view tương ứng đặt dựa vào cấu hình Cách sử dụng Định nghĩa thẻ div với ng-view module ng-template ng-template directive sử dụng để tạo HTML view sử dụng thẻ script Nó chứa thuộc tính “id” sử dụng $routeProvider để liên kết view controller Cách sử dụng Định nghĩa khối script với kiểu ng-template module Add Student {{message}} http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com $routeProvider Là dịch vụ việc tạo cấu hình cho địa URL, liên kết chúng với trang HTML tương ứng ng-template gắn controller với chúng Cách sử dụng Định nghĩa khối script module thiết lập cấu hình định tuyến var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider when('/addStudent', { templateUrl: 'addStudent.jsp', controller: 'AddStudentController' }) when('/viewStudents', { templateUrl: 'viewStudents.jsp', controller: 'ViewStudentsController' }) otherwise({ redirectTo: '/addStudent' }); }]); Dưới điểm quan trọng cần xem xét từ ví dụ  $routeProvider định nghĩa hàm config mainApp module sử dụng khóa “$routeProvider”  $routeProvider.when định nghĩa địa URL “/addStudent” sử dụng để liên kết đến trang “addStudent.jsp”, addStudent.jspl nên đặt chung thư mục đường dẫn với trang HTML Nếu trang HTML không định nghĩa, ng-template sử dụng id=”addStudent.jspl” Chúng ta sử dụng ng-template http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp  "otherwise" sử dụng để thiết lập view mặc định  "controller" để thiết lập controller tương ứng với view Copyright © vietjack.com Ví dụ Dưới ví dụ minh họa cho directive mơ tả bên testAngularJS.jsp Angular JS Views AngularJS Sample Application

Add Student

View Students

Add Student {{message}} View Students {{message}} var mainApp = angular.module("mainApp", ['ngRoute']); http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider when('/addStudent', { templateUrl: 'addStudent.jsp', controller: 'AddStudentController' }) when('/viewStudents', { templateUrl: 'viewStudents.jsp', controller: 'ViewStudentsController' }) otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "This page will be used to display add student form"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); Kết Mở trang textAngularJS.jsp trình duyệt web bạn thấy kết sau http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp http://vietjack.com/ Trang chia sẻ học online miễn phí Copyright © vietjack.com Page ... http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /angularjs/ index.jsp http://vietjack.com/ Trang chia sẻ học online miễn phí Copyright © vietjack.com Page ... mục đường dẫn với trang HTML Nếu trang HTML không định nghĩa, ng-template sử dụng id=”addStudent.jspl” Chúng ta sử dụng ng-template http://vietjack.com/ Trang chia sẻ học online miễn phí Page... miễn phí Page http://vietjack.com /angularjs/ index.jsp  "otherwise" sử dụng để thiết lập view mặc định  "controller" để thiết lập controller tương ứng với view Copyright © vietjack.com Ví dụ