Monthly Archives: 三月 2015

Angular.js权威教程阅读笔记(第13~17章)

Angular.js权威教程阅读笔记

13.依赖注入

三种方式获得对其依赖的控制权 * 在内部创建依赖 * 通过全局变量进行引用 * 在需要的地方通过参数进行传递

  • NG使用$injetor 来管理依赖关系
    • 负责实例化ng中所有的组件,包括应用的模块,指令和控制器
  • angular.module(‘myApp’, [])
  • .factory(‘greeter’, function(){
  •     return {
  •         greet: function(msg){ alert(msg);}
  •     };
  • }).controller(‘MyController’, function($scope,greeter){
  •     $scope.sayHello = function(){
  •         greeter.greet(‘world’);
  •     };
  • });
  • Ng的处理过程
    //使用注入器加载应用
    var injector = angular.injector(['ng','myApp']);
    //加载$controller服务
    var scope = injector.get(‘$rootScope’).$new();
    //加载控制器,并传入作用域
    var MyController = $controller(‘MyController’, {$scope: scope});
  • 推断式注入声明
    没有明确的声明,ng会假定参数名就是依赖的名称.

    • 该规则只适用于未压缩的代码
  • 显式注入声明
    • 不妨碍压缩
  • 行内注入声明
    • 可以随时使用行内注入,推荐做法
  • angular.module(‘myApp’)
  • .controller(‘MyController’, [‘$scope’, ‘greeter’, function($scope,greeter){
  •     // use $scope,greeter
  • }]);
  • $injector API
    • annotate()
      返回一个由服务名组成的数组,这些服务会在实例化是被注入到目标函数中
    • get()
      返回一个服务的实例
    • has()
      返回一个boolern,是否拥有该服务
    • instantiate()
      创建实例
    • invoke()
      调用方法
  • ngMin
    是个工具,减少定义依赖关系所需的工作,是一个预压缩工具
    例如,它会将代码:
    angular.module(‘myApp’,[])
  • .directive(‘myDirective’, function($http){
  • })
  • .controller(‘IndexController’, function($scope,$q){
  • });
  • 转化成:
    angular.module(‘myApp’,[])
  • .directive(‘myDirective’, [‘$http’, function($http){
  • }])
  • .controller(‘IndexController’, [‘$scope’,'$q’, function($scope,$q){
  • }]);

 

14.服务

控制器只会在需要时才被实例化,不再需要时就回被销毁

服务提供了一种能在应用的整个生命周期内保持数据的方法,能够在控制器之间进行通信,并且能保证数据的一致性.

服务是一个单例对象,被$injector实例化,是延迟加载(按需)

Ng中内置一些服务,使用方式是统一的

  • 创建服务
    • 使用factory 是最常见,灵活的方式
  • angular.module(‘myApp.services’, [])
  • .factory(‘githubService’, function(){
  •     var service = {};
  •     return service;
  • });
  • 创建服务时的设置项
    创建服务的方式

    • facttory(name, fn)
    • service(name,constructor)
  • var person = function($http){
  •     this.getName = function(){
  •         return $http({method:’GET’, url:’xxx/xxx’});
  •     };
  • };
  • angular.service(‘personService’, person);
    • constant()
      可以将一个已经存在的变量值注册为服务
      用来配置数据
      angular.module(‘myApp’).constant(‘apiKey’,’123123123′);
    • angular.module(‘myApp’)
    • .controller(‘MyController’,function($scope,apiKey){
    • });
    • value()
      用来注册服务对象或者函数
    • provider()
      • **如果希望在config()中可以对服务进行配置,必须使用provider()来定义服务

