AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

特性

AngularJS是一個功能強大的基于JavaScript開發(fā)框架用于創(chuàng)建富互聯(lián)網(wǎng)應用(RIA)。
AngulajJS為開發(fā)者提供的選項(使用JavaScript)在一個干凈的MVC(模型 - 視圖 - 控制器)的方式來編寫客戶端應用程序。
AngularJS寫的應用都是跨瀏覽器兼容。AngularJS使用JavaScript代碼自動處理適應每種瀏覽器。
AngularJS是開源的，完全免費的，并且由數(shù)千名世界各地的開發(fā)者開發(fā)維護。它是根據(jù)Apache許可證2.0版許可發(fā)布。

總體來說，AngularJS是一個用來構(gòu)建大型應用，高性能的Web應用程序的框架，同時使它們易于維護。

核心特征

以下是AngularJS中最重要的核心功能：

數(shù)據(jù)綁定: 模型和視圖組件之間的數(shù)據(jù)自動同步。
適用范圍: 這些對象參考模型。它們充當控制器和視圖之間的膠水。
控制器: 這些Javascript函數(shù)綁定到特定的范圍。
服務: AngularJS配有多個內(nèi)置服務，例如 $http 可作為一個XMLHttpRequest請求。這些單一對象在應用程序只實例化一次。
過濾器: 從一個數(shù)組的條目中選擇一個子集，并返回一個新的數(shù)組。
指令: 指令是關(guān)于DOM元素標記(如元素，屬性，CSS等等)。這些可以被用來創(chuàng)建作為新的，自定義部件的自定義HTML標簽。AngularJS設(shè)有內(nèi)置指令(如：ngBind，ngModel...)
模板:這些符合從控制器和模型信息的呈現(xiàn)的視圖。這些可以是單個文件(如index.html)，或使用“諧音”在一個頁面多個視圖。
路由: 它是切換視圖的概念。
模型視圖: MVC是一個設(shè)計模式將應用劃分為不同的部分(稱為模型，視圖和控制器)，每個都有不同的職責。 AngularJS并沒有傳統(tǒng)意義上的實現(xiàn)MVC，而是更接近于MVVM(模型 - 視圖 - 視圖模型)。 AngularJS團隊將它作為模型視圖。
深層鏈接: 深層鏈接，可以使應用程序狀態(tài)進行編碼在URL中而能夠添加到書簽。應用程序可從URL恢復到相同的狀態(tài)。
依賴注入: AngularJS有一個內(nèi)置的依賴注入子系統(tǒng)，開發(fā)人員通過使應用程序從而更易于開發(fā)，理解和測試。

概念

下圖描述了AngularJS，我們將詳細的后續(xù)章節(jié)討論一些重要的部分。

AngularJS的優(yōu)點

AngularJS提供一個非常干凈和維護的方式來創(chuàng)造單頁的應用。
AngularJS提供數(shù)據(jù)綁定功能在HTML中，從而給用戶提供豐富和響應的體驗
AngularJS代碼可進行單元測試。
AngularJS使用依賴注入和利用關(guān)注點分離。
AngularJS提供了可重用的組件。
使用AngularJS，開發(fā)人員編寫更少的代碼，并獲得更多的功能。
在AngularJS中，視圖都是純HTML頁面，并用JavaScript編寫控制器做業(yè)務處理。

AngularJS應用程序可以在所有主要的瀏覽器和智能手機，包括Android和iOS系統(tǒng)的手機/平板電腦上運行。

AngulaJS的缺點

雖然AngularJS自帶很多優(yōu)點，但我們應該考慮以下幾點(缺點)：

不安全：因為只是JavaScript一種框架，由AngularJS編寫的應用程序是不安全的。服務器端身份驗證和授權(quán)是必須用來保證應用程序的安全。
不可降解：如果應用程序的用戶禁用JavaScript，那最后用戶看到的只是基本頁面，僅此而已。

AngularJS組件

AngularJS框架可分為以下三個主要部分組成：

ng-app : 指令定義和鏈接AngularJS應用程序到HTML。
ng-model : 指令綁定AngularJS應用數(shù)據(jù)的值到HTML輸入控件。
ng-bind : 該指令綁定AngularJS應用程序數(shù)據(jù)到HTML標簽。

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

在本章中，我們將討論如何建立AngularJS庫在Web應用程序開發(fā)中使用。我們還將簡要地學習目錄結(jié)構(gòu)和它的內(nèi)容。

