走進AngularJS
前 言 html
AngularJS 經過新的屬性和表達式擴展了 HTML。數組
使用起來很是方便。服務器
| 1. AngularJS的指令與表達式 |
AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。
1.1AngularJS表達式
AngularJS使用 {{}} 綁定表達式。用於將表達式的內容輸出到頁面中。
表達式中能夠是文字、運算符、變量等，也能夠在表達式中進行運算輸出結果。
eg： <p>{{5+5+"Angular"}}</p>
若是Angular.js文件放在頁面下方，在頁面刷新的瞬間會看到{{}}表達式的原樣，
因此可使用ng-bind指令替表明達式。
eg：上式可改寫爲：<p ng-bind="5+5+'Angular'"></p>
1.2AngularJS的經常使用指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
1.2.1 ng-app：聲明AngularJS所管轄的區域。通常寫在body或者html標籤上，原則上一個
頁面只能有一個。
eg：<body ng-app=""></body>
1.2.2 ng-model： 指令把元素值（好比輸入域的值）綁定到應用程序的變量中。
eg：<input type="text" ng-model="name"/>
1.2.3 ng-bind：把應用程序變量中的值，輸出到頁面HTML視圖中。能夠與表達式{{}}互相
替換
eg：<div ng-bind="name"></div>
1.2.4 ng-init：初始化AngularJS應用程序中的變量值。
eg：<body ng-app="" ng-init="name='jredu'">
應用程序初始化時，name變量就賦有初值。
| 2. AngularJS中的MVC與做用域 |
2.1MVC三層架構
Model(模型層)：應用程序中用於處理數據的部分。(包括將數據保存或修改到數據庫、變量、文件中)架構
在AngularJS中，Model特指的是：應用程序中的各類數據。
View(視圖層)：用戶能夠看到的用戶顯示數據的頁面。
Controller(控制器)：控制器是連接View與Model的橋樑。負責從View讀取數據，接
收用戶操做輸入，並將數據發送給Model層。Model層
將數據處
理完畢後，將結果返給Controller，Controller再將結果返回
給View層顯示。
View →（數據） → Controller → （數據）
↗ ↘
用戶 Model（處理數據）
↖ ↙
View ←（結果） ← Controller ← （結果）
2.2建立模塊
2.2.1
建立一個Angular的模塊。即
ng-app=" "所須要綁定的部分。
須要接收兩個參數：
① 模塊名稱，即
ng-app雙引號中須要綁定的名字。<body ng-app="myApp">
② 數組：表示須要注入的模塊名稱，不須要注入其餘模塊可用空數組代替。
>>> Angular將經常使用的功能封裝到angular.js，建立主模塊時直接可使用，無需注入。
>>> 而一些應用較少的功能，須要導入對應的JS文件，而且在[]中注入進這個模塊，才
可以使用。
這就是AngularJS中的【模塊化開發】與【依賴注入】！
var app=angular.module("myApp",[]);
2.2.2
在AngularJS的模塊上，建立一個控制器，須要傳入兩個參數：
① 控制器名稱，即ng-controller須要綁定的名稱。
<div ng-controller="myCtrl">
② 控制器的構造函數，構造函數能夠傳入多個參數。
>>> 若是要在函數中使用系統的內置對象，則必須經過函數的參數傳入，不然不能使用
>>> AngularJS中的內置對象，都用$開頭，例如$scope,$rootScope
2.3AngularJS中的做用域
2.3.1 $scope：
局部做用域，聲明在$scope上的屬性和方法，只能在當前Controller使用
2.3.2 $rootScope：
根做用域。聲明在$rootScope上的屬性和方法，能夠在整個ng-app所
包含的範圍使用。
>>> 若是沒有使用$scope聲明變量，而是直接使用ng-model在HTML標籤中綁定的數
據的做用域爲：
一、若是ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的
$scope上；
二、若是ng-model沒有寫在任何一個Controller中，則這個變量會默認綁定到$rootScope
上
>>> AngularJS中的父子做用域！
一、AngularJS中，子做用域只能訪問父做用域中的變量，而不能修改父做用域中的變量
二、爲了解決上述問題，能夠將父做用域中的變量聲明爲引用數據類型，例如對象等。
這樣能夠在子做用域中，直接修改對象的屬性，
而不須要修改對象自己保存的地址。
| 3. AngularJS中的過濾器 |
過濾器可使用一個管道字符（|）添加到表達式和指令中。
>>> 系統內置的過濾器
currency
將數字格式化爲貨幣格式
filter
從數組項中選擇一個子集
lowercase
格式化字符串爲小寫
orderBy
根據某個表達式排列數組
uppercase
格式化字符串爲大寫
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.classes=[
{name:"張三",age:12,score:78},
{name:"李四",age:12,score:66},
{name:"二麻子",age:12,score:98},
{name:"小劉",age:12,score:54},
{name:"八萬",age:12,score:75},
]
})
/*
* 自定義過濾器
*/
.filter("showHello",function(){
return function(text){
return "Hello AngularJS";
}
})
.filter("reverse",function(){
return function(text){
return text.split("").reverse().join("");
}
})
/*
* 自定義過濾器，同時須要傳遞過濾參數
* 調用過濾器示例：<p>{{12345678901| hideTel:4}}</p>
* 傳入的參數4，將被過濾函數的num形參所接受
*/
.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;
}
})
/*
* 自定義過濾器，實現根據姓名篩選數據的功能。
* >>> 調用示例：
* 請輸入姓名：<input type="text" ng-model="name"/>
* <tr ng-repeat="item in classes | filterByName:name">
*/
.filter("filterByName",function(){
return function(items,search){
if(!search) return items;
var arr=[];
for (var i=0;i<items.length;i++) {
var index=items[i].name.indexOf(search);
if (index>-1) {
arr.push(items[i]);
}
}
return arr;
}
})
| 4. AngularJS中的service & factory & provider |
4.1service
4.1.1 內置服務：app
>>> 要使用服務必需要把服務名經過controller的構造函數的參數注入進來！！！
>>> 系統內置的服務，贊成使用$開頭，服務中的屬性和方法統一使用$$開頭！！
自定義服務時，須要注意與系統服務的寫法區分開
$location：返回當前頁面的URL地址信息，是一個對象；
$http：
向服務器發送請求，相似於JQuery中的Ajax；
$timeout：
至關於 setTimeout();
$interval：
至關於setInterval();
angular.module("app",[])
.controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){
$scope.local = $location.$$host;
$timeout(function(){
$scope.time="我是兩秒鐘以後出現！";
},2000);
$scope.num=0;
$interval(function(){
$scope.num++;
},1000);
$scope.gongneng=hexafy.gongneng;
$scope.num1=hexafy.func(10);
})
4.1.2 自定義服務
第一個參數是服務名；
第二個參數是自定義服務的構造函數。咱們自定義的服務，本質是一個對象。
對象的屬性，能夠在構造函數中，使用this.屬性 表示；
對象的方法，能夠在構造函數中，使用this.方法 表示；
.service("hexafy",function(){
this.gongneng="將十進制數轉化爲16進制";
this.func=function(num){
return num.toString(16);
}
})
/*使用過濾器實現一樣功能*/
.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})
/* 在過濾器中調用服務!!
* 也必須在聲明過濾器的外層構造函數中，注入服務名稱！！
*/
.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})
4.2factory
factory服務在使用上與service服務沒有太大差距。
惟一的不一樣點，是聲明服務時，factory服務是在函數中先聲明好一個對象，而後使用return將對象返回。
而service服務，則是直接在函數中使用this將屬性和方法添加到對象上面。
angular.module("app",[])
.controller("ctrl",function($scope,hexafy){
$scope.gongneng=hexafy.gongneng;
$scope.num1=hexafy.func(11);
})
.factory("hexafy",function(){
var obj={
gongneng:"將十進制數轉化爲16進制",
func:function(num){
return num.toString(16);
}
}
return obj;
})
4.3provider
4.3.1 在AngularJS中，service服務、factory服務都是基於provider服務實現的；
4.3.2 在定義provider時，可使用this.$get 方法，接收一個函數，函數裏面採用與factory
徹底相同的寫法！！！
.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"333"
}
return obj;
}
})
因此說，若是服務須要在配置階段，也就是在聲明controller以前執行的話，則可使
用provider；不然通常使用service或factory
angular.module("app",[])
/*.config()表示配置階段，在聲明controller以前執行。能夠用於聲明一些在controller中
* 須要使用的全局變量、方法、服務等
*/
.config(function($provide){
// 在配置階段聲明provider服務，須要在config中注入系統對象$provide
$provide.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"444"
}
return obj;
}
});
})
.controller("ctrl",function($scope,hexafy){
$scope.gongneng=hexafy.gongneng;
})
| 5. AngularJS中的select和表格 |
5.1使用數組做爲數據源
5.1.1 item表示數組中的每一項；
5.1.2 循環出的option中，value的值，默認爲item；
5.1.3 option顯示出的內容(<option></option>標籤中的文字)是由item.site for 決定的；
<select ng-model="site2" ng-options="item.site for item in sites"></select> <!-- 這種寫法，默認生成的option效果以下： <option value="http://www.google.com">Google</option> -->
5.2以對象做爲數據源
5.2.1 (key,value) 第一項表示對象的鍵，第二組表示對象的值；
5.2.2 option的value，永遠都是對象的值！
5.2.3 option顯示出的內容(<option></option>標籤中的文字)是由... for 決定的!也就是說for
前面是什麼，option標籤中就是什麼。
<select ng-model="site3" ng-options="key for (key,value) in sitess"> <!-- <option value="value">key/value(取決for前面的內容)</option> --> </select>
<tr ng-repeat="item in options"> <!-- ng-repeat遍歷是，$index 表示當前的行索引！ --> <td>{{$index + 1}}</td> <td>{{item}}</td> </tr>
ng-options 和 ng-repeat
一、 ng-options使用時，是將指令添加在select上；
ng-repeat使用時，是將指令添加在option上；
二、 ng-options使用時，必須同步給select標籤綁定ng-model；
ng-repeat使用時，不必定綁定ng-model；
三、ng-options使用時，只須要關心for前面的部分，即option標籤中顯示的文字，
而option的value會自動分配，不禁咱們決定
(使用數組做爲數據源時，value就是
數組的每一項；使用對象做爲數據源時，value永遠都是對象的值)
ng-repeat使用時，除了要制定option標籤中要顯示的文字，還須要手動指定value
中的內容，若是沒有指定則默認沒有value
| 6. AngularJS中的表單和輸入驗證 |
6.1表單中，經常使用的驗證操做
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息
6.2驗證
6.2.1 驗證時，必須給form和input，設置name屬性。
給form和input設置name後，會自動將表單信息綁定到$scope做用域中。因此，能夠
直接使用formName.inputName.$驗證操做，
獲得驗證結果。
例如：
formName.inputName.$dirty="true";表示表單被填寫過；
formName.inputName.$invalid="true";表示表單輸入內容不合法；
formName.inputName.$error.required="true";表示設置了必填可是沒有輸入；
注意：
$error支持的驗證：required/minlength/maxlength/patten/email/number/date/url等
6.2.2 爲了不AngularJS的驗證與HTML5的表單驗證衝突！！好比說typr="email" required
等,H5也會進行驗證，那麼能夠給form添加
"novalidate"屬性，
禁用HTML5的驗證內容
eg：
<div class="container" style="width: 500px;margin: 50px auto;padding: 0px;"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title text-center"> 用戶註冊 </div> </div> <div class="panel-body"> <form class="form-horizontal" name="form" novalidate> <div class="row"> <div class="col-xs-3">用戶名</div> <div class="col-xs-9"> <input type="text"class="form-control"name="name" ng-model="user.name" ng-minlength="6" ng-maxlength="12"/> <p style="margin: 0px; color: red;" ng-show="form.name.$invalid && form.name.$dirty"> <span ng-show="form.name.$error.required">用戶名必須填寫</span> <span ng-show="form.name.$error.minlength">用戶名長度最小爲6位</span> <span ng-show="form.name.$error.maxlength">用戶名長度最大爲16位</span> </p> </div> </div> <div class="row"> <div class="col-xs-3">郵箱：</div> <div class="col-xs-9"> <input type="email" class="form-control" name="email" ng-model="user.email" required/> <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty"> <span ng-show="form.email.$error.required">郵箱必須填寫</span> <span ng-show="form.email.$error.email">郵箱不合法</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >密碼：</div> <div class="col-xs-9"> <input type="password"class="form-control"name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$" required/> <p style="margin: 0px; color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty"> <span ng-show="form.pwd.$error.pattern">密碼只能由6-18位的字母、數字、下劃線</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >確認密碼：</div> <div class="col-xs-9"> <input type="password"class="form-control" name="repwd" ng-model="user.repwd" required/> <p style="margin: 0px; color: red;" ng-show="user.pwd!=user.repwd && form.repwd.$dirty"> 兩次密碼輸入不一致 </p> </div> </div> <div class="row"> <div class="col-xs-5"> <input type="submit" value="註冊" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd"/> </div> <div class="col-xs-5"> <input type="reset" value="重置" class="btn btn-warning"/> </div> </div> </form> </div> </div> </div>
相關文章
- 1. 走進AngularJs(八) ng的路由機制
- 2. 走進AngularJs(七) 過濾器（filter）
- 3. AngularJS學習筆記（一）走近AngularJS
- 4. 走進AngularJs(九)表單及表單驗證
- 5. 走進 UnitTest for Xamarin.Forms 走進 UITest for Xamarin.Forms
- 6. 走進 UITest for Xamarin.Forms 走進 Prism for Xamarin.Forms
- 7. 從△走進OO,走進策略模式
- 8. 【angularjs】angularjs如何進行頁面傳參
- 9. 走進JBoss (1)
- 10. 走進MVVM
- 更多相關文章...
- • MySQL BIT、BINARY、VARBINARY、BLOB（二進制類型） - MySQL教程
- • traceroute命令進行路由跟蹤 - TCP/IP教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 走進AngularJs(八) ng的路由機制
- 2. 走進AngularJs(七) 過濾器（filter）
- 3. AngularJS學習筆記（一）走近AngularJS
- 4. 走進AngularJs(九)表單及表單驗證
- 5. 走進 UnitTest for Xamarin.Forms 走進 UITest for Xamarin.Forms
- 6. 走進 UITest for Xamarin.Forms 走進 Prism for Xamarin.Forms
- 7. 從△走進OO,走進策略模式
- 8. 【angularjs】angularjs如何進行頁面傳參
- 9. 走進JBoss (1)
- 10. 走進MVVM