学习要点： 控制器模块化指令模块化过滤器模块化服务模块化定义值模块化使用模块工作第一步：创建一个模块 // function : define module named exampleApp // param detail : // param one : module name // param two : relay on modules collection // parms three : config information var myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Di...
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理. 处理的方式有两种,...
angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]);fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以后就执行.比如当页面被渲染完成后. invokeApply: 布尔值.是否需要进...
1.配置使用ui-router 1.1导入js文件 需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。 <script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>1.2注入angular模块 var app = angular.module(myApp, [ui.router]);注入的名字“ui.router”，可在angular-ui-router.min.js里找到，...
ng-route模块中的when()和ui-route的state()都提供了resolve属性。 为什么需要使用resolve？ 当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。 resolve是干嘛...
前言 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 通过 .directive() 函数来添加自定义的指令。 调用自定义指令时，需要在HTMl 元素上添加自定义指令名。 自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。 在html页面调用该指令时需要以 - 分割，如： my-directive。示例代码： <body ng-app="myApp"><my-directive></my-directive><script>var app = angular.module...
最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用，现在要好得多了。在这里就记录下ui-router使用。 就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则来设置路由名，好处是容易看懂，也便于管理。 我这里是以总state到模块state再到下一层模块state（再到下一层模块state）最后到详细页面的state来分层。 首先我们先定义一个总的state如： .state(home, {url: /...
最近一直在学习angular4，它确实比以前有了很大的变化和改进，好多地方也不是那么容易就能理解，好在官方的文档和例子是中文，对英文不太好的还是有很大帮助去学习。 官方地址：https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由（router）机制是离不开的，并且好多地方都要用到。 首先路由配置Route： import { NgModule } from @angular/core; import { RouterModule, Routes } f...
前言 本文主要介绍的是关于利用Jasmine对Angular单元测试的相关内容，以下是我假定那些极少或压根没写单元测试的人准备的，因此，会白话解释诸多概念性问题，同时会结合 Jasmine 与之对应的方法进行讲解。 一、概念 Test Suite 测试套件，哪怕一个简单的类，也会有若干的测试用例，因此将这些测试用例集合在一个分类下就叫Test Suite。 而在 Jasmine 就是使用 describe 全局函数来表示，它的第一个字符串参数用来表示Suite的名称或...
Web 开发中，除了数据操作之外，最频繁的就是发起和处理各种 HTTP 请求了，加上 HTTP 请求又是异步的，如果在每个请求中来单独捕获各种常规错误，处理各类自定义错误，那将会有大量的功能类似的代码，或者使用丑陋的方法在每个请求中调用某几个自定义的函数来处理。这两种方法基本都不是靠谱之选。好在 AngularJS 提供了 Interceptors ——拦截战斗机——来对应用内所有的 XHR 请求进行统一处理。 主要功能 Interceptors 有两个处理...
之前关于angular ui-grid过滤器设置，最近需要回顾，就顺便发到随笔上了var app = angular.module(app, [ui.grid, ui.grid.edit]); app.controller(MainCtrl, [$scope, $http, function ($scope, $http) { $scope.gridOptions = { columnDefs: [ { field: name }, { field: amount, name: Number, cellFilter: fractionFilter }, { field: amount, name: Currency, cellFilter: currencyFilter:this } ] }; $http.get(data.json) ....
基础知识Angular CLI 基本使用安装 Angular CLI (可选)npm install -g @angular/cli创建新的项目ng new PROJECT-NAME启动本地服务器cd PROJECT-NAME ng serveAngular Forms 简介Angular 4 中有两种表单： Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )Reactive Forms - 响应式表单本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。 第一节 - 创...
在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。 而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性 这里有三种方法： 第一种：通过数据的双向绑定（不推荐） 第二种：通过对象数组 第三种：通过key/value( 推荐 ) 下面简单说下这三种： 第一种：通过数据的双向绑定 实现方式： function changeClass(){$scope.className = "change2"; }<div class="{{...
以前利用webqq的写过一个自动发消息的脚本，由于那时webqq还直接使用类似jQuery操作DOM的技术，所以脚本很简单就可以实现。 现如今很多web应用都开始使用AngularJS，MVVM导致的就是无法操作dom而去直接改变数据。所以面对网页版微信，要实现一个自动发送的脚本，就无法再用以前那套DOM的思路了。 要修改AngularJS中的数据，首先就要获取scope。其实获取scope的方法很简单。 由于大部分Angular项目需要使用jQuery作为补充。可以在jQ...
我们首先看下面的例子： <!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <hello></hello> <hello></hello> <hello></hello> <hello></hello> </body> <script src="framework/angular-1.3.0.14/angular.js">...