AngularJS 项目开发实战
2015-09-22 19:38
549 查看
目录
啰嗦一下
你问我答
目录结构
压缩
其他
啰嗦一下
最近在开发一个项目时,调研了一下AngularJS,发现这个框架功能很丰富,而且用起来也很方便,所以深入了解了一下,在此分享一下我的感悟。AngularJS是一个MVVM框架,所谓MVVM框架,即:Model-View-ViewModel,通俗一点的解释是:当数据发生变化时,框架自动进行数据绑定,自动更新页面上的数据。
这一点可以说是非常“神奇”的功能,可以减少我们很多的工作量。把我们从复杂的DOM结构中解脱出来,用剩余的时间去干一点有用的事情。
试想一下,当你和女神谈天说地,聊得不亦乐乎的时候,你突然发现自己的操作DOM的代码有点问题,改来改去改了好久才把问题解决掉,再回头和女神聊天,发现女神的笑容依旧那么美丽,但确是和隔壁使用AngularJS框架的王哥,这是多么悲伤场景啊!也许就在你修改代码期间,一段美好的姻缘就随风消逝了。这不能说是你们没有缘分,而是你选错了框架啊!
说了很多AngularJS的好话,也要澄清一点,没有东西是完美的,AngularJS也有一些缺点,比如说,AngularJS自身框架的一些bug,不适合界面频繁交互的场景(如:游戏类网站)等,好在现在的网站大部分都是CRUD型的应用,你可以放心用了。
下面我们就正式介绍一下AngularJS的相关知识点以及在项目中的应用,先进入到你问我答环节,看看群众们有哪些疑惑。
你问我答
问: AngularJS 适合构建什么类型的应用?答: AngularJS 适合做单页面应用程序(SPA应用),但是需要注意的是,并不是一个项目只能有一个页面应用,例如:做管理系统时,你可能需要为三种不同的账户提供三种不同的页面入口,master、guest、friend,你可以创建三个页面入口,每个页面是一个应用,并提供相应的页面入口即可。
问: 我以前做前端时,都是使用JQuery开发的,他们有什么区别吗?
答: 有本质的区别,推荐你看一篇文章 jQuery开发者眼中的AngularJS
问: AngularJS不能做游戏网站,但是Jquery可以啊,这么说来AngularJS没JQuery好用啊?
答: 如果你要是做游戏网站的话,你确实需要使用偏底层的JQuery,但是却不能说哪个好不好用,场景不同,需求也就不同,使用的技术也不同。
问: 如果用了AngularJS,我之前使用的JQuery或JS插件是不是就不能用了啊?
答: 是的,他们不能同时使用,有一些JS插件通过修改可以在AngularJS中使用,如滑动插件iScroll,但是大多数插件都不行,如果你想实现一些效果,可以在网上找一找AngularJS的插件,很多插件都有相应的AngularJS实现,或者是兼容AngularJS的方法。
其他问题后期再收集整理,看一下项目规划的目录结构把!
目录结构
|-css |-js |-controllers |-index |-a.controller.js |-b.controller.js |--demo |-directives |-filters |-services |-main.config.js |-main.route.js |-templates |-libs
目录结构大概就是这样的,过滤器放在filters中,指令放在directives中,服务放在services中,main.config.js创建本服务的module和监控路由变化的事件等,
angular.module('moduleApp', ["ngRoute", "ngTouch", "ngAnimate"]);
main.route.js中配置路由信息,如:
function Route($routeProvider) { $routeProvider.when('/demo', { templateUrl: 'a.html' }).otherwise({ redirectTo: '/index' }); }
控制器放在controllers中,在controllers中需要分成具体的功能,这样防止在一个controllers有很多个js文件。
压缩
当开发完项目时,你会发现,里面有好多个JS文件,每个文件的大小都不大,但是对于前端来说,会发起很多请求,影响性能,所以我们要对文件进行压缩,可以使用gulp压缩,具体的压缩方法可以自己在网上查找,有很多文档可以查找,压缩后最常出现的问题是找不到所对应的依赖,AngularJS是通过参数名称注入的,如果不手动添加依赖,压缩之后就找不到对应的以来名称,如果你按照我前一段时间发的规范Angularjs书写规范开发的话,压缩不会有什么问题。手动添加依赖 angular .module('app') .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; function Dashboard($location, $routeParams, common, dataservice) { }
其他
一个项目中会遇到很多问题,只有自己一点点去尝试,过一段时间会把项目中遇到的问题及解决办法整理一下,供大家参考。每个人都有自己擅长的做事方法,但是不能因为有一些我们不熟悉就不去接受它的思想
相关文章推荐
- angular @ = &
- AngularJS体验式编程系列文章
- Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题
- 什么是 Angularjs
- (十九)由一个bug想到的:使用jQuery和angularJS需要注意的事
- 【原创教程】一、Angular教程系列之认识angular
- angular 自定义指令 link
- angular filter
- angular 倒计时
- AngularJs的认识
- Angularjs开发的一些方法和建议整理
- angular $watch
- 学习笔记-AngularJs(五)
- angular 自定义指令
- angularjs实现下拉加载更多
- angularjs directive
- angular之filter的几种调用方式
- AngularJs的自定义filter用法
- 如何Angularjs1.3在页面中输出带Html标记的文本
- angularjs关于controller之间如何通讯