1.AngularJS指令
所有写在HTML标签上的 ng-xxx都是AngularJS的指令
如：ng-app、ng-model、ng-controller等等
除了AngularJS本身的一系列指令，也可以自定义指令：
<my-directive></my-directive>1
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>自定义指令</h1>"
};
});123456| 环境 | 命名、使用规则 |
|---|---|
| html | my-directive |
| js | myDirective【小驼峰】 |
2.model 模块
对view的抽象，类似数据模型
使用指令：ng-model 或 ng-app
<div ng-app="myModel_app"> <div ng-model="myModel_model"></div></div>123
var app = angular.module('myModel_app', []);var model = angular.module('myModel_model', []);12在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
3.controller 控制器
控制器是一个对象，用于定义 AngularJS 应用程序的属性、方法。
使用指令： ng-controller
// html例子<div ng-app="myModel" ng-controller="myCtrl">12
//js例子var app = angular.module('myModel', []);
app.controller('myCtrl', function($scope, $rootScope, $http, myService ) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});1234563.1 $scope 参数
每个angular.module实例都有自己的$scope 。
同一个model的各个controller之间可以共用一个scope。
//html例子<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul></div>123456//js例子var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});123453.2 $rootScope 根作用域
所有的应用（ng-app）都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 model中 scope 的桥梁。用 rootscope 定义的值，可以在各个 model中使用。
4.filter 过滤器
源码位置[v1.3.13_Angular.js:16478]
可用于校验、转换数据
Filters are used for formatting data displayed to the user.
| 应用场景 | 例子 |
|---|---|
| 在表达式中添加 | <div>{{ expression [|filter_name[:parameter_value] ... ] }}</div> |
| 在指令中添加 | <li ng-repeat="x in names | orderBy:'country'"> |
| 在controller中添加 | $scope.originalText = 'hello';$scope.filteredText = $filter('uppercase')($scope.originalText); |
4.1默认过滤器
| filter名称 | filter方法（源码中对应的方法名） | 用途 |
|---|---|---|
| currency | currencyFilter | 数字转货币数，默认USD（1000->$1，000）Line:16845 |
| date | dateFilter | 根据pattern（yyyy-MM-dd HH:mm:ss Z）转换日期Line:17206 |
| filter | filterFilter | |
| json | jsonFilter | js的Object对象转JSON string, 虽然用的是js原生的JSON.stringify，但意义在于可以在表达式中直接使用，方便调试 |
| limitTo | limitToFilter | 限制字数 |
| lowercase | lowercaseFilter | 全变小写 |
| number | numberFilter | 数字转text（1000->1，000）Line:16870 |
| orderBy | orderByFilter | 排序 |
| uppercase | uppercaseFilter | 全变大写 |
4.2自定义过滤器
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});123455.Service 服务
服务是一个函数或对象，可在 AngularJS 应用中使用(如controller、filter中使用)。
| 服务名 | 含义、用途 | 较原生的优势 |
|---|---|---|
| $location | 代替、监听window.location | 1.可获取到应用生命周期内的每一个阶段，并且和$watch整合； 2.对非HTML5优雅降级； 3.返回结果与上下文相关 |
| $http | 向服务器发送请求，应用响应服务器传送过来的数据 | [待补充] |
| $timeout | 对应了 JS window.setTimeout 函数 | [待补充] |
| $interval | 对应了 JS window.setInterval 函数 | [待补充] |
5.1 $http服务
// 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});123456789// 应用实例var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.my.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});12345678910111213145.2 自定义服务
app.service('myService', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});123455.3 使用服务： 在controller中，作为参数传入
app.controller('myCtrl', function($scope, myService) {
$scope.hex = myService.myFunc(255);
});1235.4 使用服务： 在filter中
app.filter('myFormat',['myService', function(myService) {
return function(x) {
return myService.myFunc(x);
};
}]);123456.依赖注入[待补充]
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant