实践总结 - 不可错过的Angular应用技巧
使用技巧
下面进入正文,我会列举出我在使用angular的过程中使用的一些技巧,会以场景的形式一一列举.这里对于Angular的一些基础概念我不会解释,本文是一些技巧性的东西,不是基础教程.
(1) angular中"{{}}"于Python的flask冲突
Python的flask使用的模板中,数据绑定也是通过两个"{"大括号,这就于angular的数据绑定有冲突.这个有两种解决方法,一种是修改angular的绑定标记,另一种就是修改flask的绑定标记,这里两种方案都给出.
修改angular:
1
2
|
$interpolateProvider.startSymbol( '{[{' ).endSymbol( '}]}' );
// 将这句话加在config中即可,放在route的module中即可.这里将原来angular的{{ }}绑定,修改为通过{[{ }]}绑定.
|
修改flask:
1
2
3
4
5
6
7
8
9
10
11
12
|
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模式.
1
2
3
4
5
6
|
angular.module( 'router' , [ 'ngRoute' ])
.config([ '$routeProvider' , '$locationProvider' ,
function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode( true ); // 设置一下这句即可
}
]);
|
(3) ng-click="expression"以及类似的指令,如何在expression中书写多个表达式?
比如我在一个ng-click中想要给2个变量赋值,通过";"分号分割即可:
1
|
<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的内容全页面显示
通常一个页面可能会有固定的top-menu或者sidebar,这类固定不变的部分,然后每次route变化的都是ng-view的template,如果一个页面希望整个页面完全显示它自己,不包括top-menu之类固定的部分.
这里通常是一个index.html和一个ng-view显示的template.html,top-menu和sidebar位于index.html中,将它们的显示隐藏通过ng-if绑定一个变量控制.
如 果一个页面需要自己完全显示,不显示sidebar等,则在其controller中通过$scope.$emit向上发送一个消息,然后index页面 的controller则通过$scope.$on监听消息,一旦听到那个消息,则改变控制sidebar显隐的变量.
也可以通过service做一个全局的变量控制,个人推荐还是通过消息广播的方式.
(6) 切记用ng-if代替ng-show
这是angular的一个小坑,也可以说是不大不小的一个坑.一些长列表数据,可能有一些东西是通过默认隐藏,点击显示的形式展现的.而这部分可控制显隐的内容中也会伴随很多数据绑定.这个在页面渲染的时候非常影响性能.
举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将每100的model设置为ng-show,默认情况下不显示,你会发现还是很卡.
然 后你将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用.原因在ng-show还是会执行其中的所有绑定,ng-if则会在等于 true,也就是显示的时候再去执行其中的绑定.这样一来性能就有很大的提高,我之前通过这个简单的修改,页面加载快了10倍左右.
所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧.
(7) 关于ng-bind-html
通 常情况下为html元素绑定数据,有ng-bind就够了,但一些情境下需要绑定的不是一般的数据,而是html.那么ng-bind就不够用了,需要使 用ng-bind-html,它会将内容作为html格式输出.比如想输出带有class的html,那么就使用ng-bind-html,而且还需要 ngSanitize的配合,需要引入相应的文件.
(8) 获取ng-repeat数据filter后的结果
这个一般在搜索的时候需要用到,比如多重ng-repeat数据形成列表.然后filter一个字段,现在要得到filter之后的结果,有2中方式.
一种是在html的ng-repeat中类似这么写:
1
|
ng-repeat= "food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"
|
这样_displayfoods就是filter后的最终显示的结果.另一种方式是通过两套数据,一套写在controller中,然后filter以及orderBy都是在controller中操作,最后操作的结果在用来ng-repeat.
第一种方式比较方便,第二种方式更好,性能也好.
(9) ng-class以及ng-style通过判断赋值
根据变量的值决定是否应用某种class,以及不同的style样式.
ng-class="{'state-error':!foodForm.foodstock.$valid}"
ng-style="{ color: i.color=='' || i.name=='活' ? 'default' : '#fff' }"
(10) form校验以input为例
angular的form可以通过input的HTML5属性进行校验,这里主要通过form以及input的name属性进行锁定,formname.inputname.$valid表示name为inputname的空间是否通过本身的属性校验.
(11) $resource和$http的$promise
1
2
3
4
5
6
7
8
|
$q.all([
resource.query().$promise,
resource2.query().$promise
]).then(functon(success){
console.log(success);
},functon(error){
console.log(error);
});
|
1
2
3
4
|
foodFactory.food.save(f).$promise.then( function (result){
foodFactory.food.get({id:result.id}).$promise.then( function (data){
});
});
|
这个不解释了,直接看就可以了,注意$http的promise需要手动返回,所以一般情况下都通过$resource.
(12) 仅$watch监听collection中的一个属性
$watch的第三个参数设置为true,即可deep watch.不过有时候其实不想或者不需要监听collection的全部属性.只要监视其中的一个或者几个,这时候通过for循环虽然可以循环$watch不过明显太挫.
通过下面这种写法就可以监控一个collection的单独一个object属性.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$scope.people = [
{
"groupname" : "g1" ,
"persions" : [
{
"id" : 1,
"name" : "bill"
},
{
"id" : 2,
"name" : "bill2"
}
]
},
{
"groupname" : "g2" ,
"persions" : [
{
"id" : 3,
"name" : "bill3"
},
{
"id" : 4,
"name" : "bill4"
}
]
}
]
$scope.$watch( function ($scope) {
return $scope.people.map( function (obj) {
return obj.persions.map( function (g){
return g.name
});
});
}, function (newVal) {
$scope.count++;
$scope.msg = 'person name was changed' + $scope.count;
}, true );
|
(13) debounce防抖处理
这个对于频繁出发的处理非常有用,适用于类似ng-change,$watch的一些场景.比如根绝关键字即时搜索的场合,将$debounce封装为服务,直接调用接口,代码:http://jsfiddle.net/Warspawn/6K7Kd/
(14) 快速定位到某个位置
一般来讲页面内通过<a id="bottom"></a>这样的形式就可以结合js代码,实现快速定位.在angular中也是通过类似的原理实现,代码如下:
1
2
3
4
|
var old = $location.hash();
$location.hash( 'batchmenu-bottom' );
$anchorScroll();
$location.hash(old);
|
这样写是因为直接location.hash会导致url变化,页面跳转,所以加了防止跳转的代码.
暂时就总结了这么多,很多东西都是查资料以及自己实践的,希望对需要的TX会有所帮助,以后如果有新的东西会续写一下.
转载:http://my.oschina.net/blogshi/blog/293631
实践总结 - 不可错过的Angular应用技巧相关推荐
- 错过校招_您可能错过的Web优化技巧
错过校招 by Harnoor Bandesh 由Harnoor Bandesh 您可能错过的Web优化技巧 (The Web Optimization trick you might have mi ...
- 高手如何实践HBase?不容错过的滴滴内部技巧
摘要: HBase和Phoenix的优势大家众所周知,想要落地实践却问题一堆?replication的随机发送.Connection的管理是否让你头痛不已?本次分享中,滴滴以典型的应用场景带大家深入探 ...
- angular 最佳实践_干净高效的Angular应用程序的最佳实践
angular 最佳实践 by Vamsi Vempati 由Vamsi Vempati 干净高效的Angular应用程序的最佳实践 (Best practices for a clean and p ...
- 不容错过的Pandas小技巧:万能转格式、轻松合并、压缩数据,让数据分析更高效...
点击上方"Datawhale",选择"星标"公众号 第一时间获取价值内容 作者 | Roman Orac 转自 | 量子位 编译 | 鱼羊 数据分析,如何 ...
- 【Python机器学习及实践】进阶篇:模型实用技巧(特征提升)
Python机器学习及实践--进阶篇:模型实用技巧(特征提升) 所谓特征抽取,就是逐条将原始数据转化为特征向量的形式,这个过程同时涉及对数据特征的量化表示:而特征筛选则进一步,在高维度.已量化的特征向 ...
- 在容器上构建持续部署,这份超详细实践指南不要错过!
作者 | 倚天码农 责编 | 刘静 出品 | CSDN 博客 要想理解持续集成和持续部署,先要了解它的部分组成,以及各个组成部分之间的关系.下面这张图是我见过的最简洁.清晰的持续部署和集成的关系图. ...
- @程序员,不容错过的 Vim 实用技巧请查收!
Vim 是 Linux 系统上的最著名的文本/代码编辑器,也是早年的 Vi 编辑器的加强版.一直以来,Vim 普遍被推崇为类 Vi 编辑器中最好的一个,其拥有代码补全.编译及错误跳转等诸多丰富的功能, ...
- 每天一个PS技巧(原理+实践)——制作熊猫人表情包
每天一个PS技巧(原理+实践)见: 每天一个PS技巧(原理+实践)_Dezeming的博客-CSDN博客PS是由Adobe Systems开发和发行的图像处理软件.本文的特色在于快速上手和制作一些生活 ...
- 《AngularJS深度剖析与最佳实践》简介
由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...
最新文章
- Emacs基础命令整理 - Unplugged - 博客频道 - CSDN.NET
- HTML结构化CSS网页布局入门指南
- 【java】静态代码块
- 【电信增值业务学习笔记】10基于业务节点的增值业务提供技术
- matlab 工具 安装包下载地址,安装 | MATLAB2018a (64位) 安装教程及安装包下载链接...
- iPhone SDK发布
- linux在所有文件中查找某一个字符
- 如何在 SAP Spartacus 里添加自定义页面 - Custom Page
- python语言里数字包括_4.1Python语言中的数字、字符串数据类型讲解
- __attribute__((regparm(number))):函数通过number个寄存器传递参数,否则通过堆栈
- mysql show sleep_mysq解决sleep进程过多的办法
- 转子系统动力学模型matlab程序代码
- 小米无线路由器服务器用户名和密码忘了,小米路由器密码忘记了怎么办 小米路由器密码忘记解决办法【详解】...
- RLC串联电路的谐振相关参数计算
- 做游戏,学编程(C语言) 14 口袋妖怪
- 【前端基础】12.CSS 基础知识学习——基本语法结构
- 高效办公——Excel表格-03篇(Excel常用快捷键 以及 Excel快捷键结合公式的各种常见的办公例子)
- matlab中pol2cart()函数
- 【CKF3】2015-6-2更新
- 面试题整理 !=!=未看 *****面试题整理最全 有用
热门文章
- Redis的5大Value的使用场景
- 使用JMeter如何实现上传文件
- 抽取JDBC工具类:JDBCUtils
- Axure RP Extension for Chrome经常损坏
- mysql 21天_把整个Mysql拆分成21天,轻松掌握,搞定(中)
- html ajax输出表格中,使用Ajax来渲染HTML表格
- java 解析docx_java解析xlsx和docx 文件 | 学步园
- macos php开发环境,macOS 10.13 High Sierra PHP开发环境配置
- stata 线性回归分析基本操作
- 只会用console.log调试?快来试试这些高效的调试方法