一.基本指令
1、ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围;
tips:一个页面里创建多个 ng-app 手动加载即可:
var app1 = angular.module("app1", []); var app2 = angular.module("app2", []); angular.bootstrap(document.getElementById("app2"), ['app2']);
2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3、ng-model="变量"指令把元素值（比如输入域的值）绑定到应用程序；
验证用户输入:
<form ng-app="" name="myForm">Email: <input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
ng-model 指令根据表单域的状态添加/移除以下类：
- ng-touched //点击
- ng-untouched
- ng-valid //验证通过
- ng-invalid
- ng-dirty //修改
- ng-pristine
4、ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
5、ng-repeat 指令会重复一个 HTML 元素：
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"><p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
6.自定义指令:
<body ng-app="myApp"><r-directive></r-directive> //作为元素名使用,还可以通过类名,属性,注释
<script>
var app = angular.module("myApp", []);
app.directive("rDirective", function() {
return { template : "<h1>自定义指令!</h1>" };
});
</script>
</body>
限制使用:
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
二.AngularJS支持的数据
数字,字符串,数组,对象
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
tips:
| HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。 |
三.AngularJS scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
<div ng-app="myApp" ng-controller="myCtrl"><h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes"; });
</script>
<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>
四.AngularJS 控制器
<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><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>
五.AngularJS 过滤器:过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
<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>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [ {name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
六.AngularJS服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用
$location.absUrl():返回当前页面的 URL 地址
$http: 服务向服务器发送请求，应用响应服务器传送过来的数据
$http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);
// 简单的 GET 请求，可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });
$timeout(function(){},2000) 服务对应了 JS window.setTimeout 函数
$interval(function(){},1000)服务对应了 JS window.setInterval 函数。
创建自定义服务:
<div ng-app="myApp" ng-controller="myCtrl"><p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<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>