AngularJS的更高一步见解

前面有了章关于AngularJS的个人见解,那时算刚入门搞得比较混乱。这里是相对于之前写的再完善些。
在写AngularJS中,有些人写function函数代码时,是在window域下写的。虽说这样写也没错,但是却不符合AngularJS的思想。因为不是模块化。
AngularJS其中的一个思想就是模块化,所有的方法操作都应该在angularJS.modul()方法的对象内使用,不然会被认为改方法是脏数据,会污染全局。
进一步完善之前写的一篇AngularJS文章,在讲到关于 scope scope可以理解为作用域,中间件。用一幅图就能比较直观AngularJS的更高一步见解_第1张图片
从图中我们能直观看出 scopecontrollerview scope既能传属性也能传方法。这就是传说中的“双向数据绑定”,当view中的数据改变会更新controller中的数据,反之也是一样。
scopefunction scope();为独立作用域,而 routeprovider routeprovider是金字塔最顶级的作用域。其子 scope routeprovider的根作用域上。


这张图是截图下来的,现在来解释说明下这图的作用,上面一部分的代码是模块化,其实看代码也能看出来。而 【】中括号里面的是注入,这是AngularJS中另一大思想,模块注入绑定。【】中的所有字符串都是从别的JS文件中导入的,也就是说,这些字符串是该项目工程中其他JS文件内的控制器方法的方法名,跟当前该模块进行绑定。使用名为bookStoreApp的模块时会调用【】内的其他控制器的方法。
下面的.config是配置。 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是本方法内使用的。
AngularJS的更高一步见解_第2张图片
~
AngularJS的更高一步见解_第3张图片
这张图很好的解释了以声明的方式注入到控制器中,实现了‘依赖注入’。

AngularJS的更高一步见解_第4张图片
而这张图则很好的解释了这三个参数的意思跟作用。另外还说明了$watch方法的意用。

AngularJS的更高一步见解_第5张图片
很好的解释说明双向绑定的实现。
最后跟上该网址http://wenku.baidu.com/link?url=mgHtCAGG9S7-tfwdokJpwzciEDf0dLGwrjO-WDZIXsgb1wzKXyTH_w0qumVI85-h1IBEpOs1EJ4dfLNB59L2yoatULbrbZjynxJp2M69K_a有兴趣的可以自己去看看。我只是把觉得比较好的偷偷拿用并做更详细的解释说明。
还有需完善的,会在后面再记录下来。

你可能感兴趣的:(AngularJS,模块化)