AngularJS入門教程1--配置環境

時間 2019-11-09

標籤 angularjs 入門教程配置環境欄目 AngularJS 简体版

原文原文鏈接

首先須要下載AngualrJS，下載地址 https://angularjs.org/html

官方網站提供2種下載使用AngularJS方法：前端

1. 去GitHub下載，點擊按鈕會跳轉到GitHub頁面，可獲取最新版本angularjs

2. 直接下載，點擊此按鈕會直接彈出以下窗口，ajax

可根據須要選擇最適合的AngularJS 版本，下載並保存到本地api

有兩種選項Legacy和Latest，Legacy是1.2.x如下，Latest 是1.4.x 及以上版本。瀏覽器

CDN 訪問地址，CDN 是必須設置的，CDN爲全球用戶設置訪問區域數據中心的權限。若是用戶訪問你的網頁時AngularJS 已經下載，不須要從新下載。app

下面是使用AngularJS庫的簡單示例，代碼以下：函數

<!doctype html>
<html>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/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>

使用AngularJS

經過在HTML根元素中添加ng-app屬性，也能夠將其添加到HTML 的body 元素中：工具

<body ng-app = "myapp">

</body>

View

view 代碼以下：開發工具

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

ng-controller 會指定控制器使用該View,helloTo.title會告訴AngularJS 將Model中的值寫入HTML中。

Controller

Controller 部分代碼：

   1:  <script>

   2:     angular.module("myapp", [])

3:

   4:     .controller("HelloController", function($scope) {

   5:        $scope.helloTo = {};

   6:        $scope.helloTo.title = "AngularJS";

   7:     });

   8:  </script>

上述代碼註冊了控制器，命名爲HelloController。Controller功能可經過angular.module(...).controller(...) 功能調用註冊的。

$scope參數會經過Controller 函數傳遞到Model中，controller會添加JS 對象，並命名爲HelloTo，在該對象中添加Title字段。

執行

保存myfirstexample.html 文件，並運行，能夠獲得如下結果：

Welcome AngularJS to the world of Tutorialspoint!

當瀏覽器加載頁面時，加載過程以下：

1. 瀏覽器首先會加載HTML文檔。AngularJS 腳本文件也會被加載，建立全局對象。其次JS註冊的Controller 會被執行。

2. AngularJS 掃描HTML查找AngularJS aPP及Views。一旦View被加載，則View會響應Controller的控制函數。3. AngularJS 執行控制器， 並根據Model中提取的數據渲染View，頁面也加載完成

Angular 開發工具

新一代HTML5 / JavaScript UI控件 Wijmo，大而全面的前端開發工具包，現已全面支持Angular 2。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。