打開鏈接https://angularjs.org/(打不開可能需要翻墻)，會看到有兩個下載AngularJS庫的選項：

View on GitHub- 單擊此按鈕跳到GitHub，并獲得所有最新的腳本。
Download- 或者點擊此按鈕，會看到屏幕如下：

此屏幕給出了使用AngularJS如下多種選擇：
- Downloading and hosting files locally
  - 有兩種不同的選擇：舊版和最新版。舊版是版本低于1.2.x版本，最新是1.3.x版本。
  - 我們也可以使用縮小，非壓縮或壓縮版本。
- CDN access: 也可以使用一個CDN。CDN全世界可訪問，它放在谷歌主機區(qū)域性數(shù)據(jù)中心。這也提供了一個優(yōu)點，即如果訪問者的網(wǎng)頁已經(jīng)從相同的CDN 下載了AngularJS的副本，它不必再重新下載。

在本教程中我們使用的是CDN版本庫

示例

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

<!doctype html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   <title>第一個AngularJS程序</title>
   </head>
   <body ng-app="myapp">
      <div ng-controller="HelloController" >
         <h2>你好 ！第一個{{helloTo.title}}程序示例</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>

下面的章節(jié)詳細描述上面的代碼：

包括AngularJS

我們已經(jīng)包括了AngularJS的JavaScript文件到HTML頁面中，所以我們可以用AngularJS：

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

在其官方網(wǎng)站檢查AngularJS的最新版本。

指向AngularJS應用程序

接下來我們指示HTML的哪一部分包含了AngularJS應用程序。這可以通過ng-app屬性到AngularJS應用程序的根HTML元素?？梢园阉砑拥紿TML元素或body元素，如下所示：

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

視圖

這是視圖的一部分：

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

ng-controller 告訴AngularJS什么控制器使用在視圖中。helloTo.title告訴AngularJS將命名helloTo.title的值寫入到HTML的“model”中。

控制器

這里是控制器部分：

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

此代碼注冊一個名為HelloController的控制器功能，在myapp模塊。我們將學習更多關(guān)于它們在各自的模塊和控制器章節(jié)?？刂破骱瘮?shù)注冊在Angular中，通過angular.module(...).controller(...) 的函數(shù)來調(diào)用。

傳遞給控制器函數(shù)的$scope參數(shù)是模型?？刂破骱瘮?shù)增加了helloTo的 JavaScript對象，并在該對象它增加了一個標題字段。

執(zhí)行

將以上代碼保存為 first-angular.html ，并在瀏覽器中打開它。會看到如下的輸出：

當頁面在瀏覽器中加載，輸出下面的結(jié)果：

HTML文檔加載到瀏覽器，并且由瀏覽器進行評估計算。AngularJS JavaScript文件被加載，Angular 全局對象被創(chuàng)建。接下來，JavaScript一個注冊控制器的函數(shù)被執(zhí)行。
接下來AngularJS通過HTML掃描，以尋找AngularJS應用程序和視圖。當視圖的定位后，它連接視圖到對應的控制器函數(shù)。
接下來，AngularJS執(zhí)行控制器函數(shù)。然后，它呈現(xiàn)通過控制器模型數(shù)據(jù)來自填充的視圖。此時網(wǎng)頁已準備就緒。

AngularJS MVC 架構(gòu)

模型視圖控制器(Model View Controller)或MVC，因為它是俗稱，是一種Web應用程序開發(fā)設(shè)計模式。模型-視圖-控制器模式由以下三部分組成：

Model - 是一個最低水平負責維護數(shù)據(jù)的模式。
View - 這是負責顯示所有或一部分的數(shù)據(jù)到用戶。
Controller - 軟件代碼控制模型和視圖之間的相互作用。

MVC是很流行的，因為它從用戶界面層和支持分離關(guān)注隔離了應用邏輯。在這里，控制器接收應用程序的所有請求，然后使用Model，以準備視圖需要的數(shù)據(jù)。然后視圖使用控制器準備的數(shù)據(jù)，以產(chǎn)生一個最終的像樣響應的數(shù)據(jù)輸出。 MVC的抽象圖形可以表示如下。

模型

模型負責管理應用程序的數(shù)據(jù)。它響應從視圖請求，同時也從控制器響應指令到自我更新。

視圖

在一個特定的格式的呈現(xiàn)數(shù)據(jù)，由控制器決定呈現(xiàn)數(shù)據(jù)觸發(fā)。它們都是基于腳本的模板系統(tǒng)，如JSP，ASP，PHP也很容易使用AJAX技術(shù)來集成。

