AngularJs大全

来源：互联网发布：淘宝哪家店衣服好看编辑：程序博客网时间：2024/06/10 04:14

AngularJS主要组成部分如下：

{

启动(startup)，

执行期(runtime)，

作用域(scope),

控制器(controller),

模型(model)，应用的数据

视图(view)，用户看到的

指令(directives),扩展html语法

过滤器(filter)，数据本地化

注入器(injector)，聚合你的应用

模块(module)，配置注入器

$，angularJS的命名空间

}

<!DOCTYPE html><html ng-app="model"><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script><script type="text/javascript" src="twoScript.js"></script></head><body><p ng-init="name='world'">hello {{name}}</p></body></html>

如上代码的执行过程：

{

1.浏览器载入HTML，编译成dom，

2.浏览器载入angularjs

3.angularjs等待DomContextLoaded上下文加载完毕事件触发

4.angularjs寻找ng-app指令，

5.使用ng-app指定的模块来配置注入器$injector

6.注入器创建“编译服务($compile service)”和“跟作用域($rootScope)”

7.编译服务编译dom并链接到跟作用域

8.ng-init指令将“word”赋值给作用域中的name

9.通过{{name}}插值表达式，替换为word

}

下面来看这样一个案例：

<!DOCTYPE html><html ng-app><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script><script type="text/javascript" src="twoScript.js"></script></head><body><!-- <p ng-init="name='world'">hello {{name}}</p> --><input type="text" ng-model="name"><p>{{name}}</p></body></html>

执行过程如下：（注：给input标签绑定了ng-model指令后，同时也表示给input绑定了keydown监听事件）

{

1.按下任意键都会触发input上的keydown事件

2.input中的指令检测到input中的值改变，然后调用$apply("name='x'")来更新angularjs中执行上下文的模型

3.angularjs将name=‘x’运用到模型中

4.$digest开始执行循环

5.$watch列表检测到name值的变化，通知{{name}}去更新dom

6.angularjs退出上下文，然后退出JavaScript中的keydown事件

7.浏览器以更新的文本重新渲染视图

}

3.作用域（socpe）：作用域是用来检测模型的变化和为表达式提供执行上下文

如下面的代码解释了作用域：

<div ng-controller="aaa"><p>{{name}}</p></div><div ng-controller="bbb"><ol><li ng-repeat="name in mas">{{name}}</li></ol></div>

function aaa($scope){$scope.name="aaa的name";}function bbb($scope){$scope.mas=["bbb1","bbb2","bbb3"];}

4.控制器

视图背后的控制代码就是控制器

5.指令：有某个元素名称，属性，css类名出现而导致的行为

6.过滤器

7.模板和注入器

<!DOCTYPE html>
<html ng-app="timeModule">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="threeScript.js"></script>
</head>
<body>
<div ng-controller="asd">
<p ng-bind="time"></p>
</div>
</body>
</html>

js：

andularjs中自定义的模块常用的的依赖方法有以下几种：

{

1.config 代码，angularjs会连接并注册好所有的数据源，不确定的数据和服务不会被注册进来

2.run代码，启动你的应用，在注册器完成后开始执行，只有实例和常量会被注册到run里，

这时run代码类似与main方法，模块可以通过api来实例化控制器，服务，指令和过滤器

常用的api如下：

{

1.config（configfn）：利用此方法可以做一些注册工作，这个工作需要在模块加载完成时执行

2.constant（name，obj）：这个方法会首先执行，所以你可以用它来声一些常量，并且让他们

可以被config配置方法和一些实例代码中(如：controller，service等)使用。

3.controller（name，constructor）:配置好控制器，方便后面使用

4.directive（name，directiveFactory）：可以使用此方法创建指令

5.filter （name，filterFactory）：允许你创建angularjs过滤器

6.run（initFn）如果你想要在注射器启动之后执行某些操作，而这些操作需要在页面对用户可用之前执行，就可以使用此方法

7.value(name,obj)允许在整个应用中注射值

8.factory（name，factoryfn：如果你有一个类或对象，为它提供一些参数之后才执行初始化，那么可以在这个接口中声明这些参数

9.service（name，obj）: factory和service之间的不同点在于，factory会直接调用传递给它的函数，然后返回执行的结果；而service将会使用"new"关键字来调用传递给它的构造方法，然后再返回结果.

10.provider(name,providerfn):provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）.

}

阅读全文

0 0