angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸.
套用Javascript一切皆对象的思想,在angular中可以说一切皆数据.
关于项目构建
(1) requirejs以及Yeoman
在刚开始接触或者使用Angular的时候,总会疑惑与类似的问题,我实践的答案是不需要requirejs或者Yeoman.前者不使用,因为angular本身有module的实现.后者是因为Angular组织结构以及项目构建完全不必要弄得如此繁杂,手写或者在github上pull一个seed项目即可.
(2) 如何组织项目结构
这个问题有点废材,因为完全因人因项目而异.个人推荐的是两种组织结构,一种按照代码功能,也就是controller都放在一个文件夹下,services都放在一个文件夹下.另一种则遵循所实现的功能,比如User就把对应的template,services,controller都放在User文件夹下.
两种都可以,从维护角度上看第二种会更好一些.
(3) controller以及service的划分
这里controller通常就是一个页面一个controller,假如一个页面有公共的部分,公共部分永远使用一个controller.对于service要划分成两个部分,一个是于服务器交互数据的service,另一个是一些功能性common的内容,其中放置一些自己写的可复用的服务,类似于notify等.
至于service要不要按照功能和模块再进一步划分,这个就看项目来了.
(4) Angular插件以及库的使用
对于一个项目所有的东西都去网上拿现成的肯定不现实,但是所有的东西都自己写就更不实际了.Angular的很多插件是由Angular团队开发出来或者一些人用jquery插件封装的.我对于插件的观点很简单,如果拿来用赶紧需求可以满足就用,不能满足就自己写或者在已有插件上改进.
对于如果你调试几个小时还搞不定的插件,听我的劝,放弃它吧.大多数插件都是一些UI插件,大可不必追求繁杂,有时候简简单单的HTML控件也自有它简约的美.
如果你遇到Angular插件冲突,尤其是UI插件,大多数的情况下要放弃其中之一,比如angular-ui和angular-strap.
使用技巧
下面进入正文,我会列举出我在使用angular的过程中使用的一些技巧,会以场景的形式一一列举.这里对于Angular的一些基础概念我不会解释,本文是一些技巧性的东西,不是基础教程.
(1) angular中"{{}}"于Python的flask冲突
Python的flask使用的模板中,数据绑定也是通过两个"{"大括号,这就于angular的数据绑定有冲突.这个有两种解决方法,一种是修改angular的绑定标记,另一种就是修改flask的绑定标记,这里两种方案都给出.
修改angular:
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// 将这句话加在config中即可,放在route的module中即可.这里将原来angular的{{ }}绑定,修改为通过{[{ }]}绑定.
修改flask:
class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( block_start_string='{%', block_end_string='%}', variable_start_string='{#', variable_end_string='#}', comment_start_string='<#', comment_end_string='#>', )) app = CustomFlask(__name__, instance_path='/web')
这里我推荐修改flask,因为用了angular之后,前后端分离.flask的jinjia模板不再需要,同时如果你修改了Angular的绑定标记,其他的控件和库会有问题的.
(2) 去除url中总是默认带有"#"
在设置route的时候,开启HTML5模式.
angular.module('router', ['ngRoute']) .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); // 设置一下这句即可 } ]);
(3) ng-click="expression"以及类似的指令,如何在expression中书写多个表达式?
比如我在一个ng-click中想要给2个变量赋值,通过";"分号分割即可:
<a ng-click="obja=1;objb=2"></a>
(4) $watch没有产生作用或者只生效一次
这种情况一般来说是监听一个字符串或者数字的时候会出现,$scope.$watch("name",function(){}).没有生效或者只生效一次,解决方法是$watch尽量监听的是一个对象,将你要监听的值附在一个Object下即可.
当你使用angular-ui中的modal时,这个比较明显.具体的原因是因为$scope的继承,因为modal相当于在当前页面的controller中又创建了一个scope,所以对于字面量没法检索追溯原型链,想解决就要有一个对象,才能通过原型链实现跨父子scope的数据刷新绑定.
(5) 希望ng-view的内容全页面显示