What is AngularJS?
AngularJS是一個功能強大和結構 JavaScript框架 這是比較容易在一個Web應用程序來實現，並允許組織大, client heavy applications into something manageable. It is an open source web application framework, 自由和世界各地使用的成千上萬的開發.
AngularJS是基於 MVC (模型 - 視圖 - 控制) 模式，旨在打造豐富的互聯網web應用程序，並通過使用MVC架構簡化應用開發和測試以及分開你的豐富的互聯網應用到車型, 視圖和控制器. AngularJS創建單頁的應用, 這意味著在瀏覽器會應用程序的大小的加載單頁無論.
AngularJS 由開發 Miskohevery 和 亞當Abron,維護 谷歌; 他們和麻省理工學院內部使用. 它是根據Apache許可證版本授權 2.0. 它最初發布 2009 而當前穩定版本是 1.3.5 (Decemeber 1, 2014).
AngularJS: 在本節, 讓我們總結一下AngularJS的基本知識.
- 是一個庫，用JavaScript編寫
- 是不是一個平台或語言
- 是不是一個插件或擴展
- 它擴展HTML, CSS和JavaScript
- 是不是像jQuery的DOM操作庫
- 不需要jQuery的或繼承
- 不需要單向數據綁定和樣板代碼
為什麼AngularJS?
- 它是基於MVC設計模式這在客戶端提供了許多方法來構建Web應用程序.
- 它有助於建立客戶端應用程序用更少的代碼和更多的靈活性.
- 它通過使用指令的功能可擴展HTML, 屬性, 表達式和模板HTML.
- AngularJS是一個MVC架構，簡化應用程序的開發和測試，很容易為客戶端.
- 這是良好的開發單個頁面的應用和前端的基於Web的應用程序.
- 它具有靈活的架構和通用的特點. 所以用它為大型應用項目和小的小應用程序.
Features:
AngularJS (基於JavaScript框架) 通過使用一些功能，如創建一個更快的方法應用:
- 這是一種客戶端技術，提供強大的東西來創建動態Web應用程序.
- 它是一個基於MVC的框架, 允許用戶建立正確的架構和維護的Web應用程序.
- 它是在世界各地使用的數千名開發一個開源Web應用框架.
- 它允許使用可重複使用的組件和代碼重用.
- 它使創建用戶界面 (UI) 容易通過數據綁定過程.
- 聲明HTML方法.
- 它有助於將您的應用程序成較小的部分.
體系結構圖和組件: 讓我們來看看在AngularJS框架及其組件的架構圖.
Figure: AngularJS架構
AngularJS包含 模塊 充當一個容器為不同類型的應用，例如控制器, 意見, 指令, 工廠等. 模塊指定如何申請應自舉. 使用模塊, 過程會更容易理解; 您可以重複使用代碼, 端到端測試使用模塊覆蓋配置等. 它是用於創建地點, 登記與檢索角模塊.
配置 組件只接受來自模塊供應商, 意味著每個服務, 工廠等都是供應商的情況下，. 它提供了所有這些情況路線.
“ 路線 用於鏈接URL的控制器和視圖.
“ 瀏覽 用於添加用戶事件的複雜處理. It uses NG-視圖指令，由當前的路由模板的主要佈局的補充航線的 (的index.html) 文件.
“ 調節器 控制AngularJS應用這是常規的JavaScript對象的數據. AngularJS定義 NG-控制器指令，通過使用控制器功能創造了新的控制器對象. 而新的兒童可到控制器的功能 $範圍如該圖所示.
“ 意見 發送元素或屬性的 指令 它告訴AngularJS的HTML編譯器來連接特定行為的DOM元素及其子元素.
“ 廠 被用來定義AngularJS服務和服務需要被實例化時，它被稱為.
入門AngularJS:
AngularJS是容易下手. 它提供的功能，如雙向數據綁定，這使得自定義標籤, 該屬性封裝內置的指令，使HTML的擴展功能更容易.
- 它分佈JavaScript文件，並且可以通過包括AngularJS文庫如下所示用於在網頁中:
[碼]
<腳本的src =”HTTP:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</腳本>
[/碼]
您還可以檢查AngularJS的最新版本在其官方網站.
- 您可以創建AngularJS應用程序，如下圖所示:
[碼]
<htmlng，應用程序></HTML>
要么
<HTML NG-應用程序=“MyApp的”></HTML>
要么
<divng，應用程序></DIV>
要么
<DIV NG-應用程序=“MyApp的”></DIV>
[/碼]
“ NG-應用 屬性是AngularJS應用程序的根元素.
- 控制器可以被定義為如下所示:
[碼]
<DIV NG-應用程序=“”NG控制器=“myController的”>
<輸入類型=“文本”NG-模式=“消息”>
</DIV>
[/碼]
“ NG-控制器指令定義了應用程序控制器. “ NG-模型指令的HTML控件的值綁定，如輸入字段, 選擇等的應用數據.
- 通過實施控制器 $範圍 對象請按照如下步驟:
[碼]
functionMyController($範圍){
$scope.message =“請輸入您的姓名”;
}
[/碼]
“ $範圍 對象是指調用創建控制器應用模型 信息 在作用域屬性.
核心概念:在本節中，我們將有關於核心組件和它們背後的概念的詳細討論.
- 模塊
- 指令
- 範圍
- 控制器
- 表達式
- 模板
- 路由
- 過濾器
模塊:
模塊將應用程序劃分成小的可重用的組件提供了很好的機制，並指定一個應用程序應該自舉. 模塊指定您如何定義的應用程序的組件，使應用更具可讀性. 每個模塊由唯一名稱標識.
指令:
指令是AngularJS的其用於創建定制的HTML標籤和可放置在元素名稱芯積木, 屬性和註釋. 指令可以作為其構建複雜的小部件分層功能HTML指令.
範圍:
範圍是一個對象，一個視圖綁定到控制器. 在MVC結構, 它指的是應用程序模型. 作用域可以看表情和傳播活動，因為他們被安排在分層結構.
控制器:
控制器是定義你的應用程序的實際行為JavaScript對象. 它負責通過設定模特屬性和功能 $範圍 目的. 控制器不存儲狀態，並且不與遠程服務交互.
表達式:
表達式括在大括號“{{ }}“表示綁定其引薦給我們的應用模式. 表達式不支持控制流語句. AngularJS將輸出在那裡它們被使用的數據.
模板:
模板僅僅是舊的純HTML，不包括任何角度的具體文件模板. 它配備了一套實時模板通過使用模板引擎來創建控制器等. 模板用於顯示從模型和控制器的信息.
路由:
它是用於連接URL的控制器和視圖. 路由照顧服務供應商稱為 $路線提供商 處理路由是的提供者 $路線 服務. 換一種說法, 它裝載子模板取決於頁的URL.
過濾器:
過濾器使用表達式從模型變換或修改數據. 我們可以添加使用管道符表達式或指令. AngularJS有一些常用的過濾器，如:
- 貨幣: 轉換成數字貨幣格式.
- 大寫: 將字符串轉換為大寫.
- 小寫: 將字符串轉換為小寫.
- 過濾: 選擇從數組項的子集.
- 排序依據: 訂單陣列的表達式，如按字母順序排列的字符串和數字的號碼.
例:
讓我們創建一個使用AngularJS庫中的一個簡單的例子，創建一個HTML文件 FirstExample.html 如下所示:
清單1: 簡單AngularJS應用
[碼]
<!DOCTYPE HTML>
<HTML>
<頭>
<腳本的src = “HTTP://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></腳本>
</頭>
<體>
<DIV NG-應用=”” NG-控制器=”myController的”>
輸入名字: <輸入類型=”text” NG-模型=”userName的”><BR>
<BR>
全名: {{userName的}}
</DIV>
<腳本>
functionMyController($範圍) {
$scope.userName = “大衛·”;
}
</腳本>
</體>
</HTML>
[/碼]
如上所述, 我們已經包含的JavaScript文件中的HTML網頁，其中在定義的AngularJS <頭> tag. 接下來的部分包含了正在使用的定義AngularJS應用程序 NG-應用 屬性中的運行 <DIV> tag.
“ NG-控制器 指令定義了應用程序控制器. 該AngularJS將調用“myController的” 同 $範圍 對象，創建屬性名為“用戶名” 在範圍.
使用定義的型號名稱 NG-模型在指令定義 <輸入> tag. 它的輸入域綁定到控制器屬性“用戶名”.
打開 FirstExample.html 在瀏覽器中看到的結果顯示在下面的屏幕截圖:
Figure: AngularJS例
結論: 我們已經討論AnguarJS的各個方面. 我們得出結論之前，, 讓我們總結一下要點. AngularJS (也稱為角)是一個開源的Web應用框架. 它提供了客戶端的MVC架構以及所需的豐富的互聯網應用程序常用的組件. AngularJS如下聲明性編程模型的構建用戶界面. 該框架的主要目標是使開發和測試更加簡單.
希望你已經得到了AngularJS框架有清醒的認識. 享受閱讀 www.techalpine.com
