AngularJs 簡單入門

時間 2019-12-06

原文原文鏈接

1.AngularJs 是什麼以及應用程序組成的三部分html

AngularJS是一個開發動態Web應用的框架。它讓你可使用HTML做爲模板語言而且能夠經過擴展的HTML語法來使應用組件更加清晰和簡潔。它的創新之處在於，經過數據綁定和依賴注入減小了大量代碼，而這些都在瀏覽器端經過JavaScript實現，可以和任何服務器端技術完美結合。它是由m v c 三部分組成的 web

2.AngularJs 應用解析瀏覽器

模板緩存

應用程序邏輯安全

模型數據服務器

服務特性app

依賴注入 XHR 緩存 URL路由瀏覽器抽象服務框架

擴展添加本身特定的應用服務方便的編寫web應用異步

3.模塊調用解析ide

ng-app 指令標記了AngularJs 做用域聲明位置就是其做用域

顯示後的頁面樣式

調用後的頁面樣式

可多重設置樣式

一個模塊多視圖化

添加模塊函數

1.引導AngularJs 應用 ( ng-app的做用 )

1).注入器 --------- 建立程序依賴注入

2).注入器建立根做用域做爲咱們應用模型的範圍

3).AngularJs將會連接根做用域中的DOM，從用ngApp標記的HTML標籤開始，逐步處理

DOM指令和綁定

4).支持同步加載不支持異步加載

禁止寫在window.onload中

2.AngularJs 模板

在AngularJs 中，一個視圖是經過HTML 模板渲染以後的映射不論模型何時發生變化

AngularJs實時更新結合點，隨之更新視圖。

核心概念

數據綁定(Data Binding)

表達式(Expression)

指令(Directive)

視圖(View)和路由(Route)

過濾器(Filter)

表單(Form) 和 AngularJS的表單概念

3.AngularJs控制器 && 程序結構

AngularJS的做用域理論很是重要：一個做用域能夠視做模板、模型和控制器協同工做的

粘接器。AngularJS使用做用域，同時還有模板中的信息，數據模型和控制器。這些能夠

幫助模型和視圖分離，可是他們二者確實是同步的！任何對於模型的更改都會即時反映

在視圖上；任何在視圖上的更改都會被馬上體如今模型中。

程序結構

程序裝載：依賴注入(DI, Dependency injection)

把數據模型(Model)導出給視圖(View)：做用域(Scope)

和服務器通信： $http, $resource

AngularJs其餘功能

動畫：核心概念, ngAnimate API, 以及 AngularJS 1.2中的動畫

安全：受限場景轉義(SCE), 內容安全策略(CSP), $sanitize。

移動開發：觸控(Touch)事件

4.AngularJs單元測試

基於AngularJS的項目被預先配置爲使用JsTestDriver來運行單元測試

測試服務, 在WebStorm中使用Karma

5.迭代器過濾

雙向綁定

控制器

1.AngularJs 指令大全

內置指令

全部的內置指令的前綴都爲ng，不建議自定義指令使用該前綴，以避免衝突。

首先從一些常見的內置指令開始。先列出一些關鍵的內置指令，

順便簡單說說做用域的問題。

ng-model

將頁面元素和當前做用域的屬性進行綁定，這麼解釋彷佛也不太正確。

但先不要管咬文嚼字，用起來卻是易懂。

代碼以下:

源代碼：

ng-init

該指令被調用時會初始化內部做用域。這個指令通常會出如今比較小的應用中，好比給個demo什麼的...

代碼以下:

除了ng-init，咱們還有更多更好的選擇。

ng-app

每一次用AngularJS都離不開這個指令，順便說下$rootScope。

聲明瞭ng-app的元素會成爲$rootScope的起點，而$rootScope是做用域鏈的根，一般聲明在<html>你懂的。

也就是說根下的做用域均可以訪問它。

可是，不建議過分使用$rootScope，省得全局變量滿天飛，效率又差又難管。