控制器

控制器負責響應于用戶輸入并執(zhí)行交互數(shù)據(jù)模型對象?？刂破鹘邮蛰斎?，并驗證輸入，然后執(zhí)行修改數(shù)據(jù)模型的業(yè)務操作的狀態(tài)。

AngularJS是一個基于MVC的框架。在接下來的章節(jié)中，讓我們看看AngularJS如何使用MVC方法論。

AngularJS 表達式

表達式用于應用程序綁定數(shù)據(jù)到HTML。表達式編寫在雙括號就如：{{ expression}}. 表達式中的行為方式與 ng-bind 指令相同。AngularJS應用表達式是純JavaScript表達式和輸出正在使用的數(shù)據(jù)。

使用數(shù)字

<p>Expense on Books : {{cost * quantity}} Rs</p>

使用字符串

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

使用對象

<p>Roll No: {{student.rollno}}</p>

使用數(shù)組

<p>Marks(Math): {{marks[3]}}</p>

示例

下面的例子將展示上述所有表達式。

sampleAngularJS.html

<html>
<title>AngularJS 表達式</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'李',lastname:'剛',rollno:101};marks=[82,91,78,77,64]">
   <p>Hello {{student.firstname + " " + student.lastname}}!</p>   
   <p>Expense on Books : {{cost * quantity}} Rs</p>
   <p>Roll No: {{student.rollno}}</p>
   <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</body>
</html>

輸出結(jié)果

在瀏覽器中打開：sampleAngularJS.html，看到結(jié)果如下：

AngularJS 控制器

AngularJS應用主要依賴于控制器來控制數(shù)據(jù)流在應用程序中.控制器使用 ng-controller 指令定義?？刂破魇且粋€包含屬性/屬性和函數(shù)的JavaScript對象。每個控制器接受$scope作為參數(shù)引用到應用程序/模塊，由控制器來控制。

<div ng-app="" ng-controller="studentController">
...
</div>

在這里，我們采用 ng-controller 指令聲明控制器studentController。作為下一個步驟，我們將定義 studentController 如下：

<script>
function studentController($scope) {
   $scope.student = {
      firstName: "李",
      lastName: "四",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
}
</script>

studentController定義一個以 $scope 作為參數(shù)的JavaScript對象。
$scope表示應用程序，它使用studentController對象。
$ scope.student是studentController對象的屬性。
firstName 和 lastName 是 $scope.student 對象的兩個屬性。我們已經(jīng)為它們設(shè)置了缺省值。
fullName是 $scope.student 對象的函數(shù)，其任務是返回合并后的名字。
在fullName函數(shù)中我們得到了 student 對象，然后返回合并后的名字。
我們還可以定義控制器對象在單獨的JS文件，并參考(引入)該文件在HTML頁面。

現(xiàn)在，我們可以在studentController使用ng-model或表達式來獲取學生的屬性。

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

綁定 student.firstName 和 student.lastname 兩個輸入框。
綁定student.fileName()到HTML。
現(xiàn)在，只要輸入名字和姓氏在輸入框中，可以看到全名(fullname)自動更新。

示例

下面的例子將展示控制器的使用。

testAngularJS.html

<html>
<head>
<title>Angular JS Controller</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</head>
<body>
<h2>AngularJS應用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
您輸入的名字是: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
   $scope.student = {
      firstName: "李",
      lastName: "剛",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});
</script>
</body>
</html>

輸出

在瀏覽器中打開：textAngularJS.html ，將看以下的結(jié)果：

AngularJS 過濾器

過濾器用來改變修改的數(shù)據(jù)，并可以在表達式或使用管道字符指令來過濾。以下是常用的過濾器的列表。

S.No.	名稱	描述
1	uppercase	轉(zhuǎn)換文本為大寫文字。
2	lowercase	轉(zhuǎn)換文本為小寫文字。
3	currency	以貨幣格式格式化文本。
4	filter	過濾數(shù)組到根據(jù)提供標準的一個子集。
5	orderby	排序基于提供標準的數(shù)組。

大寫過濾器

添加大寫字母過濾器使用管道符表達式。在這里，我們添加大寫過濾器中的所有字母為大寫，并打印學生的名字。

Enter first name:<input type="text" ng-model="student.

上一篇：AngularJS指令下一篇：AngularJS作用域

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

AngularJS快速入門

AngularJS是什么?

特性