Các Module trong AngularJS | 26 bài hướng dẫn AngularJs miễn phí PDF

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Các Module AngularJS AngularJS hỗ trợ tiếp cận theo hướng module Module sử dụng để phân biệt phần xử lý logic (service), controller ứng dụng … giúp code trở nên rõ ràng Chúng ta định nghĩa module thành file JavaScript riêng rã đặt tên chúng theo tệp module.js Ở ví dụ tạo module:  Module ứng dụng - sử dụng để khởi tạo ứng dụng với controller  Module điều khiển - sử dụng để định nghĩa controller Module ứng dụng mainApp.js var mainApp = angular.module("mainApp", []); Trên khai báo module ứng dụng mainApp sử dụng chức module hóa AngularJS Chúng ta khởi tạo mảng rỗng cho Mảng thường chứa thành phần độc lập module Module điều khiển studentController.js mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); Ở khai báo module studentController sử dụng chức năngmainApp.controller Sử dụng Module Ở sử dụng module ứng dụng sử dụng ng-app directive controller sử dụngngcontroller directive Chúng ta gộp mainApp.js studentController.js tệp HTML Ví dụ Dưới ví dụ cho phần mô tả bên trên: testAngularJS.jsp Angular JS Modules table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } AngularJS Sample Application Enter first name: Enter last name: Name: {{student.fullName()}} Subject: Name Marks {{ subject.name }} {{ subject.marks }} mainApp.js var mainApp = angular.module("mainApp", []); http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com studentController.js mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {name:'English',marks:75}, {name:'Hindi',marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); Kết Mở trang textAngularJS.jsp trình duyệt Dưới kết 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 ... textAngularJS.jsp trình duyệt Dưới kết 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í. .. mainApp.js var mainApp = angular .module( "mainApp", []); http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com... Dưới ví dụ cho phần mơ tả bên trên: testAngularJS.jsp Angular JS Modules