AngularJS指令
ng-app
- 初始化一个 AngularJS 应用程序
- 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
- 在网页加载完毕时会自动引导（自动初始化）应用程序
ng-init
- 初始化应用程序数据。
- 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式
ng-model
- 把元素值（比如输入域的值）绑定到应用程序。
ng-repeat
-
会重复一个 HTML 元素：
-
就是循环数据
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> <div>
ng-controller
- 绑定控制器
ng-options
-
创建选择框（和循环类似）
-
ng-options 选择的值是一个对象： ng-repeat 选择的值是一个字符串，对象的话取值更方便
<!--ng-repeat--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> </select> <h1>你选择的是: {{selectedSite}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "W3CSchool", url : "http://www.w3cschool.cn"}, {site : "Taobao", url : "http://www.taobao.com"} ]; }); </script> <p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p> </body> </html>
<!--ng-options-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>
<p>该实例演示了 ng-options 指令的使用。</p>
</body>
</html>
ng-disabled
- 直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show
- 隐藏或显示一个 HTML 元素。
ng-hide
- 用于设置应用的一部分 不可见 。
- display:none
ng-click
- 定义了一个 AngularJS 单击事件。
AngularJS Scope(作用域)
什么是scope
-
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
-
Scope 是一个对象，有可用的方法和属性。
-
Scope 可应用在视图和控制器上。
如何使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>
Scope 作用范围
-
xxx作用域
-
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
AngularJS 控制器
-
AngularJS 控制器在
div内由 ng-controller 指令定义。 -
AngularJS 控制器 控制 AngularJS 应用程序的数据。
-
AngularJS 控制器是常规的 JavaScript 对象。 由标准的 JavaScript 对象的构造函数 创建。
<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>
感觉就是业务逻辑层 C 然后的话，可以单独抽离出来，就这样，用ng-controller 绑定控制器
AngularJS 过滤器
- AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。
- 过滤器可以使用一个管道字符（|）添加到表达式和指令中 。
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。(orderBy : 'Country') |
| uppercase | 格式化字符串为大写。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script src="/statics/demosource/namesController.js"></script>
</body>
</html>
AngularJS 服务(Service)
-
AngularJS 中的服务是一个函数或对象。
-
AngularJS 中你可以创建自己的服务，或使用内建服务。
-
AngularJS 内建了30 多个服务。
-
$location 服务，它可以返回当前页面的 URL 地址。
-
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
-
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
-
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); });
-
创建自定义服务
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>在获取数组 [255, 251, 200] 值时使用过滤器:</p> <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> <p>过滤器使用服务将10进制转换为16进制。</p> </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); }; }]); app.controller('myCtrl', function($scope) { $scope.counts = [255, 251, 200]; }); </script> </body> </html>
AngularJS Http
-
我们可以使用 AngularJS 内置的 $http 服务直接同外部进行通信。
-
$http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。
<div ng-app="" ng-controller="customersController"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> function customersController($scope,$http) { $http.get("/statics/demosource/Customers_JSON.php") .success(function(response) {$scope.names = response;}); } </script>
AngularJS Select(选择框)
AngularJS 表格
AngularJS 模块
- 模块定义了一个应用程序。
- 模块是应用程序中不同部分的容器。
- 模块是应用控制器的容器。
- 控制器通常属于一个模块。
var app = angular.module("myApp", []);
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
AngularJS Include(包含)
使用 AngularJS, 你可以在 HTML 中包含 HTML 文件。
在未来的HTML中包含 HTML 文件
在 HTML 中，目前还不支持包含 HTML 文件的功能。
W3C 已经建议 http://www.w3.org 在未来的 HTML 中支持包含HTML的功能，格式如下:
网友评论