百度百科對Angular JS的簡介
AngularJS? 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。
我的學(xué)習(xí)
寫個小程序看看Angular JS的效果
下載Angular Js文件，跟其他js引用方式一樣，能用url，也能下載都本地直接加載。
下載或者引用url可為：
http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js
當(dāng)然，現(xiàn)在已經(jīng)到2.0+版本了，可以下載最新版本去玩。
我是下載放到本地，跟html同一目錄。
目錄結(jié)構(gòu)：
Angular JS表達式使用雙大括號{{}}，如{{name}}。必須聲明ng-app才能顯示angular js的效果。
程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="name='Lily'">
?? <p>名字 : <input type="text" ng-model="name"></p>
?? <h1>Hello {{name}}</h1>
?? <span ng-bind="name" style="background-color:red"></span>
?? <h2>1+2={{1+2}}</h2>
?? <h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
?? <h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
?? <h2>1+''+2={{1+''+2}}</h2>
?? <h2>''+1+2={{''+1+2}}</h2>
?? <h2>''+1+2+3={{''+1+2+3}}</h2>
?? <h2>1+2+''={{1+2+''}}</h2>
</div>
<div>
?? <p>未申明ng-app/名字 : <input type="text" ng-model="name"></p>
?? <h1>Hello {{name}}</h1>
</div></body>
</html>
思考：為什么不給ng-app取個名字呢
如果ng-app指定一個名字，則該模塊下必須要有ng-controller 且javascript要定義該controller,否則表達式不起作用。
如上述代碼，如果 ng-app=""改為 ng-app="myApp"，則無angular js的效果，如下圖：
正確打開方式，應(yīng)該為：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body><div ng-app="myApp" ng-init="name='Lily'" ng-controller="myControl">
?? <p>名字 : <input type="text" ng-model="name"></p>
?? <h1>Hello {{name}}</h1>
?? <span ng-bind="name" style="background-color:red"></span>
?? <h2>1+2={{1+2}}</h2>
?? <h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
?? <h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
?? <h2>1+''+2={{1+''+2}}</h2>
?? <h2>''+1+2={{''+1+2}}</h2>
?? <h2>''+1+2+3={{''+1+2+3}}</h2>
?? <h2>1+2+''={{1+2+''}}</h2>
</div>
<script>
?var myApp = angular.module('myApp',[]);
?myApp.controller('myControl',function($scope){
??$scope.name = 'Huang';?
?});
</script></body>
</html>
給ng-model初始化值
上述代碼包括了兩種初始化值的方式：
1) ng-init="name='Lily'"
2) 使用了controller為name賦值，初始化為Huang
最后頁面顯示的Lily，所以可以認為ng-init的賦值優(yōu)先級比較高。
思考：同一個ng-app可以調(diào)用多個control嗎？
當(dāng)然可以，同一個ng-app可以調(diào)用多個controller，目前我只知道在不同html元素調(diào)用不同controller，不知道同一個元素是否能調(diào)用多個controller。
比如一個ng-app中有兩個子div，每個div都分別調(diào)用不同的controller。
<div ng-app="myApps" >???????????????????????????????????????????????????????????????????????????????????????????????????? <div ng-controller="myCtrl">名: <input type="text" ng-model="firstName" ><br></div>
<div ng-controller="myCtrl1">姓: <input type="text" ng-model="lastName"><br></div>?? </div>javascript:?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
??? $scope.firstName= "Zor";
}).controller('myCtrl1', function($scope) {
??? $scope.lastName= "OY";
});
每個control只能對調(diào)用它的元素里的ng-model做操作。上述，如果myCtrl中對lastName賦值是賦不了；同樣myCtrl1中對firstName賦值也是賦不了的。
思考：一個頁面是否能加載多個ng-app
我覺得行，那么如何加載？試過就簡單的寫兩個ng-app，第二個ng-app里的表達式顯示出來仍然是表達式。所以這個問題就留給下次再說。
