AngularJS

2017-04-19 13:32:49   5  举报





AI智能生成

AngularJS是一个开源的JavaScript框架，用于构建动态Web应用程序。它由Google开发并维护，旨在提供一种简单而强大的方法来构建单页应用程序（SPA）。AngularJS通过使用双向数据绑定、依赖注入和模块化设计等特性，使开发人员能够更轻松地构建可扩展和可维护的Web应用程序。它还提供了丰富的工具和组件库，如Angular UI Router、Angular Material等，以帮助开发人员快速构建交互式和响应式的用户界面。AngularJS具有高性能、灵活性和可扩展性，适用于各种规模的项目，从小型移动应用程序到复杂的企业级Web应用程序。

AngularJS

作者其他创作

大纲/内容

AngularJS应用解析

模版

模版是用HTML和CSS编写的文件，展现应用的视图

AngularJS编译器是完全可拓展的，这意味着通过AngularJS可以在HTML中构建自己的HTML标记

应用程序逻辑和行为

主要通过控制器实现

模型数据

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步，一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中

作用域

$rootScope是所有$scope对象的最上层

$scope对象并不负责处理和操作数据，只是负责视图和控制器之间的通信

$scope所有的属性，都可以自动被视图访问到

内部指令

ng-app

指定一个AngularJS应用

只有第一个ng-app会被angular加载，其他的需要手动启动

angular.bootstrap(document.documentElement);

ng-init

指定初始化应用程序数据

ng-model

指定模型，绑定输入与变量

ng-bind

将内容与变量值绑定

ng-if

根据值加载html元素

ng-hide

隐藏或显示HTML元素

ng-show

隐藏或显示一个HTML元素

ng-selected

值为真时选择该选项

ng-disabled

值为真控件不可用

ng-include

将元素内的内容显示为模版内容

ng-class

设置节点的类属性

ng-switch

ng-switch-when

ng-switch-default

ng-src

ng-href

ng-readonly

ng-repeat

重复集合中的每个项目的HTML元素

$index

$first

$last

$middle

事件

内置界面事件

ng-change

ng-click

ng-blur

失去焦点时触发

ng-focus

ng-dbclick

ng-copy

ng-cut

ng-paste

ng-keydown

ng-keyup

ng-keypress

非字符键不会触发keypress事件

ng-mousedown

任何鼠标按键都会触发

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-mouseup

ng-submit

内置服务事件

$emit事件

$includeContentRequested

ng-include内容重新加载

从ng-include指令触发

$includeContentLoaded

ng-include内容被请求

从ng-include指令触发

$viewContentLoaded

ng-view内容重新加载

从ng-view指令触发

$broadcast事件

$locationChangeStart

$locationChangeSuccess

$routeChangeStart

$routeChangeSuccess

$routeChangeError

$routeUpdate

$destroy

自定义事件

$broadcast

向下

传递event和data

$emit

向上

传递event和data

$on

响应

接收event和data

event属性

tartgetScope

currentScope

name

stopPropagation()

防止事件进一步冒泡

只适用于$emit

preventDefault()

设置defaultPrevented为真

defaultPrevented

如果调用了preventDefault()则为真

表单

必须指定id和ng-controller

标签

ng-valid

ng-invalid

ng-pristine

未被污染

ng-dirty

属性

$dirty

$valid

$invalid

$error

maxlength

minlength

url

min

max

required

表单控件

checkbox

radio

textarea

过滤器

currency

转化为货币格式

date

转化为日期格式

{{ today | date:'medium' }}    <!-- Aug 09, 2013 12:09:02 PM --> 
{{ today | date:'short' }}     <!-- 8/9/1312:09PM --> 
{{ today | date:'fullDate' }}  <!-- Thursday, August 09, 2013 --> 
{{ today | date:'longDate' }}  <!-- August 09, 2013 --> 
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> 
{{ today | date:'shortDate' }} <!-- 8/9/13 --> 
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> 
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

filter

选出需要的元素

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

json

将JSON转化为字符串

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--
{
 "name": "Ari",
 "City": "San Francisco"
}
-->

limitTo

截取字符

{{ San Francisco is very cloudy | limitTo:3 }}
<；!-- San -->

或最后的六个字符：

