http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Cài đặt mơi trường AngularJS Ở chương này, thảo luận cách cài đặt thư viện AngularJS để sử dụng việc phát triển ứng dụng web Chúng ta giới thiệu qua cấu trúc thư mực nội dụng Khi bạn truy cập https://angularjs.org/, bạn thấy có lựa chọn để bạn tải AngularJS: View on GitHub- Nhấn chuột vào nút để truy cập vào GitHub, bạn có phiên AngularJS Download- Hoặc nhấn vào nút hình sau lên: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Màn hình cho có nhiều lựa chọn bạn sử dụng AngularJS sau: o Tải xuống host file máy cá nhân bạn: Có lựa chọn khác legacy lastest Lagacy dành cho phiên 1.2.x trở trước, lastest 1.3.x Bạn sử dụng thu nhỏ, khơng nén phiên nén o Truy cập CDN: Bạn truy cập AngularJS sử dụng CDN Điều có nghĩa bạn sử dụng AngularJS server Google Điều có lợi người sử dụng trang web tải AngularJS CDN trên, khơng phải tải lại Chúng sử dụng phiên CDN qua loạt hướng dẫn Ví dụ Bây bắt đầu viết ví dụ đơn giản sử dụng thư viện AngularJS Đầu tiên tạo trang myfirstexample.jspl đây: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Welcome {{helloTo.title}} to the world of Tutorialspoint! angular.module("myapp", []) controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); Dưới thành phần mô tả đoạn code bên cách chi tiết: Khai báo AngularJS Để khai báo JavaScript đoạn code bạn, bạn khai báo sau: Kiểm tra phiên AngularJS trang web thức họ Chỉ đến ứng dụng AngularJS Phần phần HTML chứa ứng dụng AngularJS Cái thêm thuộc tínhngapp tại phần tử root HTML ứng dụng AngularJS Bạn thêm vào phần tử html phần tử body sau: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com View View thành phần sau: Welcome {{helloTo.title}} to the world of Tutorialspoint! ng-controller thông báo cho AngularJS controller sử dụng phần view.helloTo.title thông báo cho AngularJS ghi giá trị model với tên helloTo.title vào phần HTML Controller Controller phần sau: angular.module("myapp", []) controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); Đoạn code đăng ký hàm controller với tên HelloController AngularJS module với tên myapp Chúng ta tìm hiểu sâu Các module Thành phần controllers chương tương ứng Hàm controller đăng ký với AngularJS qua cách gọi hàm angular.module( ).controller( ) Tham số $scope truyền tới hàm controller model Hàm controller thêm đối tượng helloTo JavaScript , thêm trường title vào đối tượng Thực Sau bạn lưu đoạn code tên myfirstexample.jspl mở trình duyệt web Bạn thấy phần kết sau: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Khi trang tải trình duyệt đó, điều sau xảy ra: Tài liệu HTML tải vào trình duyệt, ước lượng trình duyệt, AngularJS JavaScript tải, đối tượng global AngularJS khởi tạo Sau đó, JavaScript đăng ký hàm controller cho việc thực thi Tiếp theo AngularJS duyệt qua phần tử HTML để kiểm tra ứng dụng AngularJS view Khi view tìm thấy, kết nối view với tính controller tương ứng Tiếp theo, AngularJS thực hàm controller, trả kết đến phần view với liệu model khởi tạo phần controller Trang web tải lên hoàn toàn http://vietjack.com/ Trang chia sẻ học online miễn phí Page ... AngularJS sử dụng CDN Điều có nghĩa bạn sử dụng AngularJS server Google Điều có lợi người sử dụng trang web tải AngularJS CDN trên, khơng phải tải lại Chúng sử dụng phiên CDN qua loạt hướng dẫn. .. sử dụng thư viện AngularJS Đầu tiên tạo trang myfirstexample.jspl đây: http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /angularjs/ index.jsp... src="http://ajax.googleapis.com/ajax/libs /angularjs/ 1.3.14/angular.min.js"> Kiểm tra phiên AngularJS trang web thức họ Chỉ đến ứng dụng AngularJS Phần phần HTML chứa ứng dụng AngularJS Cái thêm thuộc