JavaScript 框架------------AngularJS（上）
一、簡單了解一下AngularJS
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發布的，可通過 script 標簽添加到網頁中：
<script src="Js/angular.js" type="text/javascript" charset="utf-8"
二、AngularJS中的一些指令
1、指令與表達式
（1）原生JS綁定input與div
html部分
<input type="text" name="" id="input" value="" />
<div id="div"></div>
script部分
<script type="text/javascript">
var inputs = document.getElementById("input")
var div = document.getElementById("div")
input.onchange
（2）AngularJS綁定input與div
<input type="text" ng-model="name"/>
<div ng-bind="name"></div>
<div >{{name + "123"}}</div>
（3）表達式
AngularJS 用雙大括號綁定表達式：{{ expression }}。
用於將表達式的內容輸出到頁面中
表達式可以是文字，運算符，變量等，也可以在表達式中進行運算輸出結果
<p>{{ 5+5 +"Angular"}}</p>
如果Angular.Js文件放在頁面的下方，在頁面刷新的瞬間會看到{{}}表達式的原樣。所以可以使用ng-bind指令代替表達式
<p ng-bind="5+5 +‘Angular‘"></p>
2、ng-app
聲明AngularJS所管轄的區域，一般寫在body或者html標簽上，原則上一個頁面上只能有一個。
<body ng-app=""></body>
3、ng-model
指令把元素值（比如輸入域的值）綁定到應用程序。
<input type="text" ng-model="name"/>
4、 ng-bind
把應用程序變量中的值，輸出到頁面HTML視圖中。可以與表達式{{}}互相替換。
<div ng-bind="name"></div>
5、 ng-init
初始化AngularJS應用中的變量值
<body ng-app="" ng-init="name=‘jredu‘">
應用程序初始化時，name變量就賦有初值
6、MVC三層架構
（1）model（模型層）：應用程序中，應用處理數據的部分。（包括將數據保存或修改到數據庫、變量、文件中 ）。
在AngularJS中，Model特指的是：應用程序中的各種數據。
View（視圖層）：用戶可以看到的用戶顯示數據的頁面
Controller（控制器）：控制器是鏈接View與Model的橋梁。負責從View讀取數據，接受用戶的操作輸入；並將數據發送給Model層。Model層對數據處理完畢之後，將結果返回給Controller，Controller再將結果返回給View顯示
View → （數據） → Controller → （數據）
用戶 Model（處理數據）
View ← （數據） ← Controller ← （數據）
創建一個AngularJS的模塊，即ng-app=""所需要綁定的部分
①模塊名稱，即ng-app雙引號中需要綁定的名字。<body ng-app="myApp">
②數組：表示需要註入的模塊名稱，不需要註入其他模塊可用空數組代替
>>>Angular將常用的功能封裝到angular.js中，創建主模塊是直接可以使用，無需註入
>>>而一些應用較少的功能，需要導入對用的Js文件，並且在[]中註入進這個模塊，才能夠使用
這是AngularJS中的【模塊化開發】與【依賴註入】！
在AngularJS的模塊上，創建一個控制器，需要傳遞兩個參數
①控制器名稱，即ng-controller需要綁定的 名稱
<div ng-controller="myCtrl">
②控制器的構造函數，構造函數可以傳入多個參數
>>>如果要在函數中使用系統的內置對象，賊必須通過函數的參數傳入，否則不能使用
>>AngularJS中的內置對象，都用$開頭，例如$scope,$rootScope
7、AngularJS的作用域
①$scope： 局部作用域，聲明在$scope上的屬性和方法。只能在當前Controller使用
②$rootScope：根作用域。聲明在$rootScope上的屬性和方法，可以在整個ng-app所包含的範圍使用
>>>如果沒有$scope聲明變量，而是直接使用ng-model在HTML標簽中綁定的數據的作用域為：
a、如果使用ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的$scope上；
b、如果使用ng-model沒有寫在任何一個某個Controller中，則這個變量會默認綁定到$rootScope上；
>>>AngularJS中的父子作用域
a、ANgularJS中，子作用域 只能訪問父作用域中的變量，而不能修改父作用域的變量
b、為了解決上述問題可以將父作用域中的變量聲明為引用數據類型，例如對象等，這樣可以在子作用域中，直接修改對象的屬性，而不需要修改對象本身保存的地址
這是HTML部分
<div ng-controller="myCtrl1">
<div ng-bind="name +‘————myCtrl的name‘"></div>
<div ng-bind="age +‘————myCtrl的age‘"></div>
<input type="text" ng-model="text"/>
<input type="text" ng-model="obj.text"/>
<mark ng-bind="text+‘————myctrl的text‘"></mark>
</div>
<div ng-bind="name + ‘這是myctrl外的div‘"></div>
<mark ng-bind="text+‘————全局的text‘"></mark>
<mark ng-bind="obj.text+‘————全局的的text‘"></mark>
這是AngularJS
var app = angular.module("myApp",[]); app.controller("myCtrl1",function($rootScope){ $rootScope.text = "aa"; $rootScope.obj ={ text:‘bb‘, } });
第一input之後跟myctrl時時改變，全局的兩個都不會跟著改變
第二input之後跟第二個全局的text時時改變，第一個全局的text不會跟著改變，myctrl也不會跟著改變
8、AngularJS中的過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
>>>系統內置的過濾器，
currency 將數字格式化給貨幣格式
<p>{{123456|currency}}</p>
lowercase 格式化字符串為小寫。
<p>{{"aBcDeF"|lowercase}}</p>
uppercase 格式化字符串為大寫。
<p>{{"aBcDeF"|uppercase}}</p>
orderBy 根據某個表達式排列數組。
html部分的代碼
<table border="1" width="400px">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
<tr ng-repeat="item in classes | orderBy : ‘score‘ ">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.score}}</td>
</tr>
</table>
這是AngularJS
angular.module("app",[]).controller("ctrl",function($scope){
$scope.classes = [
{name:"張三",age:12,score:44},
{name:"張誒",age:15,score:80},
{name:"劉青",age:11,score:23},
{name:"55",age:15,score:99},
{name:"小劉",age:13,score:54},
]
})
filter 從數組項中選擇一個子集。
自定義過濾器
html部分的代碼
<p>{{"我顯示不出來了"|shouHello}}</p>
angular.module("app",[])
.controller("ctrl",function($scope){})
.filter("shouHello",function(){
return function(text){
return "Hello Angular";
}
})
這是AngularJS ↑
只能定義過濾器，同時需要傳遞過濾參數
調用實例
html部分的代碼
<p>{{17862890990|hideTel:5}}</p>
傳入的參數5，將被過濾函數的num形參所接受
這是AngularJS
.filter("hideTel",function(){
return function(text,num){
num = num>0&&num<11?num:3;
text = text+"";
var newText = text.substring(0,11-num)+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})
自定義過濾器，實現根據姓名篩選數據功能
調例演示
html部分的代碼
請輸入姓名：<input type="name" ng-model="search"/>
<table border="1" width="400px">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
<tr ng-repeat="item in classes | orderBy : ‘score‘ |filterByName:name ">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.score}}</td>
</tr>
</table>
這是AngularJS
angular.module("app",[])
.controller("ctrl",function($scope){})
.filter("filterByName",function(){
return function(item,search){
if(!search)return item;
var arr = [];
for(var i=0;i<item.length;i++){
var index = item[i].name.indexOf(search);
if(index>1){
arr.push(item[i]);
}
}
return arr;
}
})
這次51就先寫到這裏了，剩下的等下次在接著寫。
JavaScript 框架------------AngularJS（上）