1. 程式人生 > >AngularJS入門學習筆記一

AngularJS入門學習筆記一

rect directive 技術分享 attr 兩個 ava 內容 module 大括號

首先聲明:

本博客源自於學習:跟我學AngularJs:AngularJs入門及第一個實例。通過學習,我自己的一些學習筆記。

1.AngularJS的一些基本特性

(1)使用雙大括號{{}}語法進行數據綁定;

(2)使用DOM控制結構來實現叠代或者隱藏DOM片段;

(3)支持表單和表單的驗證;

(4)能將邏輯代碼關聯到相關的DOM元素上;

(5)能將HTML分組成可重用的組件。

他是MVC結構的,有雙向數據綁定的特點。下圖是雙向數據綁定的圖解:

技術分享

使用DOM作為輸入,而不是字符串,是AngularJS區別於其它的框架的最大原因。使用DOM允許你擴展指令詞匯並且可以創建你自己的指令,甚至開發可重用的組件。---這句話我還沒有理解。之後理解了,我再解釋。

HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導,即,directive(指令)。所有的指令都負責針對view來設置數據綁定。

MVC:

技術分享

以上只是一些雜亂的特性。當我深入學習了之後,會更好的分門別類的列舉和寫出具體的特性。

入門實例一:

<p><input type="text" ng-model = "inputValue">請輸入內容</p>

<h1>您輸入的內容為:{{inputValue}}</h1>

angular通過 ng-model將input輸入框輸入的內容,綁定到一個叫inputValue的model上。

然後再用雙大括號將這個model綁定到h1上面。

入門實例二:

代碼如下:

<!DOCTYPE html>  
<html lang="en" ng-app="myApp">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入門</title>  
    <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>  
</head>  
<
body ng-controller = "myController"> <p><input type="text" ng-model = "inputValue">請輸入內容</p> <h1>您輸入的內容為:{{inputValue}}</h1> </body> <script type="text/javascript"> var app = angular.module(myApp, []);//獲得整個angularJS影響的html元素 //控制器 app.controller(myController, function($scope) { $scope.inputValue = "PeterTest"; }); </script> </html>

註意以上代碼標黃的部分。這兩個分別批明了AngularJS有效的範圍和Controller層有效的範圍。

先通過 var app = angular.module(‘myApp‘, []); 拿到整個angularJS影響的app對象。

再通過app.controller拿到myController,

然後讓input的數據與註入到我們控制器函數的作用域($scope)相關聯。

從而一打開頁面,就自動填充好了 PeterTest。

    $scope.inputValue = "PeterTest"; 

angularJS實戰

來自於學習慕課網 http://www.imooc.com/video/2678 angularJS實戰的一些筆記。

最終實現一個bookstore應用

AngularJS入門學習筆記一