AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
2.如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。
3.AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
4.ng-app=" "这样写时,{{}}内容会与ng-model绑定;
ng-app="myapp"||ng-app="myapp" ng-controller="mycontroller"
则在<script>里定义控制器,才能绑定数据
5.ng-init 用于初始化绑定的数据
ng-band 将init的变量绑定起来 ng-band作为属性,放在标签内的。没有ng-band的是放在innerHTML;
6,ng指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
详细的指令集:http://www.runoob.com/angularjs/angularjs-reference.html7.使用 .directive 函数来添加自定义的指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<runoob-directive></runoob-directive>//自定义指令标签
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {//通过哦directive扩展自定义指令
return {
template : "<h1>自定义指令!</h1>"//定义的标签内容
};
});
</script>
</body>
</body>
</html>
8.指令可以使用四种方式调用:
元素名/属性/类名/注释;
元素名如上所示;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<div runoob-directive></div>//类名调用方法
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</body>
</html>
类名:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="runoob-directive"></div>//类名。注意: 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!-- directive: runoob-directive -->//注释。注意: 我们需要在该实例添加 replace 属性, 否则评论是不可见的。
//注意: 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
9.设置restrict类型,可以限制调用方式。
-
E
只限元素名使用 -
A
只限属性使用 -
C
只限类名使用 -
M
只限注释使用
restrict 默认值为 EA
, 即可以通过元素名和属性名来调用指令。
11.ng-model 可以为绑定数据提供四种不同的状态:
Valid: false (如果输入的值是合法的则为 true)。
Dirty: true (如果值改变则为 true)。
Touched: true(如果通过触屏点击则为 true)。
error:
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
12.ng-model提供css类
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
注意:ng-invalid: ng-model能提供的状态,并且添加 了required的属性。这个必不可少
13.scope作用域
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
AngularJS 应用组成如下:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
14.controller
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
<div ng-app="myApp" ng-controller="personCtrl">
名: <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>
以上添加属性和方法。
15.大型应用程序,将控制器放在外部文件。
如a.js
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
在红字处引用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}||{{ fullName()}}||如果只是 ng-app=" ",{{firstName+lastName}}也可以与输入绑定
</div>
<script src="personController.js"></script>
</body>
</html>
16.Service
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址。
注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$location) {
$scope.myUrl =$location.absUrl();
});
在body中绑定myUrl.即可
17.$http
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。
AngularJS 会一直监控应用,处理事件变化。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {//传入$http
$http.get("welcome.htm").then(function (response) {//welcome.htm是服务器,地址错误的话,最后得不到正确的data.
$scope.myWelcome = response.data;//请求得到的数据放在response中
});
});
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")//服务器地址
.success(function(response) {$scope.names = response.records;});
});
</script>
18.AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
19.AngularJS $interval 服务对应了 JS window.setInterval 函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
每隔几秒,func一次。
20.在控制器内自定义服务
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {//myFunc只是个函数名
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
21.在过滤器中使用刚才自定义的函数
<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
21.ng-options select下拉框
< select ng-model= "selectedName" ng-options= "x for x in names" >//蓝色部分名字随便取
< /select >
< /div >
< script >
app.controller( 'myCtrl', function($scope) {
$scope. names = [ "Google", "Runoob", "Taobao"];
});
< option ng-repeat= "x in names" > {{x}} < /option >
< /select >
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});//是个数组,但是得到的结果,[你选择的是:只有对应site的site或者url]
</script>
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
只要names={[Name:'',Contry:''],[...]}
使用css修饰也非常简单:
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {//奇数行
background-color: #f1f1f1;
}
table tr:nth-child(even) {//偶数行
background-color: #ffffff;
}
</style>
给表格行添加行号:
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
ng-if
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
结果如下:
Alfreds Futterkiste | Germany |
Ana Trujillo Emparedados y helados | Mexico |
Antonio Moreno Taquería | Mexico |
Around the Horn | UK |
B's Beverages | UK |
Berglunds snabbköp | Sweden |
25.ng-disable
ng-show
ng-hide
通过值为true还是false来决定效果
ng-click=function();
26.
对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中,AngularJS 在 <head> 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。
<body>
..........//其他程序
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
27.全局API
angular.lowercase() 使用anglular.function() 调用
28.路由
To be cotinue....