歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 走進 AngularJS 的世界

走進 AngularJS 的世界

日期:2017/3/1 9:15:12   编辑:Linux編程

AngularJS 是一個 JS 框架,適用於以數據操作為主的 SPA (Single Page Application)應用。
不再是 “先查找元素在操作元素”,所有操作都以 “Model數據為中心”

AngularJS 的四大特性

  • 采用 MVC 模型
    1. Model:模型,業務數據;在 AngularJS 中,就是存儲於特定作用范圍內的變量
    2. View:視圖,模型數據在頁面中的呈現
    3. Controller:控制器,負責創建、修改、刪除模型數據,AngularJS 中,使用function來創建控制器
  • 自動化雙向數據綁定
  • 依賴注入
  • 模塊化設計

AngularJS 中 ng 模塊提供的指令

ngApp 用途:

- 初始化一個 AngularJS 應用程序
- 標記了AngularJS腳本的作用域

語法:

<element ng-app><element>
<element ng-app="xxx"><element>
<element data-ng-app="xxx"><element>

注意:一個 HTML 頁面只允許使用一次 ngApp 指令,如果有多個 ng-app 指令,則只有第一個會被使用,同時只有 ngApp 范圍內的 Angular 表達式才會被計算出對應的值。

ngInit:用於聲明 Model 變量,初始化應用程序模型數據

語法:

<element ng-init="變量名=值;變量名1=值1">

注意:Model 變量聲明時不能使用 var 關鍵字 和 new 關鍵字

  • 使用 ngInit 指令聲明模型數據 ----- 將 Model 和 View 混雜在一起,不推薦使用
  • 使用Controller控制器 聲明模型數據 ----- 實現了Model 和 View 的分離,且可以使用的數據類型更加廣泛,推薦使用
1. 聲明一個自定義的模塊(module)
    angular.module('模塊名', []);
2. 在當前 AngularJS 應用中注冊自定義模塊
    ng-app="模塊名"
3. 在自定義模塊中創建 Controller 函數,其中聲明 Model 數據
    $scope.模型變量名 = 值;
4. 在 View 中創建 Controller 對象的實例,指定其作用范圍
    <element ng-controller="控制器名"> 控制器的有效范圍 </element>
5. 在控制器的作用范圍內輸入 Model 變量
    使用 {{}} 輸出 Model 變量的值

ngController:創建一個控制器對象的實例(即調用 Controller 函數)

語法:

<element ng-controller="控制器名"></element>

使用控制器創建的模型數據可以是如下類型:

1. String、Number、Boolean 基本類型的值
2. 數組類型
3. 使用任意方法創建的對象

ngBind:在當前元素的 innerHTML 上輸出指定的表達式的值

語法:

<element ng-bind="表達式"></element>

此指令的作用與 {{}} 一樣,只是可以防止閃動問題

ngRepear:為 HTML 增加循環功能,循環輸出當前元素

語法:

<element ng-repeat=""></element>

ngIf:為 HTML 增加選擇功能,只有在表達式值為true時,當前元素才添加到 DOM 樹,否則就從 DOM 樹上刪除

語法:

<element ng-if=""></element>

$scope 和 $rootScope 的區別

  1. 每個控制器的實例都對應一個作用范圍對象,即 $scope
  2. 在控制器中聲明的 Model 數據,必須保存在一個作用范圍內
  3. 為了在多個控制器共享數據,可以將 Model 數據保存在一個 “全局作用范圍內” -- \\(rootScope -- 整個 AngularApp 中只能有一個 \$rootScope 對象,而且這個對象是所有\)scope 的父作用域對象
  4. 作用域對象間可以實現繼承,只需要將某個控制器實例聲明在另一個控制器實例的有效zuo'yong'yu'nei'bu'ji'ke
<body>
  <div class="container">
    <div ng-controller="c1">
      <div ng-controller="c2"></div>
    </div>
  </div>
  <script src="angular.js"></script>
  <script>
    angular.module('App', ['ng'])
    .controller('c1', function($scope, $rootScope){
      $scope.ename = '爸爸';
      $rootScope.ename = '爺爺';
    })
    .controller('c2', function($scope){
      $scope.ename = '孫子';
      console.dir($scope);
    })
  </script>
</body>

上述代碼就形成一個簡單的繼承關系。

一些AngularJS相關文章鏈接

AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved