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

阅读更多
文章标签: angularjs
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