angularjs簡介
angularjs按照官方的說法，是對(duì)html的擴(kuò)展，那么問題就來了
如何知道是一個(gè)angularjs程序？
ng-app 指令，可以在html的標(biāo)簽中指定 ng-app = “scae” ， 該指令有作用域，和所加的區(qū)域一致如何進(jìn)行邏輯&數(shù)據(jù)控制？
ng-controller 指令，是一個(gè)標(biāo)準(zhǔn)的javascript對(duì)象，需要進(jìn)行初始化來個(gè)具體例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl"> // 聲明angularjs app，& 初始化
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
angularjs各種指令
各種原生指令，溫故知新
- ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。
- ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
- ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序
- ng-model 指令用于綁定應(yīng)用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值。
- Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。是一個(gè)對(duì)象，有可用的方法和屬性，可應(yīng)用在視圖和控制器上。
- ng-controller AngularJS 控制器 控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對(duì)象。 - 過濾器，過濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。
| 指令 | 用途 |
|---|---|
| currency | 格式化數(shù)字為貨幣格式 |
| filter | 從數(shù)組項(xiàng)中選擇一個(gè)子集 |
| lowercase | 格式化字符串為小寫 |
| orderBy | 根據(jù)某個(gè)表達(dá)式排列數(shù)組 |
| uppercase | 格式化字符串為大寫 |
- service 服務(wù)，創(chuàng)建自定義服務(wù)，可以寫出很多通用的腳本
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
