AngularJS小结

前段时间做AngularJS的经验总结,这里和大家分享一下:

使用AngularJS的目的是构建一个单页应用,一直是局部刷新,可以达到类似客户端的效果

指令主要参数:

restrict : E(元素),A(属性),C(类名),M(注释),默认为EA

template指令链接DOM模板,例如“<h1>{{head}}</h1>”

templateUrl:替代template,指定模版路径

replace :指令链接模板是否替换原有元素,默认false

scope :有三种参数

  • false :共享父域
  • true :继承父域,但新建独立作用域
  • 对象{} :独立作用域,有三种绑定策略实现数据传递
    • @单向绑定,使用时加{{}}
    • =双向绑定
    • &函数绑定

require : 用于指令和指令之间进行通讯,在使用require指定依赖后,link函数的第四个参数就是所依赖的控制器

require: '?^teacher'这里的问号和^号是寻找策略,前者表示没有找到则置为null,后者表示在自身指令寻找指令名称的同时,向上父元素寻找

controller :赋予指令控制器,是用来定义其内部作用域的行为的

link :描述指令元素操作行为,先执行controller设置各个作用域的scope,执行link,设置DOM的各个行为

 

Controller间调用方法 :

使用消息机制,$scope.$emit(EVENT.SUCEESS,{});其父controller如下

$scope.$on(EVENT.SUCEESS, function (event, args) {});

 

Controller间数据共享 :

使用服务做桥梁,因为服务是单例的,多个controller间访问的是同一份数据,设置好服务gettersetter方法,在任何需要这个数据的地方注入这个服务

angular.factory('sharedList',function() {var list = [];return {addItem: addItem,getList: getList}function addItem(item) {list.push(item);}function getList() {return list;}
});

在定义模块,servicecontroller等时最好使用依赖注入,减少模块间的耦合

app.controller('worldCtrl',['$scope','$http',function($scope, $http){

     // ...

}]);

或者myCtrl.$inject = ['$scope', ''];这样显式注入

 

设置延时操作是使用angularjs自带的$timeout而不是setTimeout,后者对scope的修改不会触发更新,使用

$timeout.cancel(promise对象)取消一个timeoutvar a= $timeout(function(){console.log('执行$timeout回调');return'angular';
}, 1000);

通过ngResource来调用restful服务接口,而不是仅仅使用$http,它只适合处理一些简单的请求,可以定义

资源在服务端的URL,常用的请求参数类型,一些附加的方法,期望获得的响应类型等等这些

如下是ngResource的一个简单例子:

