angularjs入门

当前位置:首页>AngularJS>angularjs入门>AngularJS快速入门-javascript编程【2】

AngularJS快速入门-javascript编程【2】

时间:2015-08-07 16:48来源:网络整理 作者:KKWL 点击:
【提要】本篇《AngularJS快速入门-javascript编程【2】》特别为需要编程学习的朋友收集整理的,仅供参考。内容如下: .3.x版本后已经被取消了) 哈哈,其实ng早就想到了这一步,ng有自己

    【提要】本篇《AngularJS快速入门-javascript编程【2】》特别为需要编程学习的朋友收集整理的,仅供参考。内容如下:

.3.x版本后已经被取消了)

    哈哈,其实ng早就想到了这一步,ng有自己的一套模块加载机制,而且还引入了依赖注入。

    我再次修改了上面的例子:

    -------------------------------------

    

    

我是菜单1里面的内容

我是菜单2里面的内容

    我给ng-app指定了一个名称叫”app“,同时js代码使用angular.module("app", []);定义了一个名称为”app“的module,同时用这个app module 的controller方法定义了一个testCtrl;定义module函数是angular对象上的静态方法,第一个参数传名称,第二个参数是一个数组,这个数组表示这个module所引用的其他module,在这个例子中我们没有使用任何其他的module,所以传入一个空的数组,如果第二个参数不传,表示获取名称为”app“的module;

    这个例子是大家在项目中经常遇见的菜单模块,页面共有2个菜单,默认选中菜单1,当选择哪个菜单,下面的内容区域就显示选中菜单的内容,同时菜单的样式需要修改为选中状态;

    关于显示哪个内容区域我使用了ng-if="currentMenu == 'menu1'"和ng-if="currentMenu == 'menu2'",顾名思义,ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素,如果为假,不显示任何内容;

    至于选中菜单的样式,我使用了ng-class="{'active':currentMenu == 'menu1'}",意思就是currentMenu 为menu1时添加class ”active“,否则没有任何样式。

    上面的3个例子,很好的展示了如何开启一个ng的web,并且如何模块化的使用ng,如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定,写模板,并且初步接触了很多内置的指令(如:ng-app,ng-controller,ng-model,ng-if,ng-class,ng-click)。

    说实话,你已经会了很多了。

    当然ng还是有很多东西等你慢慢发觉,如:

    用ngRoute模块写SPA(单页程序);

    还有更多丰富的指令,学会自己封装自定义指令;

    ng的过滤器功能(Filter);

    ng的表单验证功能;

    使用ng的服务功能(service、provider和factory);

    ng scope树形结构,并且在不同控制器之间通过事件发布订阅机制通信;

    $http和$resource模块与服务端API进行交互操作;

    使用animate模块做一些动画特效;

    单元测试。

    说明:上面的例子为了展示方便,所有的js css 都写在了html页面里面,实际项目中应该分开写在独立的文件中。

    最后的例子

    大家可以根据上面学到的知识,自己做个todolist的例子,默认界面上有2个todo,一个完成一个未完成,每个todo前面有个checkbox表示是否已完成,下面有个输入框和添加按钮,输入内容点击添加则列表上会多一个todo。大家可以先不用看下面的代码,自己尝试做一下,这个例子需要用到的几个directive:

------分隔线----------------------------