AngularJS 基本概念整理 [持续更新整理中]

1.AngularJS指令

所有写在HTML标签上的 ng-xxx都是AngularJS的指令

如：ng-app、ng-model、ng-controller等等

除了AngularJS本身的一系列指令，也可以自定义指令：

<my-directive></my-directive>

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h1>自定义指令</h1>"
    };
});

环境	命名、使用规则
html	my-directive
js	myDirective【小驼峰】

2.model 模块

对view的抽象，类似数据模型
使用指令：ng-model 或 ng-app

<div ng-app="myModel_app">
    <div ng-model="myModel_model"></div>
</div>

var app = angular.module('myModel_app', []);
var model = angular.module('myModel_model', []);

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

3.controller 控制器

控制器是一个对象，用于定义 AngularJS 应用程序的属性、方法。
使用指令： ng-controller

// html例子
<div ng-app="myModel" ng-controller="myCtrl">

//js例子
var app = angular.module('myModel', []);
app.controller('myCtrl', function($scope, $rootScope, $http, myService ) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

3.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>

//js例子
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

3.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("");
    }
});

5.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) {
        // 请求失败执行代码
});

// 应用实例
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) {
            // 请求失败执行代码
    });

});

5.2 自定义服务↓

app.service('myService', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

5.3 使用服务： 在controller中，作为参数传入

app.controller('myCtrl', function($scope, myService) {
    $scope.hex = myService.myFunc(255);
});

5.4 使用服务： 在filter中

app.filter('myFormat',['myService', function(myService) {
    return function(x) {
        return myService.myFunc(x);
    };
}]);

6.依赖注入[待补充]

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant