Angular简要概述一些概念

来源：互联网发布：dw制作淘宝尺码表格编辑：程序博客网时间：2024/06/05 02:55

Angularjs具有自身的几个特点：

1、数据的双向绑定

双向绑定是一个比较有社会主义特色的东西，只要有一个人出问题其他人也都会连带出来。也就是说当module中数据发生了变化，那么view中所就发生相应的变化；反之如果view中发生的变化也会同时修改module中的数据。

2、模板

模板就是最终要显示到页面中所展示的内容，在angularjs中也就是每一个HTML文件。

可以一个完整的HTML文件也可以一段HTML片段。可以像其他语言那样include到母页面中，做为整个页面的一部分。

在Angularjs中模板的操作并非是innerHTML的字符串操作而是DOM的变化，因此可以对DOM进行扩展（使用directive指令）。

Angularjs的语法有些像PHP Smarty的语法，使用双大括号的方式“{{ xxxxx }}”。

3、MVC

现在每一个模板库都要整一个MVC（Model - View - Controll）；Angularjs的MVC更接近于MVVC（Moodel - View - ViewModel）。

Model：

数据源，一切信息的来源。Angularjs中特别的一点是没有像其他语言的setter/getter方法，这个东西最让我烦了；每次都弄的我很晕。

ViewModel：

它是一个用来提供特别数据和方法，从而维护指定view对象。

ViewModel是$scope的对象，只存在于Angularjs的应用中。$scope只是一个简单的JS对象，这个对象使用简单的API来侦测和广播状态变化。

Controller：

controller说的好听些就是：纽带，桥梁，中间件，红娘起着承上启下的功能，将上下（model和view）两个内容结合起来，使它们喜结良缘；说的难听一些就是：拉皮条的，和稀泥的，二道贩子。总而言之，它就是传信儿的，递话儿的主儿。

controller负责初始化以及参数化$scope方法用以控制行为。其并不保存状态也不和远程交互。

View：

view是经Angularjs编译后渲染以及相应的绑定事件后生成的HTML。

4、依赖注入（DI）

一提到“注入”，我总是觉得好像要有什么东西被注到身体里似的，感觉的不爽。

其实它就是依赖！也就是说我的这段angularjs功能需要用到一些angularjs的其他功能，而这些功能是需要通过依赖来加入的。

这些依赖分为：

参数式依赖，即做为一个方法的参数形式传进来的相应服务。

function Ctrl ( $scope, $http, $location ) {

// TODO

}

$inject注入：

把代码中所需要的服务通过$inject注入进去，这个想法可能要适应一下。

抄了网上的一段代码，但我会把含义在下面标明：

1)、var myModule = angular.module( 'MyModule', [] );

2)、myModule.factory( 'notify', [ '$window', function ( win ) {

return function ( msg ) {

win.alert( msg );

}

} ] );

3)、function myController ( scope, notifyService ) {

scope.callNotify = function ( msg ) {

notifyService( msg );

};

4)、myController.$inject = [ '$scope', 'notify' ];

代码含义：

1)、定义了model数据源，名为“MyModule”

2)、定义工厂方法（notify），并接收参数msg后弹出显示

3)、定义controller（myController）并定义callNotify方法用以调用notifyService

4)、$inject注入，利用数据为myController方法传入“$scope”和“notify”方法

5、指令（Directives）

directives是一个比较神奇的东西。可以利用特性自定义一个标签并通过自定义的模板将其替换或做为此标签的子节点加入。

JS:

myModule.directive( 'myTag', function () {

return {

template: '<input type="text">',

restrict: 'E',

replace: true

}

} );

HTML:

<my-tag></my-tag>

0 0