myAppModule.factory('CreditCard',['$resource',function($resource) {return $resource('/usr/:userId/card/:cardId',{userId: 123, cardId:'@id'},{charge: {method:'POST', params: {charge:true}, isArray: false});
}]);

通过CreditCard.get({id : 11})则会生成/user/123/card/11的资源URL

 

UI Bootstrap的使用,由于项目中不用jQuery,所以无法直接使用BootStrap,该项目为每个Bootstrap JS组件添加了内置指令,只需要Bootstrap CSS就可以实现BootStrap的样式。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何管理QQ浏览器的扩展工具 QQ浏览器扩展工具的管理方法

QQ的庞大安装量带动了腾讯系的所有产品的安装量&#xff0c;QQ浏览器作为腾讯旗下开发的浏览工具&#xff0c;也拥有不俗的装机量。QQ浏览器不仅是沾了QQ的光&#xff0c;其自身实力也有不俗的&#xff0c;QQ浏览器的应用中心与其他浏览器的扩展中心一般支持用户安装各种浏览器…

Java线程池ThreadPoolExecutor的实例

Java.util中的线程池和Spring框架对这个类的扩展 1.单独通过java里的ThreadPoolExecutor这个类&#xff0c;可以创建线程池&#xff0c;如果系统采用Spring框架设计&#xff0c;可以采用ThreadPoolTaskExecutor这个类来扩展控制&#xff0c;这个对维护线程池 最大值和最小值易扩…

win7系统电脑语言栏怎么更换输入法

我们在使用win7操作系统电脑的时候&#xff0c;有些情况下我们可能会想要更换自己的输入法&#xff0c;但是还是有很多小伙伴不知道应该怎么操作。那么对于这个问题小编觉得我们可以通过电脑键盘上面的快捷键来进行操作&#xff0c;也可以使用鼠标在任务栏唤出相关的设置选项即…

记一次生成唯一ID的问题

之前一直用new Date().getTime()作为ID一直没出现啥问题&#xff0c;但是在测试环境被测试人员发现问题了&#xff0c;最终定位到是一个循环体中多次循环所取到的ID竟然是一样的&#xff01;也就是说系统在1ms之内做了好几次sql操作&#xff01;好吧&#xff0c;万万没想到。。…

2345浏览器如何启用过滤弹窗广告

2345浏览器是一款非常便捷的浏览服务软件&#xff0c;有很多用户都会使用手机浏览更多的信息&#xff0c;随时都可以享受便捷的服务&#xff0c;使用过的用户都会知道&#xff0c;浏览器的资讯会有广告&#xff0c;其实在看视频的时候也会有广告&#xff0c;那么要怎么过滤弹窗…

Jersey中ContainerRequestFilter的使用

手头上有对所有请求做权限认证的需求&#xff0c;必须要在执行rest方法之前判断用户是否是登录状态&#xff0c;也就是要判断session存不存在&#xff0c;这里使用ContainerRequestFilter&#xff0c;从名字上也能看出来它是一个过滤器&#xff0c;会将所有请求拦截下来&#x…

手机腾讯视频软件如何开启护眼功能

今天给大家简单介绍一下&#xff0c;在手机腾讯视频中&#xff0c;如何开启护眼功能&#xff0c;具体步骤如下&#xff1a; 1、首先&#xff0c;打开手机苏宁易购app; 手机腾讯视频软件如何开启护眼功能 2、进入软件时先点击【跳过】广告页面&#xff0c;如图 手机腾讯视频…

XML解析-Dom4j的DOM解析方式更新XML

Dom4j工具,是非官方的&#xff0c;不在jdk中。 使用步骤&#xff1a; 1&#xff09;导入dom4j的核心包。 dom4j-1.6.1.jar 2&#xff09;编写Dom4j读取xml文件的代码 1、更新XML 1.1、写出内容到xml文档 package com.rk.xml.g_dom4j_write;import java.io.File; import java.io…

爱奇艺如何设置最小化显示在托盘

相信很多朋友都有在使用爱奇艺&#xff0c;那么大家对食物爱奇艺的过程当中如何设置最小化显示在托盘呢?关于这个问题小编就和大家分享一下我的经验&#xff0c;希望能够帮助到大家。 爱奇艺会员活动2020_爱奇艺如何设置最小化显示在托盘 1、首先点击电脑桌面中的爱奇艺&…

傲游浏览器怎么看网页源代码 网页源代码查看方法简述

网页源代码&#xff0c;顾名思义就是指在网页制作过程中需要用到的一些特殊的“语言”&#xff0c;设计人员向通过对这些“语言”进行组织编排制作出网页&#xff0c;再由浏览器进行“翻译”后才会出现用户最终看到的效果。那么&#xff0c;在傲游浏览器中该怎么看网页源代码呢…

Qt前端技术:5.QSS

这个是表示QFrame中的pushButton中的子类和它子类的子类都将背景变为red 写成大于的时候表示只有直接的子类对象才会变 这个图中的QGroupBox和QPushButton都是QFrame的直接的子类 这个中的QGroupBox是QFrame的直接的子类但是QPushButton 是QGroupBox的子类&#xff0c;QPushB…

Spring定时任务的几种实现

近日项目开发中需要执行一些定时任务&#xff0c;比如需要在每天凌晨时候&#xff0c;分析一次前一天的日志信息&#xff0c;借此机会整理了一下定时任务的几种实现方式&#xff0c;由于项目采用spring框架&#xff0c;所以我都将结合 spring框架来介绍。 一&#xff0e;分类 从…

搜狗高速浏览器主页被篡改怎么办 搜狗浏览器中恢复被篡改主页的方法

搜狗浏览器是一款还不错的浏览器&#xff0c;我们在使用搜狗浏览器的过程中发现主页被篡改怎么办呢?接下来我们一起往下看看搜狗浏览器中恢复被篡改主页的方法吧。 方法步骤 1、首先打开我的搜狗浏览器发现我的主页已经被篡改成hao123的主页了; 搜狗高速浏览器主页被篡改怎…

解决quartz的job无法注入spring对象

一般情况下&#xff0c;quartz的job中使用autowired注解注入的对象为空&#xff0c;这时候我们就要使用spring-quartz提供的AdaptableJobFactory类。 自定义一个类: [java] view plaincopy public class JobFactory extends AdaptableJobFactory { Autowired …

谷歌Chrome浏览器如何开启无痕模式 Chrome浏览器无痕模式开启方法

在访问一些特殊网站时&#xff0c;许多人都会开启浏览器自带的无痕模式&#xff0c;以免除一些不必要的麻烦。那么&#xff0c;谷歌Chrome浏览器要如何开启无痕模式呢?不清楚操作方法的朋友&#xff0c;不妨参考一下小编分享的Chrome浏览器无痕模式开启方法。 方法步骤 点击…

搜狗浏览器怎么实现图标旋转 搜狗浏览器实现图标旋转的方法

搜狗浏览器是一款大家经常使用的浏览器&#xff0c;你到知道搜狗浏览器中有一个非常有趣的功能就是图标旋转&#xff0c;那你知道在搜狗浏览器是怎么实现图标旋转的吗?接下来我们呢一起往下看看搜狗浏览器实现图标旋转的方法吧。 方法步骤 1、打开搜狗浏览器动态图标插件的下…

AngularJS+Jersey下载excel

AngularJS代码&#xff1a; $scope.testDownload function () { $http.post("rest/excel/down", $scope.req, {responseType:arraybuffer}).success(function (data) { varblob new Blob([data], {type:"application/vnd.ms-excel"}); varfileName "…

火狐浏览器摄像头权限怎么开启 火狐浏览器摄像头权限开启的方法

火狐浏览器是我们大家经常使用的浏览器之一&#xff0c;在使用这款浏览器的过程有时候需要使用到摄像头&#xff0c;那你知道火狐浏览器摄像头权限怎么开启的吗?接下来我们一起往下看看火狐浏览器摄像头权限开启的方法吧。 方法步骤 1、打开火狐浏览器&#xff0c;点击右上角…

Activiti 基础概念

1、ProcessInstance 与ProcessDefinition 流程实例&#xff08;ProcessInstance&#xff09;和流程定义&#xff08;ProcessDefinition&#xff09;的关系&#xff0c;与类和实例对象的关系有点像&#xff0c;ProcessDefinition是整个流程步骤的说明而ProcessInstance就是指流程…

优酷视频如何修改账号密码?

一.pc端&#xff1a;您能够立即登陆【点一下这儿】密码重置哦~或是能够按下列方式实际操作哦。 1.登陆本站&#xff0c;网页页面最上边【登陆】功能键&#xff0c;登陆界面右下角点一下【密码忘了】。 优酷视频如何修改账号密码&#xff1f; 2.请输入的手机上/电子邮箱&…