如何使用angularJs
1、AngularJS入門之指令與表達式
javascript
AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。
【AngularJS經常使用指令】
一、ng-app:聲明Angular所管轄的區域。通常寫在body或html上，原則上一個頁面只有一個；
<body ng-app=""></body>
二、ng-model:把元素值（好比輸入域的值）綁定到應用程序的變量中。
<input type="text" ng-model="name"/>
三、ng-bind:把應用程序變量中的數據綁定到 HTML視圖中。可用表達式` `替代；
<div ng-bind="name"></div>
<div>`name`</div>
四、ng-init:初始化 AngularJS應用程序中的變量。
<body ng-app="" ng-init="name=123">
五、表達式： {{}} 綁定表達式，能夠包含文字、運算符和變量。但表達式在網頁加載瞬間會看到{{}},因此能夠用ng-bind=""替代
{{ 5 +""+ 5 + ',Angular'}}
【基本概念】
一、指令：AngularJS中，經過擴展HTML的屬性提供功能。因此，ng-開頭的新屬性，被咱們成爲指令css
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>AngularJS入門</title>
</head><body ng-app="" ng-init="name=123">
<input type="text" id="input" ng-model="name"/>
<div id="div" ng-bind="name+',Angular'">`name`</div>
<input type="text" id="input2" ng-model="name"/>
<p>個人第一個表達式： {{ 5 +""+ 5 + ',Angular'}}</p>
</body>
<script src="libs/jquery-3.1.1.js"></script>
<script src="libs/angular.js"></script>
<script type="text/javascript">// var input1 = document.getElementById("input");// var div = document.getElementById("div");// // input1.onkeyup = function(){// div.innerHTML = input1.value;// }// $("#input").keyup(function(){// $("#div").html($("input").val());// });
</script>
</html>
2、AngularJS中的MVC與做用域html
[MVC三層架構]
一、Model(模型)：應用程序中用於處理數據的部分。(保存或修改數據到數據庫、變量等)。AngularJS中的Model特指的是：數據
View(視圖)：用戶看到的用於顯示數據的頁面；
Controller(控制器)：應用程序中處理用戶交互的部分。負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。
二、工做原理： 用戶從視圖層發出請求，controller接收到請求後轉發給對應的model處理，model處理完成後返回結果給controller，並在view層反饋給用戶。java
主要用於CRUD類應用，不適合遊戲開發和DOM操做jquery
建立一個Angular模塊，即ng-app所綁定的部分,需傳遞兩個參數：
① 模塊名稱，即ng-app所須要綁定的名稱。ng-app="myApp"
② 數組：須要注入的模塊名稱，不須要可爲空。
web
var app = angular.module("myApp",[]);
在Angular模塊上，建立一個控制器Controller，須要傳遞兩個參數
① Controller名稱，即ng-controller需綁定的名稱。ng-controller="myCtrl"
② Controller的構造函數：構造函數能夠傳入多個參數，包括$scope/$rootScope以及各類系統內置對象；
[AngularJS中的做用域]
① $scope:局部做用域，聲明在$scope上的屬性和方法，只能在當前Controller中使用；
② $rootScope:根做用域，聲明在$rootScope上的屬性和方法，能夠在ng-app所包含的任何區域使用(不管是否同一Controller，或是否在Controller包含範圍中)。
>>> 若沒有使用$scope聲明變量，而直接在html中使用ng-model綁定的變量做用域爲：
1.若是ng-model在某個ng-controller中，則此變量會默認綁定到當前Controller的$scope上；
2.若是ng-model沒有在任何一個ng-controller鍾，則此變量將綁定在$rootScope上；
數據庫
app.controller("myCtrl",function($scope,$rootScope){
//$scope.name = "name1";
$rootScope.age = 14;
$scope.classes = {
name:"H51701",
num:"33"
};
});
app.controller("myCtrl1",function(){
});
上圖說明：json
3、Angular過濾器
bootstrap
AngularJS中，過濾器可使用一個管道字符（|）添加到表達式和指令中。
>>> 系統內置過濾器：
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。數組
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>
<form class="form-horizontal">
</form>
<div class="form-group">
<label>請輸入篩選信息：</label>
<input type="text" ng-model="search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
</thead>
<tr ng-repeat="item in classes| filter:search | orderBy:'score'">
<td>`item`.`name`</td>
<td>`item`.`age`</td>
<td>`item`.`score`</td>
</tr>
</table>
<p>{{"123456"|reverse}}</p>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.classes = [
{name:"張二",age:"12",score:"88"},
{name:"張三",age:"12",score:"88"},
{name:"李四",age:"15",score:"78"},
{name:"李五",age:"15",score:"78"},
{name:"王×××子",age:"18",score:"98"},
{name:"王二麻子",age:"18",score:"98"}
];
}) /*
* 自定義過濾器 */
.filter('reverse', function() {
return function(text) { if(!angular.isString(text)){ return "您輸入的內容不是字符串";
}else{ return text.split("").reverse().join("");
}
}
})
</script></html>
4、Angular服務Service
【服務Service】
一、內置服務：
>>>使用內置服務必須在controlller中經過函數的參數注入進來！！！！
$location ：返回當前頁面的 URL 地址；
$http： 服務器請求數據，相似於AJax；
$timeout ：對應了 JS window.setTimeout 函數。
$interval ：對應了 JS window.setInterval 函數。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app" ng-controller="ctrl">
<pre >`local`</pre>
<p ng-bind="myHeader"></p>
<p ng-bind="num"></p>
<p >`gongneng`</p>
<p>將255轉爲16進制：`hexafy`</p>
<p>{{123|filt}}</p>
<p>{{123|filt1}}</p>
</body>
<script type="text/javascript" src="libs/angular.js" ></script>
<script type="text/javascript">
angular.module("app",[])
.controller("ctrl",function ($scope,$location,$timeout,$interval,$hexafy) {
$scope.local=$location.absUrl();
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
$scope.num=0;
$interval(function () {
$scope.num++;
},1000);
$scope.gongneng=$hexafy.$$gongneng;
$scope.hexafy=$hexafy.myFunc(255);
}) /*自定義服務*/
.service('$hexafy', function() { this.$$gongneng = "將轉入的數字，轉爲16進制"; this.myFunc = function (x) { return x.toString(16);
}
})
.filter("filt",function(){ return function(x){ return x.toString(16);
}
}) /*在過濾器中，調用自定義服務*/
.filter("filt1",function($hexafy){ return function(x){ return $hexafy.myFunc(x);
}
})
</script></html>
【自定義服務factory】
factory 是一個函數用於返回值,一般咱們使用 factory 函數來計算或返回值。(factory使用上，與service差距不大)
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>
[功能]<br/>
`gongneng` </p>
<p>
255轉成16進製爲：`num` </p>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.config()
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
.factory('hexafy',function(){ var obj = {
gongneng : "將轉入的數字，轉爲16進制",
myFunc:function(x){ return x.toString(16);
}
}; return obj;
})
</script></html>
【自定義服務provide】
一、在AngularJS中，Service，factory都是基於provider實現的。
二、在provider中，經過$get()方法提供了factory的寫法，用於返回 value/service/factory。；
三、provider是三種自定義服務中，惟一能夠寫進config配置階段的一種。
若是服務，必需要在配置階段執行，那麼必須使用provider。不然，通常使用Service或factory
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>
[功能]<br/>
`gongneng` </p>
<p>
255轉成16進製爲：`num` </p>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[]) /*在配置階段聲明procide服務！*/
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
/*定義一個provider服務*/
.provider('hexafy',function(){// this.gongneng = "將轉入的數字，轉爲16進制";
this.$get = function(){ var obj = {
gongneng : "將轉入的數字，轉爲16進制",
myFunc : function(x){ return x.toString(16);
}
} return obj;
}
})
</script></html>
5、Angular中的$http
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
</head>
<body ng-app="app" ng-controller="ctrl">
<!--<pre>
`data`
</pre>-->
<div class="container" style="margin-top: 50px;">
<div class="panel panel-primary" >
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">H5-1701班級信息表</div>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>愛好</th>
<th>語文成績</th>
<th>數學成績</th>
<th>總分</th>
</tr>
</thead>
<tr ng-repeat="item in data | orderBy:'score.chinese + score.math'">
<td ng-bind="item.name"></td>
<td ng-bind="item.age"></td>
<td ng-bind="item.hobby">
<!--<span ng-repeat="a in item.hobby">`a`</span>-->
</td>
<td ng-bind="item.score.chinese"></td>
<td ng-bind="item.score.math"></td>
<td ng-bind="item.score.chinese + item.score.math"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.controller("ctrl",function($scope,$http){
$http.post('h51701.json',{/*傳遞的參數對象*/})
.then(function(res){
$scope.data = res.data;//data 從返回的信息中，取出須要的數據。爲JSON對象(數組) });
})
</script></html>
6、Angular中的select
使用數組做爲數據源。
其中，x表示數組的每一項。
默認會將x直接綁定到option的value中。
而option顯示的內容，有前面的x for... 決定
<select ng-model="name" ng-options="x.site for x in sites"> </select>
使用對象做爲數據源.
其中，(x,y)表示鍵值對，x爲鍵，y爲值。
默認會將值y綁定到option的value中.
而option顯示的內容，有前面的x for... 決定
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
<style type="text/css">
*{
margin: 10px;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="name" ng-options="x for (x, y) in sites">
</select>
<div class="alert alert-info" style="width: 300px;">
您選擇的是：`name` </div>
<table class="table table-bordered">
<tr>
<th>序號</th>
<th>姓名</th>
</tr>
<tr ng-repeat="item in options">
<td>{{$index +1}}</td><!--$index 表示遍歷的索引，從0開始-->
<td>`item`</td>
</tr>
</table>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.options = ["張三","李四","王二麻子","傑小瑞"];
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
})
</script></html>
7、Angular中的DOM與事件
ng-disabled="true/false" 當傳入true時，控件禁用。傳入false是，啓用；
ng-show 默認隱藏 傳入true時顯示；
ng-hide 默認顯示 傳入true是隱藏；
ng-click定義了AngularJS中的點擊事件。
只能觸發綁定在Angular做用域中的屬性與方法。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
<style type="text/css">
*{
margin: 10px;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<input type="checkbox" ng-model="mySwitch">是否贊成我是帥哥！ </label>
<button ng-disabled="!mySwitch" class="btn btn-primary">點我!</button>
<p></p>
<label>
<input type="checkbox" ng-model="mySwitch1">是否顯示？ </label>
<button ng-show="mySwitch1" class="btn btn-primary">點我!</button>
<p></p>
<label>
<input type="checkbox" ng-model="mySwitch2">是否隱藏？ </label>
<button ng-hide="mySwitch2" class="btn btn-primary">點我!</button>
<p></p>
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
<button ng-click="func()">說一下感想吧！</button>
</body>
<script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.controller("ctrl",function($scope,$rootScope){
$scope.count = 10;
$scope.func = function(){
alert("我彈了一個窗！");
}
})
</script></html>
8、Angular表單和輸入驗證
[AngularJS中的表單驗證]
一、表單中，經常使用的驗證操做：
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息
二、驗證時，需給表單，及須要驗證的input，設置name屬性：
給form及input設置name後，會將form表單信息，默認綁定到$scope做用域中。故，可使用 formName.inputName.$驗證操做 獲得驗證結果：
例如：formName.inputName.$dirty = "true" 表單被填寫過
formName.inputName.$invalid = "true" 表單輸入不合法
formName.inputName.$error.required = "true" 表單必填但未填
$error支持的驗證有：required/minlength/maxlength/pattern/email/number/date/url等。。。
三、爲避免衝突，例如使用type="email"時，H5也會進行驗證操做。若是隻想使用AngularJS驗證，可使用<form novalidate></form>屬性，禁用H5自帶驗證功能；
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
<style type="text/css">
.row{
margin-bottom: 10px;
}
.row .col-xs-5{
text-align: center;
}
.suc{
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.suc:focus{
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.err{
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.err:focus{
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="container" style="width: 40%; margin: 50px auto; padding: 0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
用戶註冊 </div>
</div>
<div class="panel-body">
<form action="" method="get" class="form-horizontal" name="myForm" novalidate>
<div class="row" >
<div class="col-xs-3">
用戶名： </div>
<div class="col-xs-9">
<input type="text" class="form-control" ng-model="user.name" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{suc:myForm.name.$valid && myForm.name.$dirty,err:myForm.name.$invalid && myForm.name.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.name.$invalid && myForm.name.$dirty">
<!--當有填寫記錄且不合法時，p顯示-->
<span ng-show="myForm.name.$error.required">用戶名必須填寫！！！</span>
<span ng-show="myForm.name.$error.minlength">用戶名最少包含4個字符！！！</span>
<span ng-show="myForm.name.$error.maxlength">用戶名最多包含10個字符！！！</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">
郵箱： </div>
<div class="col-xs-9">
<input type="email" class="form-control" ng-model="user.mail" name="mail" required ng-class="{suc:myForm.mail.$valid && myForm.mail.$dirty,err:myForm.mail.$invalid && myForm.mail.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.mail.$invalid && myForm.mail.$dirty">
<!--當有填寫記錄且不合法時，p顯示-->
<span ng-show="myForm.mail.$error.required">郵箱必須填寫！！！</span>
<span ng-show="myForm.mail.$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" ng-model="user.pwd" name="pwd" pattern="^\w{6,18}$" required ng-class="{suc:myForm.pwd.$valid && myForm.pwd.$dirty,err:myForm.pwd.$invalid && myForm.pwd.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.pwd.$invalid && myForm.pwd.$dirty">
<!--當有填寫記錄且不合法時，p顯示-->
<span ng-show="myForm.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" ng-model="rePwd" name="rePwd" required ng-class="{suc:myForm.rePwd.$dirty&&rePwd==user.pwd,err:myForm.rePwd.$dirty&&rePwd!=user.pwd}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.rePwd.$dirty && rePwd!=user.pwd">
<!--當有填寫記錄且不合法時，p顯示-->
兩次密碼輸入不一致！！！ </p>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<input type="submit" value="註冊" class="btn btn-success" ng-disabled="myForm.$invalid || rePwd!=user.pwd" />
</div>
<div class="col-xs-5">
<input type="button" value="重置" class="btn btn-warning" ng-click="resets()" />
</div>
</div>
</form>
</div>
</div>
<pre>
`user`.`pwd` </pre>
</div>
</body>
<script src="libs/angular.js"></script>
<script>
$scope.resets = function(){
$scope.user = angular.copy($scope.initUser);
}
$scope.resets();
})
</script></html>
- 1. 如何使用angularJs
- 2. 如何在AngularJS中使用插件
- 3. 【angularjs】angularjs如何進行頁面傳參
- 4. AngularJS（2、如何用AngularJS創建前端代碼框架）
- 5. AngularJS，爲何咱們要使用$apply()?在何時使用？
- 6. AngularJS Controller 使用
- 7. AngularJS的使用
- 8. 如何使用angularjs實現ajax異步請求
- 9. [譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？
- 10. CodeMix使用教程6：在Myeclipse中如何管理AngularJs
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何僞造ARP響應？ - TCP/IP教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 如何使用angularJs
- 2. 如何在AngularJS中使用插件
- 3. 【angularjs】angularjs如何進行頁面傳參
- 4. AngularJS（2、如何用AngularJS創建前端代碼框架）
- 5. AngularJS，爲何咱們要使用$apply()?在何時使用？
- 6. AngularJS Controller 使用
- 7. AngularJS的使用
- 8. 如何使用angularjs實現ajax異步請求
- 9. [譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？
- 10. CodeMix使用教程6：在Myeclipse中如何管理AngularJs