一.是否有必要加入模块化框架

1.Reqruiejs seajs的主要作用

(1)模块化,让代码易于维护。

  1. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs

(2)可以按需、并行、延时载入js库

  1. 当js文件比较多时,angular会一次请求所有的js文件,浪费流量,此时模块化框架就很有必要了。

2.http://www.cnblogs.com/kenkofox/p/4643760.html(浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

二.是否有必要加入jquery

1.dom操作:angular推荐dom操作在自定义指令里面,在controller里面操作dom对性能有影响,angular自带jqlite对一般的dom操作足够用。

2.Bootstrap依赖jquery:可以用Bootstrap的css功能加angular-ui的js组件。

3.http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background(介绍为什么angular不需要引入jquery)

三.性能优化

1.dom操作,尽量不要在controller里操作都没,有dom操作的尽量在自定义指令的link函数中。

2.$scope.$apply()vs$scope.$apply(function(){})

DOM事件、setTimeout、XHR时必须需要调用。

function$apply(expr) {
  try {
    return$eval(expr);
  } catch(e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}

  

复制代码它会捕获所有的异常并且不会再抛出来,最后都会调用$digest()方法。

总之尽量使用$scope.$apply(function(){})

3.ng-show vs ng-if

Ng-show 单纯的隐藏dom元素 ng-if清楚dom元素,ng-if性能要好一些。

4.ng-repeat

Error: [ngRepeat:dupes]

.当数组中有两个以上数字重复时会报这个错,可以通过item in items track by $index解决

当数组部分数据发生变化时,如果没有track by,angular会刷新和此数据有关的所有dom元素,而加了track by后angular只会刷新数据有变化的dom元素,减少不必要渲染。

5.减少不必要的双向绑定,最好不要超过2000个数据双向绑定。{{:: mes}}

6.减少事件广播,使用双向数据绑定或共享service等方法来代替。

7.http://ourjs.com/detail/54a0b5cd71caa3b40a000001(angular在AngularJS在大型单页面应用中的性能优化)

四.遇到的坑

1.路由

虚拟路由a下子路由b的变化不能控制和a一级的ui-view中的内容。

2.点击某个标签控制路由跳转有两种方式如下

(1)通过a标签的href属性跳转  <a href="#cart">购物车</a>

(2)通过ui-router的方式跳转  <a ui-sref="cart">购物车</a>

两种在router.js做如下编码都可以跳转

$stateProvider
.state("cart", {
url: "/cart",
templateUrl: "template/cart.html", });

  但是当改变router.js中url为“/cart1”时第一种跳转方式失效,第二种依然可以跳转。原因是第一种只能对应固定的url。第二种是对象cart这个状态。所以在实际应用中不要使用第一种跳转方式。

3.controller中的代码执行两遍,原因是在模板和路由中同时设定了controller,如下。

//cart.html
<div ng-controller="cartCtr">我是购物车模板文件</div> //router.js
$stateProvider
        .state("cart", {
url: "/cart",
templateUrl: "template/cart.html",
       controller:"cartCtr" });

  

4.开发环境vs生产环境

(1).开发环境下如果使用压缩版的angular如果某个js文件报错很难找到,所有开发环境下务必使用未压缩版本。

(2).上线应该用gulp对代码进行压缩混淆合并等处理,减小文件体积,减少跟服务器请求资源的次数。

未完待续

自定义鼠标右键指令

//指令里面
angular.directive('myRightClick', function($parse) {
return function(scope, element, attrs) {
element.bind('mousedown', function(event) {
if(event.button==2){
scope.$eval(attrs.myRightClick);
} });
};
});
//html
 <div my-right-click="fn()"></div>
//controller
$scope.fn=function(){
console.log(111);
}

  5.$state 传参

//路由配置时加上params参数

$stateProvider.state('login', {
            url: '/login',
params:{'isScanning':false},
views: {
'webIndexView': {
templateUrl: 'pages/login.view.html',
controller: 'loginController'
}
}
})
//跳转路由时
$state.go('login',{'isScanning':true}); //controller中注入$stateParams
console.log($stateParams.isScanning);

angular使用总结的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  10. 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

随机推荐

  1. tomcat context配置

    <Context path="/ext" docBase="/eqp/export" />                访问目录         ...

  2. *CF2.D(哥德巴赫猜想)

    D. Taxes time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  3. c++ 宏定义声明类,并在类中实现回调

    #include <iostream> #include <windows.h> #include <string> using namespace std; ty ...

  4. ecshop二次开发 购物车添加备注信息

  5. Repeater的分页

      Repeater控件是个好东西.轻量级.又好用.完全的自定义.但是,正是因为这些优点它没有自动分页的功能.这个需要研究一下.我看了一下起点等小说网站,那些什么推荐排名榜用Repeater控件那是很 ...

  6. php性能优化

    序   很长时间没有写博文了,最近换了工作,长时间加班,根本没有时间做其他事情!今天闲下来了,想一想php性能方面的事情.这也是我2014年的第一篇博文! 推荐阅读:初学者到中级者应该掌握的!   p ...

  7. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  8. 生成模型(Generative Model)与判别模型(Discriminative Model)

    摘要: 1.定义 2.常见算法 3.特性 4.优缺点 内容: 1.定义 1.1 生成模型: 在概率统计理论中, 生成模型是指能够随机生成观测数据的模型,尤其是在给定某些隐含参数的条件下.它给观测值和标 ...

  9. windows7查看最近使用记录

    1.看计算机在哪天运行过~运行了多久! C:\Windows\SchedLgU.txt 2.看你最近运行过什么程序: C:\Windows\Prefetch 3.看你最近打开过什么文件(非程序)和文件 ...

  10. iOS-----写一个规范的单例--->

    1.集成了一个宏 2.两句代码集成单例 3.一句代码调用单例 -------------> 1.集成了一个宏 //这里就要注意了,因为每个单例中,方法名可以不一样,那么我们就不能把名字写死,要灵 ...