AngularJS 環(huán)境設(shè)置

本章介紹如何設(shè)置用于Web應(yīng)用程序開發(fā)的AngularJS庫。它還簡要描述了目錄結(jié)構(gòu)及其內(nèi)容。

當(dāng)您打開鏈接https://angularjs.org/時，您將看到下載AngularJS庫的兩個選項(xiàng)-

AngularJS下載

View on GitHub ?單擊此按鈕，您將轉(zhuǎn)移到GitHub并獲取所有最新腳本。
Download AngularJS 1 ?單擊此按鈕，您會看到一個屏幕，顯示為?

AngularJS下載

該屏幕提供了如下使用Angular JS的各種選項(xiàng)-

Downloading and hosting files locally

有兩個不同的選項(xiàng)：“傳統(tǒng)”和“最新”。名稱本身是自描述的。舊版的版本低于1.2.x，而最新版的版本為1.7.x。
我們還可以使用最小化，未壓縮或壓縮的版本。

CDN access?您還可以訪問CDN。CDN使您可以訪問區(qū)域數(shù)據(jù)中心。在這種情況下，由Google托管。CDN將托管文件的責(zé)任從您自己的服務(wù)器轉(zhuǎn)移到一系列外部服務(wù)器上。它還提供了一個優(yōu)勢，如果您的網(wǎng)頁訪問者已經(jīng)從同一CDN下載了AngularJS的副本，則無需重新下載它。

在本教程中，我們一直在使用CDN版本的庫。

在線示例

現(xiàn)在，讓我們使用AngularJS庫編寫一個簡單的示例。讓我們創(chuàng)建一個HTML文件myfirstexample.html，如下所示-

示例

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

測試看看 ?/?

讓我們詳細(xì)閱讀上面的代碼-

包括AngularJS

我們在HTML頁面中包含AngularJS JavaScript文件，以便我們可以使用它-

<head>
   <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js">
   </script>
</head>

您可以在其官方網(wǎng)站上查看最新版本的AngularJS。

指向AngularJS應(yīng)用

接下來，需要確定HTML的哪一部分包含AngularJS應(yīng)用。您可以通過將ng-app屬性添加到AngularJS應(yīng)用的根HTML元素來實(shí)現(xiàn)。您可以將其添加到html元素或body元素中，如下所示-

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

視圖

視圖是這部分-

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

ng-controller告訴AngularJS在該視圖中使用哪個控制器。helloTo.title告訴AngularJS在此位置用HTML編寫名為helloTo.title的模型值。

控制器

控制器部分是-

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

此代碼在名為myapp的角度模塊中注冊了名為HelloController的控制器函數(shù)。我們將在各自的章節(jié)中詳細(xì)研究模塊和控制器?？刂破骱瘮?shù)通過angular.module(...)。controller(...)函數(shù)調(diào)用以角度注冊。

$scope 參數(shù)模型被傳遞給控制器函數(shù)?？刂破骱瘮?shù)添加一個 helloTo JavaScript 對象，并在該對象中添加一個 title 字段。

執(zhí)行

將以上代碼另存為myfirstexample.html，并在任何瀏覽器中將其打開。您將看到以下輸出-

Welcome AngularJS to the world of nhooo!

在瀏覽器中加載頁面時會發(fā)生什么？讓我們看看-

HTML文檔已加載到瀏覽器中，并由瀏覽器評估。
AngularJS JavaScript文件已加載，角度全局對象已創(chuàng)建。
執(zhí)行注冊控制器功能的JavaScript。
接下來，AngularJS掃描HTML以搜索AngularJS應(yīng)用程序和視圖。
找到視圖后，它將把該視圖連接到相應(yīng)的控制器功能。
接下來，AngularJS執(zhí)行控制器功能。
然后，它使用控制器填充的模型中的數(shù)據(jù)呈現(xiàn)視圖?，F(xiàn)在頁面已準(zhǔn)備就緒。

AngularJS MVC架構(gòu)AngularJS 簡介

AngularJS 基礎(chǔ)教程

AngularJS 環(huán)境設(shè)置

在線示例

包括AngularJS

指向AngularJS應(yīng)用

視圖

控制器

執(zhí)行