AngularJS快速入手1-1

AngularJS簡介

目前最新版本1.3.0

放棄了ie8

引入了單向數(shù)據(jù)綁定

刪掉了一些過時(shí)的api (據(jù)說是為了AngularJS2.0做準(zhǔn)備)

AngularJS-實(shí)例演示4大核心特性

image.png

1 .MVC

Paste_Image.png
<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- ng-controller我們的控制器  ng-controller賦值成HelloAngular -->
        <div ng-controller="HelloAngular">
            <!-- p標(biāo)簽充當(dāng)了視圖的功能 -->
            <!-- {{greeting.text}}取值這個(gè)地方就是充當(dāng)數(shù)據(jù)模型 -->
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <!-- 導(dǎo)入了angular-1.3.0.js文件 -->
    <script src="js/angular-1.3.0.js"></script>
    <script type="text/javascript">
        //HelloAngular這個(gè)函數(shù)充當(dāng)了控制器
        function HelloAngular($scope) {
            $scope.greeting = {
                text: 'Hello'
            };
        }
    </script>
</html>

運(yùn)行效果

Paste_Image.png

2. 模塊化

html

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Module.js"></script>
</html>

javascript

//這里調(diào)用了angular.module方法
var myModule = angular.module("HelloAngular", []);

myModule.controller("helloAngular", ['$scope',
    function HelloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

運(yùn)行效果

Paste_Image.png

在HelloAngular_Module.js文件中調(diào)用了angular.module方法，然后給他一個(gè)字符串“HelloAngular”，后面還傳了方括號空數(shù)組，通過字面量看出這是在定義一個(gè)模塊，var myModule是一個(gè)模塊，定義完模塊后在模塊上面調(diào)用了一個(gè)controller方法很顯然這是告訴angular要生成一個(gè)控制器"helloAngular"是控制器的名稱，后面方括號里面第一個(gè)參數(shù)'$scope'是告訴angularjs幫我注入'$scope'。

Paste_Image.png

AngularJS概念有Module，有Directive，有Filter，其實(shí)一點(diǎn)要抓住一個(gè)點(diǎn)，一切都是從模塊開始的，在AngularJS開發(fā)中首先想到的是模塊也就是Module，其他所有的東西其實(shí)都是掛在Module下面的，因?yàn)橹挥邪涯K創(chuàng)建后你才能在模塊上去調(diào)用Service,controller等方法，所以首先想到的是模塊，

3. 指令系統(tǒng)

html

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

javascript

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

運(yùn)行效果

Paste_Image.png

看看body表情內(nèi)的<hello></hello>標(biāo)簽，很顯然瀏覽器是不認(rèn)識這個(gè)標(biāo)簽的，不認(rèn)識他在默認(rèn)情況下瀏覽器會(huì)忽略他，Angular js就會(huì)想一下怎樣能讓瀏覽器認(rèn)識這個(gè)標(biāo)簽?zāi)兀@就需要借助Angular js的Directive這個(gè)特性，

一切都是從模塊開始的，所以我們需要?jiǎng)?chuàng)建模塊

var myModule = angular.module("MyModule", []);


var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

模塊創(chuàng)建好再調(diào)用模塊上面directive方法，這個(gè)方法也有兩個(gè)參數(shù)"hello"是指令的名稱，也就是對應(yīng)的標(biāo)簽名，后面是一個(gè)函數(shù)，這個(gè)函數(shù)就是生成標(biāo)簽的， template: '<div>Hi everyone!</div>',

Paste_Image.png

最終hello是被替換成模板template，

這個(gè)就是angular的指令
我們可以自定義一大堆的指令然后做一些封裝我們在調(diào)用的時(shí)候會(huì)非常方便，當(dāng)然指令不只是定義標(biāo)簽這么簡單，還有很多其他功能，比如說

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

我們在html里面ng-app="MyModule",這個(gè)實(shí)際上就是一個(gè)指令，這里復(fù)制ng-app等于"MyModule"

"MyModule"在var myModule = angular.module("MyModule", []);js里，很顯然是告訴Angular js要去使用我們這個(gè)模塊，ng-app意思和C語言里的main或者是java里面的main方法。

Angular js檢測到ng-app這個(gè)指令的時(shí)候就知道我從ng-app這個(gè)指令開始內(nèi)部的標(biāo)簽內(nèi)容就歸我Angular js來管了，也就是說Angular js從ng-app這個(gè)地方啟動(dòng)的，可以想象既然是main函數(shù)main方法，一個(gè)應(yīng)用里面顯然只能有一個(gè)，所以在任意一個(gè)單頁Angular js應(yīng)用里面ng-app這個(gè)指令只能出現(xiàn)一次。

Paste_Image.png

4. 雙向數(shù)據(jù)綁定

Angular js 是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，其他的前端框架都沒有實(shí)現(xiàn)這樣一個(gè)特性，目前大多數(shù)前端框架都是實(shí)現(xiàn)單向數(shù)據(jù)綁定。

來看看單向數(shù)據(jù)綁定的流程

Paste_Image.png

首先是我們把模板寫好，再加上數(shù)據(jù)，數(shù)據(jù)可能是從后臺服務(wù)端讀進(jìn)來的，模板和數(shù)據(jù)結(jié)合在一起，通過數(shù)據(jù)綁定機(jī)制生成一段html標(biāo)簽然后把這段標(biāo)簽插入到文檔流里面，這是經(jīng)典單向數(shù)據(jù)綁定的處理流程。

html一旦生成完以后就沒法再變了，當(dāng)有新的數(shù)據(jù)的時(shí)候我們只能重新再來一遍。

Angular js認(rèn)為單向數(shù)據(jù)綁定的過程實(shí)在是不怎么優(yōu)雅，所以他覺得我應(yīng)該實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

Paste_Image.png

他的核心想法是這樣的，

視圖，數(shù)據(jù)是對應(yīng)的當(dāng)視圖上的內(nèi)容發(fā)生變化的時(shí)候他希望數(shù)據(jù)模型里面立刻發(fā)生變化，當(dāng)數(shù)據(jù)模型發(fā)生變化的時(shí)候視圖自己自動(dòng)會(huì)去更新，很顯然這里需要 借助一個(gè)事件機(jī)制。

在html里有什么樣的視圖會(huì)發(fā)生變化？表單。在很多的頁面中會(huì)出現(xiàn)很多的表單，表單是來收集用戶的輸入的，這些數(shù)據(jù)是非常容易變化的，在數(shù)據(jù)發(fā)生變化就會(huì)通過Angular js機(jī)制同步到數(shù)據(jù)模型上面。

html

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>{{greeting.text}},AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

運(yùn)行效果

Paste_Image.png

上面代碼實(shí)現(xiàn)效果在input輸入框輸入任何東西底下的顯示框都會(huì)立刻顯示，

這是什么原理呢

<input ng-model="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>

首先有一個(gè)輸入框
然后綁定了一個(gè)ng-model="greeting.text",
這個(gè)是時(shí)候底下有個(gè)p標(biāo)簽有個(gè)雙花括號來獲取greeting.text的值。
雙花括號是什么意思呢？
在Angular js里面是取值的意思，是一個(gè)取值表達(dá)式。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容