下面是一個例子:

代碼以下:

ng-controller ------- 一個控制器

咱們用這個指令在一個DOM元素上裝上controller。代碼以下:

AngularJS 1.3.x中禁止了這種方式，由於這種方式會讓controller滿天飛，分不清層次，全部東西都掛在$rootScope上...

ng-controller必須有一個表達式做爲參數，另外經過$scope來繼承上級$scope的方法和屬性什麼的，$rootScope也包括在內。

下面只是一個簡單的例子，ancestor沒法訪問child的做用域。代碼以下:

做用域的問題遠不止如此，暫且擱下，繼續看看其餘內置指令。

ng-form

起初不明白爲何會有個表單指令，<form>標籤感受也夠用啊。

以表單驗證爲例，在上一篇中有這麼一段代碼:

代碼以下:

也就是表單的狀態爲$invalid時禁用提交按鈕。

若是場景再稍微複雜一點點，好比一個父表單中有多個子表單，子表單中有3個驗證經過時父表單即可以提交。

可是，<form>是不能夠嵌套的。

考慮到這種場景，咱們便使用ng-form指令來解決這一問題。

例如:

代碼以下:

ng-disabled

像這種只要出現則生效的屬性，咱們能夠在AngularJS中經過表達式返回值true/false令其生效。

禁用表單輸入字段。

代碼以下:

ng-readonly

經過表達式返回值true/false將表單輸入字段設爲只讀。

弄個例子，3秒後變成只讀.

代碼以下:

ng-checked

這個是給<input type="checkbox" />用的，好比...

代碼以下:

ng-selected

給<select>裏面的<option>用的，例子:

代碼以下:

ng-show/ng-hide

根據表達式顯示/隱藏HTML元素，注意是隱藏，不是從DOM移除，例如:

代碼以下:

ng-change

不是HTML那套onXXX之類的，而是ng-XXX。

結合ng-model使用，以ng-change爲例:

代碼以下:

<code>{{ calc.result }}</code>

或者好比ng-options

{{}}

其實這個也是一個指令，也許以爲和ng-bind差很少，但頁面渲染略慢時可能會被看到。

另外，{{}}的performance遠不如ng-bind，只是用起來很方便。

ng-bind

ng-bind的行爲和{{}}差很少，只是咱們能夠用這個指令來避免FOUC(Flash Of Unrendered Content)，也就是未渲染致使的閃爍。

ng-cloak

ng-cloak也能夠爲咱們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。

ng-if

若是ng-if中的表達式爲false，則對應的元素整個會從DOM中移除而非隱藏，但審查元素時你能夠看到表達式變成註釋了。

若是相進行隱藏，可使用ng-hide。

代碼以下:

ng-switch

單獨使用沒什麼意思，下面是例子:

代碼以下:

ng-repeat

不明白爲毛不叫iterate，總之是遍歷集合，給每一個元素生成模板實例，每一個實例的做用域中能夠用一些特殊屬性，以下:

代碼以下:

$index

$first

$last

$middle

even

odd

不用特意解釋，這些都很容易看出來是幹什麼的，下面是一個例子:

代碼以下:

ng-href

起初我在一個文本域中弄了個ng-model，而後像這樣<a href="{{myUrl}}">在href裏面寫了進去。

其實這樣href和ng-href看不出什麼區別，因此咱們能夠試試這樣:

代碼以下:

ng-src

大同小異，即表達式生效前不要加載該資源。

代碼以下:

ng-class

用做用域中的對象動態改變類樣式，例如:

代碼以下:

1. AngularJS的簡單入門
2. Vue簡單入門
3. AngularJs入門
4. AngularJS入門demo
5. AngularJS入門
6. angularjs入門
7. AngularJS入門（三）
8. AngularJS入門（一）
9. AngularJS入門（五）
10. (angularjs) 入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• ionic 表單和輸入框 - ionic 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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