AngularJS - Thiết lập môi trường

Chương này mô tả cách thiết lập thư viện AngularJS được sử dụng trong phát triển ứng dụng web. Nó cũng mô tả ngắn gọn cấu trúc thư mục và nội dung của nó.

Khi bạn mở liên kết https://angularjs.org/, bạn sẽ thấy có hai tùy chọn để tải xuống thư viện AngularJS -

View on GitHub - Bằng cách nhấp vào nút này, bạn được chuyển hướng đến GitHub và nhận tất cả các tập lệnh mới nhất.
Download AngularJS 1 - Bằng cách nhấp vào nút này, một màn hình bạn sẽ thấy một hộp thoại hiển thị như -

Màn hình này cung cấp các tùy chọn sử dụng Angular JS khác nhau như sau:

Downloading and hosting files locally
- Có hai tùy chọn khác nhau: Kế thừa và Mới nhất. Bản thân các tên này là tự mô tả. Legacy có phiên bản nhỏ hơn 1.2.x và mới nhất có phiên bản 1.3.x.
- Chúng tôi cũng có thể sử dụng phiên bản thu nhỏ, không nén hoặc nén.
CDN access- Bạn cũng có quyền truy cập vào CDN. CDN cho phép bạn truy cập vào các trung tâm dữ liệu khu vực. Trong trường hợp này, máy chủ Google. CDN chuyển trách nhiệm lưu trữ tệp từ máy chủ của riêng bạn sang một loạt máy chủ bên ngoài. Nó cũng mang lại một lợi thế là nếu khách truy cập trang web của bạn đã tải xuống bản sao của AngularJS từ cùng một CDN, thì không cần phải tải xuống lại.

Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết một ví dụ đơn giản bằng cách sử dụng thư viện AngularJS. Hãy để chúng tôi tạo một tệp HTML myfirstexample.html được hiển thị như bên dưới -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Hãy để chúng tôi đi qua đoạn mã trên một cách chi tiết -

Bao gồm AngularJS

Chúng tôi bao gồm tệp JavaScript AngularJS trong trang HTML để chúng tôi có thể sử dụng nó -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

Bạn có thể kiểm tra phiên bản mới nhất của AngularJS trên trang web chính thức của nó.

Trỏ đến ứng dụng AngularJS

Tiếp theo, cần phải cho biết phần nào của HTML chứa ứng dụng AngularJS. Bạn có thể thực hiện việc này bằng cách thêm thuộc tính ng-app vào phần tử HTML gốc của ứng dụng AngularJS. Bạn có thể thêm nó vào phần tử html hoặc phần thân như hình dưới đây -

<body ng-app = "myapp">
</body>

Lượt xem

Quan điểm là phần này -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller cho AngularJS biết sẽ sử dụng bộ điều khiển nào với chế độ xem này. helloTo.title yêu cầu AngularJS viết giá trị mô hình có tên helloTo.title trong HTML tại vị trí này.

Bộ điều khiển

Phần điều khiển là -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Mã này đăng ký một chức năng điều khiển có tên HelloController trong mô-đun góc có tên myapp . Chúng tôi sẽ nghiên cứu thêm về các mô-đun và bộ điều khiển trong các chương tương ứng của chúng. Chức năng điều khiển được đăng ký trong góc thông qua lệnh gọi hàm angle.module (...). Controller (...).

Mô hình tham số $ scope được chuyển cho hàm bộ điều khiển. Hàm controller thêm một đối tượng JavaScript helloTo và trong đối tượng đó, nó thêm một trường tiêu đề .

Chấp hành

Lưu mã trên dưới dạng myfirstexample.html và mở nó trong bất kỳ trình duyệt nào. Bạn sẽ thấy kết quả sau:

Welcome AngularJS to the world of Tutorialspoint!

Điều gì xảy ra khi trang được tải trong trình duyệt? Hãy để chúng tôi xem -

Tài liệu HTML được tải vào trình duyệt và được trình duyệt đánh giá.
Tệp JavaScript AngularJS được tải, đối tượng toàn cục góc cạnh được tạo.
JavaScript đăng ký các chức năng điều khiển được thực thi.
Tiếp theo, AngularJS quét qua HTML để tìm kiếm các ứng dụng AngularJS cũng như các chế độ xem.
Khi chế độ xem được định vị, nó kết nối chế độ xem đó với chức năng bộ điều khiển tương ứng.
Tiếp theo, AngularJS thực thi các chức năng của bộ điều khiển.
Sau đó, nó hiển thị các khung nhìn với dữ liệu từ mô hình được bộ điều khiển điền vào. Trang bây giờ đã sẵn sàng.