{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy -->

对数组也可以进行相同的操作】

{{ ['a','b','c','d','e','f'] | limitTo:1 }}
<!-- ["a"] -->

lowercase

转换为小写

uppercase

将字符串转换为大写形式

number

第二个参数可选，用来设置小数点的位数

{{ 123456789 | number }}
<!-- 1,234,567,890 -->
{{ 1.234567 | number:2 }}
<!-- 1.23 -->

orderBy

排序

第二个参数可选，指定是否逆向排序

控制器

控制器可以理解为一个函数

控制器包含作用域

控制器包含方法

路由

ng-view

$routeProvider

templateUrl

模版的地址

controller

控制器

template

模版

resolve

依赖对象

值

工厂

服务

服务对象是单例对象，创建之后只有在关闭浏览器才会被清楚

我们什么时候应该使用服务呢？答案是：无论何时，当我们需要在不同的域中共享数据的时候。另外，多亏了Angular的依赖注入系统，实现这一点是很容易并且很清晰的。

内置服务

$location

返回当前页面的URL地址

需要在controller中使用

location服务不会重新加载整个页面，只是改变URL，可以用$window服务来设置地址

$window.location.href = "/reload/page";

path()

返回当前路径

path('/')

把路径修改为'/'路由

replace()

让用户跳转后不能点击回退按钮

也可以设置参数修改成新的路径

absUrl()

获取编码后的完整URL

host()

获取主机地址

port()

获取端口

protocol()

获取协议

search()

获取查询串

也可以传入参数设置查询

// 用对象设置查询
$location.search({name: 'Ari', username: 'auser'});
// 用字符串设置查询
$location.search('name=Ari&username=auser');

url()

获取当前页面的URL

也可以传入参数设置新的URL

$route

在路由的各个阶段都会触发不同的事件

$routeChangeStart

$routeChangeSuccess

$routeChangeError

$routeUpdate

$http

向服务器发送请求，应用响应服务器传送过来的数据

get()

delete()

head()

post()

put()

jsonp()

$timeout

对应JS中的window.setTimeout函数

$interval

对应JS中的window.setInterval函数

每隔一段时间调用一次

$watch

监视某个变量，当变量的值变化时调用

$resource

一个创建资源的工厂

value

值可以改变

.value('realname','zhaoliu')

前面是变量名，后面是值

constant

值不可以改变

.constant('http','www.baidu.com')

前面是变量名，后面是值

service

用new关键字创建

factory

provider

唯一一个可以注入config的服务

可以在provider对象传递到应用程序其他部分之前在app.config函数中对其进行修改

数据绑定

数据模型对象

$scope对象

双向数据绑定

一个简单的例子

angular.module('myApp', [])
.controller('MyController', function($scope, $timeout) {
    var updateClock = function() {
        $scope.clock = new Date();
        $timeout(function() {
            updateClock();
        }, 1000);
    };
    updateClock();
});

控制器

控制器是一个函数

ng-app所处的层级的父级作用域是$rootScope，所有作用域都可以访问父级作用域

通过例子来看一下这个行为。创建一个ParentController，其中包含一个user对象，再创建一个ChildController来引用这个对象：

app.controller('ParentController', function($scope) { 
    $scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
    $scope.sayHello = function() {
        $scope.person.name = 'Ari Lerner';
    };
});

如果我们将ChildController置于ParentController内部，那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制，我们可以在子作用域中访问ParentController的$scope对象。

例如，我们可以在ChildController的DOM元素中访问定义在ParentController中的person对象，如图5-2所示。

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
    {{ person }}
</div>

表达式

当使用 {{ }} 表示法的时候，便设置了一个$watch。简而言之，这个$watch函数会监控$scope上的属性

过滤器

在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器

{{ name | uppercase }}

name是变量名

在JavaScript代码中可以通过$filter来调用过滤器

app.controller('DemoController', ['$scope', '$filter',
  function($scope, $filter) {

    $scope.name = $filter('lowercase')('Ari');
}]);

自定义过滤器

指令

创建一个简单的自定义指令

<my-directive></my-directive>

angular.module('myApp',[])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<a href="http://google.com">
        Click me to go to Google</a>'
    };
});

提示，使用.run访问$rootScope

angular.module('myApp', [])
.run(function($rootScope) {
    // 使用.run访问$rootScope
    $rootScope.rootProperty = 'root scope';
})

给指令传递参数

<label>Their URL field:</label>
<input type="text"ng-model="theirUrl">
<div my-directive
    some-attr="theirUrl"
    my-link-text="Click me to go to Google"></div>
angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            myUrl: '=someAttr', // 经过了修改
            myLinkText: '@'
        },
        template: '\
            <div>\
                <label>My Url Field:</label>\
                <input type="text"\
                    ng-model="myUrl" />\
                <a href="{{myUrl}}">{{myLinkText}}</a>\
            </div>\
    };
});