AngularJS 关于 $http 服务 then catch finally 的使用

/**
 * AngularJS 关于 $http 服务 then catch finally 的使用
 * @author Anker 2016.11.23
 */
// AngularJS $http 服务参考文档 https://docs.angularjs.org/api/ng/service/$http
// AngularJS $q 服务参考文档 https://docs.angularjs.org/api/ng/service/$q
// 原生JS Promise 服务参考文档 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
// $http.get() 实现 $q 服务 https://www.peterbe.com/plog/promises-with-$http
app.controller('MainCtrl', function($scope, $http) {
    // $http().then(successCallback[,errorCallback][,notifyCallback]).catch().finally();
    $http({
        method: '', // get | post
        url: '',
        params : {}, // get
        data : {} // post
    })
    // 当请求成功时
    .then(function (successCallback) {
        // 响应主体处理代码
        (function (response) {
            console.log('Got successCallback: ',response);
        })(successCallback.data);
    })
    // 当请求错误时
    .catch(function (errorCallback) {
        // 响应主体处理代码
        (function (response) {
            console.log('Got errorCallback: ',response);
        })(errorCallback.data);
    })
    // 当请求完成时 不管结果如何
    .finally(function(callback, notifyCallback) {
        console.log('Got notification: ',callback);
    });
    // successCallback 以及 errorCallback 响应对象具有这些属性:
    // data – {string|Object} – 响应体.
    // status – {number} – 响应的HTTP状态码.
    // headers – {function([headerName])} – 获取 header 的方法.
    // config – {Object} – 用于生成请求的配置对象.
    // statusText – {string} – 响应的HTTP状态文本.
})

AngluarJS 数据绑定

$watch() 监视数据改变
$apply()  通知某些数据改变了
$digest() 处理所有当前作用域和子作用域监视的数据

过滤器

示例需求:{{ user.name | displayName | limitTo:40 }}
改进示例:{{ user.name | displayName }}
// 注入与当前模块关联的过滤器可以通过依赖注入作为 $filter 访问
app.filter(‘displayName’, function($filter){

return function(name){

return $filter(‘limitTo’)(name.first + ” ”  + name.last, 40)

}

})

AngluarJS 架构之控制器、服务、指令

控制器

1.作用域继承
$scope 可以访问上级 $scope
 
2.事件传输
$scope.$on(‘Event’, function(){})   // 监听指定的事件
$scope.$emit(‘Event’, function(){}) // 注册监听事件,向祖作用域传播
$scope.$broadcast(‘Event’, function(){}) // 注册监听事件,向子作用域传播
 
3.ModelServier 模式
// 创建 Servier 实例
app.factory(‘nameService’, function($timeout){

// $timeout ($http)服务将在页面根作用域调用$apply()

$timeout(function(){ }, 500)

})
// 使用 Servier 实例 , 注入服务
app.constroller(‘nameConstroller’, function($scope, nameService){ })

服务

1.依赖其他服务的服务
// 创建 Servier 实例,注入服务
app.factory(‘twoService’, function(oneService){ })
2.事件发射器模块
even-mitter.js  是独立于作用域的,方法为 .on() 和 .emit()
 

指令

angular.module(‘app’).directive(‘myDirective’,function(){

return {}

})
官方文档

关于 Angularjs 使用

angular-route.js 路由 以及 Directive(指令)使用

  1. var app = angular.module(‘myApp’, [‘ngRoute’],function ($compileProvider) {
  2.     $compileProvider.directive(‘ngIcheck’, function($compile) {
  3.         return {
  4.             restrict : ‘A’,
  5.             require : ‘?ngModel’,
  6.             link : function($scope, $element, $attrs, $ngModel) {
  7.                 console.log($element);
  8.             },
  9.         };
  10.     });
  11. });
  12. //路由
  13. function emailRouteConfig($routeProvider) {
  14.     $routeProvider.
  15.     when(‘/home’, {
  16.         controller: ListController,
  17.         templateUrl: ‘down_list.htm’
  18.     }).
  19.     when(‘/view/:id’, {
  20.     //controller: DetailController,
  21.         templateUrl: ‘detail.html’
  22.     }).
  23.     otherwise({
  24.         redirectTo: ‘/’
  25.     });
  26. }
  27. app.config(emailRouteConfig);//配置我们的路由