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

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

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";
});123456

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>123456

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

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.

4.1默认过滤器

4.2自定义过滤器

app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});12345

5.Service 服务

服务是一个函数或对象，可在 AngularJS 应用中使用(如controller、filter中使用)。

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

});1234567891011121314

5.2 自定义服务

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

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

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

5.4 使用服务： 在filter中

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

6.依赖注入[待补充]

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

原文出处