15.通信:XHR和服务器通信

  • $http
    只是简单封装了XMLHttpRequest对象,返回一个promise对象,具有success()和error()2个方法

    • $http的快捷方法
      1. get()
      2. delete()
      3. head()
      4. jsonp()
      5. post()
      6. put()
  • $http参数对象
    • method 字符串 ‘GET’, ‘POST’
    • url 字符串
    • params map字符串或者对象, 会被转换成查询字符串
    • data post时使用
    • headers
    • xsrfHeaderName
    • xsrfCookieName
    • transformRequest
    • transformResponse
    • cache
    • timeout
    • withCredentials
    • responseType 会在请求中设置XMLHttpRequestResponseType属性
      1. “”
      2. “arraybuffer”
      3. “blob”
      4. “document”
      5. “json”
      6. “text”
  • $http的响应对象
    包含四个属性

    • data 数据
    • status http状态码
    • headers 响应头
    • config 原始请求数据对象
  • 缓存HTTP请求
    请求缓存在$cacheFactory
    LRU(least recenlty used ,最近最少使用)缓存
    var lru = $cacheFactory(‘lru’,{
  •     capacity:20  //  缓存池大小
  • });
  • $http.get(‘/api/user.json,{cache:lru})
  • .success(function(data){});
  • 拦截器
    提供了一个从全局层面对响应进行处理的途径
    核心是服务工厂,通过向$httpProvider.interceptors数组中添加服务工厂,在$httpProvider中进行注册

    共有4中拦截器

    • request
      通过$http设置对象来对请求拦截器进行调用.
    • response
      通过$http设置
    • requestError
    • responseError
  • 使用拦截器
    //创建拦截器
  • angular.module(‘myApp’)
  • .factory(‘myInterceptor’, function($q){
  •     var interceptor = {
  •         ‘request’: function(config){
  •             return config; // or   $q.when(config);
  •         },
  •         ‘requestError’: function(rejection){
  •             return rejection;
  •             // return $q.reject(rejection);
  •         },
  •         ‘responseError’: function(rejection){
  •             return rejection;
  •         }
  •     };
  •     return interceptor;
  • });
  • //使用拦截器å
  • angular.module(‘myApp’)
  • .config(function($httpProvider){
  •     $httpProvider.interceptors.push(‘myInterceptor’);
  • });
  • $httpProvider
    可以在config()中对请求进行修改
  • $resource
    创建一个资源对象

    • 需要服务器支持RESTful
    • 是一个可选模块
  • Restangular
    专门用来从外部读取数据的ng服务

16.XHR实践

解决跨域问题:

  • JSONP
    原理是通过<script>标签 发起一个GET请求来取代XHR请求,jsonp生成一个script标签并插入到DOM中,然后浏览器回接管并向src的地址发起请求。响应结果会被包装成一个js函数,并有该请求所对应的回调函数调用
    $http提供了jsonp方法
    $http.jsonp(‘http://xxx.xom/xx’).success(function(data){
  • });
  • CORS
    CORS规范简单的扩展了标准的XHR对象,以允许js发送跨域的xhr请求,通过预检查来确认是有有权限想目标服务器发起请求
    使用

    1. 设置
      angular.module(‘myApp’,[])
    2. .config(function($httpProvider){
    3.     $httpProvider.defaults.useXDomain = true;
    4.     delete $httpProvider.defaults.headers.common['X-Requested-With'];
    5. });
    6. 服务端cors支持
      在响应中加入如下请求头

      • Access-Control-Allow-Origin
      • Access-Control-Allow-Credentials
    7. 简单请求
      • Head
      • Get
      • Post
    8. 服务器代理
  • 使用NG进行身份验证
    略过,配合过滤器
  • 和MongoDB通信
    略过

17.Promise

promise是一种用异步方式处理值的方法。可以看成远程对象的一个代理

 

使用promise的目的:获得功能组合喝错误冒泡能力的同时,保持代码异步运行的的能力

 

自带一些约定:

 

*   只有一个resolve或者reject会被调用

*   如果promise被执行or被拒绝,依赖于他们的处理程序仍然回被调用

