Angularjs 基礎(chǔ)入門
針對(duì)于這個(gè)其實(shí)我不太清楚應(yīng)該針對(duì)于哪些人或者說不知道從哪開始寫，所以這里我就按照一種簡(jiǎn)單的思路開始寫
1.angular.element
2.angular.Bootstrap
我們非常清楚ng-app應(yīng)用到節(jié)點(diǎn)，angular自動(dòng)幫你初始化，初始化的過程分為如下幾個(gè)步驟
1.angular會(huì)在document load的時(shí)候自動(dòng)初始化，首先會(huì)找到ng-app這個(gè)指令指定的節(jié)點(diǎn)。
2.加載與module相關(guān)的指令
3.創(chuàng)建與應(yīng)用相關(guān)的injector(依賴管理器)
4.以制定的ng-app為根節(jié)點(diǎn)，開始對(duì)Dom進(jìn)行compile
現(xiàn)在我們自己初始化一下，做一個(gè)等同于ng-app這個(gè)指令的東西。angular.element這個(gè)就是包裝,包裝原始DOM元素或HTML字符串作為jQuery元素。angular.Bootstrap可以手動(dòng)初始化腳本，我們用這兩個(gè)來初始化這個(gè)腳本
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap-manual</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
這里是ng-app外面的~~{{1+2}}
<div id="widuu" >這里是ng-app里面~~~ {{1+2}}</div>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.getElementById("widuu")));
});
</script>
</body>
</html>
2.compiler
我們清楚的看到angularjs的官方文檔上邊都是駝峰式命名法，譬如ngApp、ngModule、ngBind等等這些都是相關(guān)的指令，其中html compiler就是允許我們自己定義元素 屬性和標(biāo)簽，Angular將這些附加行為稱為directives。
官方文檔對(duì)compiler的解釋是這樣的
Compiler
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
Compile: traverse the DOM and collect all of the directives. The result is a linking function.
Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
Some directives such as ng-repeat clone DOM elements once for each item in a collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
compiler是angular的一個(gè)(service),負(fù)責(zé)遍歷dom節(jié)點(diǎn)和查找屬性，編譯分為兩個(gè)階段：
1.編譯：遍歷節(jié)點(diǎn)和收集所有的directives，返回一個(gè)鏈接函數(shù)linking function
2.鏈接：將directives綁定到一個(gè)作用域（scope）中，創(chuàng)建一個(gè)實(shí)況視圖（live view）。在scope中的任何改變，將會(huì)在視圖中得到體現(xiàn)（更新視圖）；任何用戶對(duì)模版的活動(dòng)（改變），將會(huì)體現(xiàn)在scope model中（雙向綁定）。這使得scope model能夠反映正確的值。
一些directives，諸如ng-repeat，會(huì)為每一個(gè)在集合（collection）中的元素復(fù)制一次特定的元素（組合）。編譯和鏈接兩個(gè)階段，使性能得以提升。因?yàn)榭寺〕鰜淼哪０?template)只需要編譯一次，然后為每一個(gè)集合中的元素進(jìn)行一次鏈接（類似模版緩存）。
3.一步一步創(chuàng)建自己的directive
1.了解directive
首先了解，directive是按照駝峰式命名法，如ngModule,當(dāng)編譯的時(shí)候匹配是這樣的，舉例如下：
<input ng-model="foo">
<input data-ng:model="foo">
directive可以使用x-或者data-作為前綴，可以使用:, -, 或者 _等分隔符來轉(zhuǎn)換駝峰式命名方法，如下所示：
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
一般我們使用ng-bind對(duì)應(yīng)ngBind，這種格式
$compile可以匹配directive基于元素名稱,屬性,類名以及注釋
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
在編譯過程中，compiler通過$interpolate服務(wù)匹配文本與屬性中的嵌入表達(dá)式（如{{something}}）。這些表達(dá)式將會(huì)注冊(cè)為watches，并且作為digest cycle的一部分，一同更新。下面是一個(gè)簡(jiǎn)單的interpolation：
<img src="img/{{username}}.jpg"/>Hello {{username}}!
2.編譯的步驟
HTML“編譯”的三個(gè)步驟：
1. 首先，通過瀏覽器的標(biāo)準(zhǔn)API，將HTML轉(zhuǎn)換為DOM對(duì)象。這是很重要的一步。因?yàn)槟０姹仨毷强山馕觯ǚ弦?guī)范）的HTML。這里可以跟大多數(shù)的模版系統(tǒng)做對(duì)比，它們一般是基于字符串的，而不是基于DOM元素的。
2. 對(duì)DOM的編譯（compilation）是通過調(diào)用$comple()方法完成的。這個(gè)方法遍歷DOM，對(duì)directive進(jìn)行匹配。如果匹配成功，那么它將與對(duì)應(yīng)的DOM一起，加入到directive列表中。只要所有與指定DOM關(guān)聯(lián)的directive被識(shí)別出來，他們將按照優(yōu)先級(jí)排序，并按照這個(gè)順序執(zhí)行他們的compile() 函數(shù)。directive的編譯函數(shù)（compile function），擁有一個(gè)修改DOM結(jié)構(gòu)的機(jī)會(huì)，并負(fù)責(zé)產(chǎn)生link() function的解析。$compile()方法返回一個(gè)組合的linking function，是所有directive自身的compile function返回的linking function的集合。
3. 通過上一步返回的linking function，將模版與scope連接起來。這反過來會(huì)調(diào)用directive自身的linking function，允許它們?cè)谠厣献?cè)一些監(jiān)聽器（listener），以及與scope一起建立一些watches。這樣得出的結(jié)果，是在scope與DOM之間的一個(gè)雙向、即時(shí)的綁定。scope發(fā)生改變時(shí)，DOM會(huì)得到對(duì)應(yīng)的響應(yīng)。
var $compile = ...; // injected into your code
var scope = ...;
var html = '<div ng-bind='exp'></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
linkFn(scope);
ngAttr屬性綁定
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
今天就寫到這里，明天開始寫創(chuàng)建directive ~~~控制篇幅不要太長(zhǎng)，這章主要概念的多~~~
相關(guān)文章
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了詳解Angular 4 表單快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進(jìn)行了簡(jiǎn)單的介紹，而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要為大家介紹了angular中radio單選的問題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能,結(jié)合實(shí)例形式分析了AngularJS自定義過濾器的定義及數(shù)組過濾相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
這篇文章主要介紹了Angular ng-repeat對(duì)象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了Angular 常用指令實(shí)例總結(jié)整理的相關(guān)資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下2016-12-12
這篇文章總結(jié)了一些Angular的應(yīng)用技巧,都是在實(shí)際項(xiàng)目中應(yīng)用了的,感覺對(duì)于使用Angular還是有一些幫助的，有需要的小伙伴可以參考下2016-09-09
angular同一頁面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了angular同一頁面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11