AngularJS 项目开发实战

啰嗦一下

最近在开发一个项目时，调研了一下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) {

}

其他

一个项目中会遇到很多问题，只有自己一点点去尝试，过一段时间会把项目中遇到的问题及解决办法整理一下，供大家参考。

每个人都有自己擅长的做事方法，但是不能因为有一些我们不熟悉就不去接受它的思想