*   总是异步调用

  • ng中的promise
    • 使用$q 创建promise
  • 示例:
    angular.module(‘myApp’[])
  • .factory(‘GitHubService’, [‘$q’,'$http’, function($q,$http){
  •     var getPullRequests = function(){
  •         var defered = $q.defer();
  •         $http.get(‘https//api.github.com’)
  •         .success(function(data){
  •             defered.resolve(data);
  •         }).error(function(reson){
  •             defered.reject(resion);
  •         });
  •         return defered.promise;
  •     };
  •     return {
  •         getPullRequest: getpullRequests
  •     };
  • }]);
  • 链式请求
    • all(promises)
      把多个promises合并成一个promises
    • defer()
      创建一个deferred对象
    • reject(reason)
      返回因某些原因拒绝的promise
    • when(value)
      包装成一个$q.promise

Angular.js权威教程阅读笔记(第6~12章)

Angular.js权威教程阅读笔记(第6~12章)

6.表达式

  • 解析AngularJs表达式
    • 在$digest循环中自动解析表达式
    • 手动时,使用$parse

  •  
  • 插值字符串
    • 更新文本字符串
    • 使用$interpolate服务
    • 例子
    • 修改{{ }}语法标记
      • startSymbol()
      • endSymbol()

  • [例子](http://jsbin.com/ivuJEXI/1/edit)

7.过滤器

  • {{ | filter }} 内部通过 | 符号来调用过滤器

对字符串转换成大写:

{{name | uppercase }}

 

使用方式2:

$scope.name = $filter(‘lowercase’)(‘Ari’);

  • 内置过滤器
    • currency
    • date
    • litmeTo 正数:从左往右, 复数: 从右往左
    • orderBy 排序
    • loercase
    • number
    • uppercase
  • 自定义过滤器
  • 示例:

  •  
  • 表单验证
    • 表单要有name属性
    • input验证选项
      • 必填项 required
      • 最小长度 ng-minlength=”5″
      • 最大长度 ng-maxlength=”10″
      • 正则 ng-pattern=”[a-zA-Z]“
      • 邮箱 type=”email”
      • URL type=”url”
      • 自定义验证 使用指令
      • 表单控制
    •     未修改的表单      formName.inputName.$pristine
    •     修改过的            formName.inputName.$dirty
    •     合法的           formName.inputName.$valid
    •     错误              formName.inputName.$error
  • $parsers
    • 交互时,controller中的$setViewValue()方法被调用时,$parsers数组中的函数回顺序被调用,并且执行结果回传递到下一个函数.
  • $formatters

  •  

8.指令简介

  • 指令:自定义HTML元素和属性
  • 定义指令:

 

  • 指令类型
    • E 元素
    • A 属性
    • C 类
    • M 注释
  • 表达式
    <my-directive=”something”></my-directive>
  • <div my-directive=”something”></div>
  • <div></div>
  • 作用域,示例
  • 参数 示例

     

9.内置指令

  • 布尔属性
    • ng-disabled
    • ng-readonly
    • ng-checked
    • ng-selected
  • 类布尔属性
    • ng-href
    • ng-src
  • 在指令中使用子作用域
    ng-app和ng-controller是特殊指令,回修改嵌套在他们内部的指令的作用域 

    • ng-app
      $rootScope是作用域的起始点,任何嵌套在ng-app内的指令都会继承它
      js中通过run()来访问$rootScope 示例
      angular.module(‘myApp’,[]).run(function($rootScope){
    •         $rootScope.someProperty = ‘Hello world’;
    •     });
    • ng-controller
      是为嵌套在其中的指令创建一个子作用域
      $scope的职责是承载DOM中的指令所共享的操作和模型 

      • 操作指$scope上标准的js方法
      • 模型指的是$scope上的瞬时数据对象
      • 由于原型继承的关系,修改父级对象中的同名属性会同时修改子对象中的同名属性的值,但反之则不行 示例 JavaScript对象要么是值复制要么是引用复制,字符串、数字和布尔型变量是’值复制’。 数组、对象和函数则是’引用复制’.
    • 含有该作用域特性的指令有:
      • ng-include
      • ng-switch
      • ng-repeat
      • ng-view
      • ng-if
      • ng-controller
    • ng-include
      加载、编译并包含外部HTML片段到当前应用中. 

      • 模板的URL被限制在与应用文档相同的域和协议下
      • 同元素上指定了ng-controller,则不再创建新的子作用域
    • ng-swith
      和ng-switch-when, on=”propertyName”一起使用 示例
      <input type=”text” ng-model=”person.name”/>
    • <div ng-switch on=”person.name”>
    •     <p ng-switch-default>And the winner is </p>
    •     <h1 ng-switch-when=”Ari”>{{person.name}}</h1>
    • </div>
    • ng-view
    • ng-if
      生成或者移除一个DOM元素
      区别于ng-show,ng-hide,不是同过css来控制元素隐藏,而是真正的生成或者移除节点
    • ng-repead
      • $index
      • $first
      • $middle
      • $last
      • $even
      • $odd
    • ng-init
      在指令被调用时设置内部作用域的出事状态
    • ng-bind
      功能类似 {{ }} 

      • 可以决绝未渲染元素闪烁问题
    • <p ng-bind=”person.name”></p>
    • ng-cloak
      解决未渲染元素闪烁问题
      <p ng-cloak>{{person.name}}</p>
    • ng-bind-template
      用来绑定多个表达式
      <div ng-bind-template=”{{name}} – {{message}}”></div>
    • ng-model
    • ng-show/ng-hide
    • ng-change
    • ng-form
      允许表单嵌套 

      • ng-submit
      • ng-click
    • ng-select
    • ng-class

10.指令详解

  • 在特定DOM元素上原型的函数,指令可以扩展这个元素的功能.
  • 创建指令
    • 使用directive()
      2个参数 

      • name 指令名称
      • factory_function 函数
        • 返回一个对象,内部定义指令的全部行为
    • 指令返回值定义

  •  
    • 参数说明
      • restrict 生命类型
        • E-元素,A-属性,C-类名,M-注释
      • priority 优先级
        • 默认是0
      • terminal 停止运行比本指令优先级低的指令
      • template 模板
        • 必须有个根节点
      • templateUrl 模板URL
      • replace 是否保留原来元素
      • scope 作用域
        • $rootScope 在ng-app时被创建
        • 默认是false
        • 嵌套子指令能访问父级DOM元素对应的作用域的能力
        • 绑定策略
          • @ 本地作用域同DOM属性的值进行绑定
          • = 双向绑定
          • & 父级作用域
        • HTML:
        • <input type=”text” ng-model=”mail”/>
        • <div scope-example ng-model=”mail” on-send=”sendMail(email)” from-name=”xxx@xxx.com” />
        • JS:
        • scope:{
        •     ngModel: ‘=’,
        •     onSend: ‘&’,
        •     fromName: ‘@’
        • }
      • transclude 嵌入函数
        • 默认false
      • controller 内联控制器
        • link 函数可以将指令互相隔离开来,controller则定义可服用的行为
      • require
        • 会改变查找控制器时的行为
        • ? 未找到控制器,会将null作为参数传给link函数的第四个参数
        • ^ 在上游的指令链查找控制器
          • ?^
        • 没有前缀,自身查找,没有则抛出异常
      • compile
        • compile和link选项是互斥的
  • NG的生命周期
    • 编译
  • 遍历整个HTML,处理指令. 调用HTML文档根部的指令时,遍历其中所有的模板。
    • 链接
  • ngModel
    angular.module(‘myApp’,[]).directive(‘myDirective’, function(){
  •     return {
  •         require: ‘?ngModel’,
  •         link: function(){
  •             if(!ngModel) return ;
  •             // 可以获取ngModelController 的实例
  •         }
  •     };
  • });
  • 如果不设置require, ngModelController就不会被注入到指令中
    • $setViewValue() 修改视图值
  • 自定义渲染
    • $render()

11.AngularJS模块加载

NG模块可以在加载和执行之前对其自身进行配置。

  • 配置 .config() 函数
    • 唯一能在启动前进行修改的部分
  • angular.module(‘myApp’,[]).config(function(){
  •     // your code
  • });
    • 内部代码会被顺序执行,就是说无法注入一个尚未注册的提供者
    • constant是个例外,总会在所有配置块之前执行
  • 运行 .run()函数
    • 区别于配置块,运行块在注入器创建之后被执行, 是NG应用中第一个被执行的方法
    • 很难进行单元测试,和应用本身高度耦合
    • 通常用来注册全局的事件监听器

12.多重视图和路由

$bower install–save angular -route

ngRoute 模块

  • 布局模板
    • ng-view
      优先级为1000的终极指令
      运行规则 

      • 每次触发$routeChangeSuccess事件,视图都会更新
      • 若模板同当前路由相关联
        • 创建新的作用域
        • 移除上一个视图,上一个作用域也会被清除
        • 将新的作用域同当前模板关联在一起
        • 若路由中有相关的定义,就把对应的控制器同当前作用域关联起来
        • 触发$viewContentLoaded事件
        • 调用onload函数
  • 路由
    NG提供了when 和otherwise 方法来定义路由
    angular.module(‘myApp’,[]).config(['$routeProvider'], function($routeProvider){
  •     $routeProvider.when(‘/’, {
  •         templateUrl: ‘views/home.html’,
  •         controller: ‘HomeController’
  •     });
  • });
    • 路径会跟$location.path进行匹配,也就是当前URL的路径.
    • 参数需要以冒号开头 (:name),使用$routeParams读取参数

  •  
    • reloadOnSearch
      • 默认为true,当$location.search()发生变化回重新记在路由,设为false则不会,适用于路由嵌套,原地分页
    • $routeParams
      解析出路由中的参数
      $routeProvider.when(‘/inbox/:name’, {
    •     controller: ‘InboxController’,
    •     templateUrl: ‘views/inbox.html’
    • });
    • 注意,控制器中需要引入$routeParams
  • $location服务
    用以解析地址栏中的URL,也提供了修改路径喝处理各种形式导航的能力 

    • 对window.location对象尽兴更优雅的封装
    • 没有刷新整个页面的能力, 使用$window.location对象
  • 属性&方法
    • $location.path() 获取或者设置跳转到URL
    • replace() 跳转后不能点击后退按钮
  • $location.path(‘/home’).replace();
    • hash() 获取URL中的hash片段
    • host()
    • port()
    • protocol()
    • search() 获取查询字符串
    • url()
  • 路由模式
    • 标签模式(默认)
  • 手动指定
  • angular.module(‘myApp’, ['ngRoute'])
  • .config([‘$locationProvider’, function($locationProvider){
  •     $locationProvider.html5Mode(false);
  •     $locationProvider.hashPrefix(‘!’);
  • }]);
    • HTML5模式
      • RESTful格式URL
      • 会根据浏览器能力,重写链接
      • 永远不要使用相对路径,除非在根目录中启动的。
    • 路由事件
      使用$rootScope来监听 

      • $routeChangeStart
    • angular.module(‘myApp’,[])
    • .run([‘$rootScope’, ‘$location’, function($rootScope,$location){
    •     $rootScope.$on(‘$routeChangeStart’, function(evt,next,current){
    •         // next 下一个url
    •         //current 当前URL
    •     });
    • }]);
      • $routeChangeSuccess
      • $routeChangeError
      • $routeUpdate
    • SEO
      meta加入:
      <meta name=”fragment” content=”!” />

git常用命令

放弃window os 平台转向MAC os 总是又很多不适应,今天体验了下纯命令使用git,特地把用的命令收集起来,以备后用。

git命令

教程

参考

  • 初次获取项目
    git clone http://192.168.86.231:6789/OA.git
  • 创建分支
    git checkout -b dev origin/dev
  • 获取最新
    git pull
  • 添加文件
    git add filename
  • 提交本地
    git commit -a -m “message”
  • 更新
    git pull orgin 远程分支:本地分支
    git.exe pull -v –no-rebase –progress “origin” dev
  • 推送
    git push origin 本地分支:远程分支
    git.exe push –progress “origin” yuan:dev
  • 为分支设置关联
    git branch –set-upstream 本地分支 origin/远程分支
  • 合并
    git merge yuan
    合并yuan分支到当前分支