您的位置:首页 > Web前端 > AngularJS

AngularJS的更高一步见解

2015-07-14 10:40 459 查看
前面有了章关于AngularJS的个人见解,那时算刚入门搞得比较混乱。这里是相对于之前写的再完善些。

在写AngularJS中,有些人写function函数代码时,是在window域下写的。虽说这样写也没错,但是却不符合AngularJS的思想。因为不是模块化。

AngularJS其中的一个思想就是模块化,所有的方法操作都应该在angularJS.modul()方法的对象内使用,不然会被认为改方法是脏数据,会污染全局。

进一步完善之前写的一篇AngularJS文章,在讲到关于scope的参数时只是比较笼统写下,因为自己还是搞得不是很清楚。这里进一步完善下,scope的参数时只是比较笼统写下,因为自己还是搞得不是很清楚。这里进一步完善下,scope可以理解为作用域,中间件。用一幅图就能比较直观


从图中我们能直观看出scope只是当做中间件,用于controller跟view之间进行数据的传递。scope只是当做中间件,用于controller跟view之间进行数据的传递。scope既能传属性也能传方法。这就是传说中的“双向数据绑定”,当view中的数据改变会更新controller中的数据,反之也是一样。

而scope也能作为作用域,在function方法中scope也能作为作用域,在function方法中scope();为独立作用域,而routeprovider为根作用域,也就是说routeprovider为根作用域,也就是说routeprovider是金字塔最顶级的作用域。其子scope可以一步一步向上寻找(或者说向上抛出)最终能到达scope可以一步一步向上寻找(或者说向上抛出)最终能到达routeprovider的根作用域上。



这张图是截图下来的,现在来解释说明下这图的作用,上面一部分的代码是模块化,其实看代码也能看出来。而 【】中括号里面的是注入,这是AngularJS中另一大思想,模块注入绑定。【】中的所有字符串都是从别的JS文件中导入的,也就是说,这些字符串是该项目工程中其他JS文件内的控制器方法的方法名,跟当前该模块进行绑定。使用名为bookStoreApp的模块时会调用【】内的其他控制器的方法。

下面的.config是配置。routeProvider是路由的根路径。而下面的routeProvider是路由的根路径。而下面的routeProvider.when是指路径跳转的地方,最后一个.otherwise的意思是当前面都没执行到或者无法执行的时候则执行该方法内的路由地址跳转。

在AngularJS中很重要的是指令,指令的名字跟属性完全可以由我们自己定义,但是自己定义的最好不要跟AngularJS中内置的定义一样。

//创建指令模块 (或者检索现有模块)
var m = angular.module("myApp");

// 创建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E",        // 指令是一个元素 (并非属性)
scope: {              // 设置指令对于的scope
name: "@",          // name 值传递 (字符串,单向绑定)
amount: "=",        // amount 引用传递(双向绑定)
save: "&"           // 保存操作
},
template:             // 替换HTML (使用scope中的变量)
"<div>" +
"  {{name}}: <input ng-model='amount' />" +
"  <button ng-click='save()'>Save</button>" +
"</div>",
replace: true,        // 使用模板替换原始标记
transclude: false,    // 不复制原始HTML内容
controller: [ "$scope", function ($scope) { …  }],
link: function (scope, element, attrs, controller) {…}
}
});


这是从网上别人那拷贝过来的,在这里说明其自定义指令的用法。其中”mydir”就是我们自己创建的指令。而紧跟着的function是该指令要执行的事件。restrict是指该指令在HTML中应用形式为A 、C、 E、 M,四种。分别代表 attribute、class、element和comment(默认值为”A”)。下面的都有非常好的注释说明。而controller是给外部程序调用的,link是本方法内使用的。



~



这张图很好的解释了以声明的方式注入到控制器中,实现了‘依赖注入’。



而这张图则很好的解释了这三个参数的意思跟作用。另外还说明了$watch方法的意用。



很好的解释说明双向绑定的实现。

最后跟上该网址http://wenku.baidu.com/link?url=mgHtCAGG9S7-tfwdokJpwzciEDf0dLGwrjO-WDZIXsgb1wzKXyTH_w0qumVI85-h1IBEpOs1EJ4dfLNB59L2yoatULbrbZjynxJp2M69K_a有兴趣的可以自己去看看。我只是把觉得比较好的偷偷拿用并做更详细的解释说明。

还有需完善的,会在后面再记录下来。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: