angularJS总结

Angularjs组成部分：
       1、 启动  （startUp）   :--展示 “hello world!”
       2、 执行期（runtime）   :--AngularJs执行期
       3、 作用域（scope）     :--视图和控制器的集合区
       4、 控制器（controller）:--应用的行为
       5、 模型  （model）     :--应用的数据
       6、 视图  （view）      :--用户体验页面
       7、 指令  （directives）:--扩展html语法
       8、 过滤器（filters）   :--数据本地化
       9、 注入器（injector）  :--聚合创建的应用
       10、模块  （module）    :--配置注入器
       11、$      (namespace)  :--Angular的命名空间
  1、启动(startUp)和执行期(runtime)：angular初始化：包括自动初始化和手动初始化，不建议使用手动初始化，AngularJS的编译过程：遍历DOM并收集所有的相关指令，生成一个链接函数。链接：给指令绑定一个作用域生成一个动态视图；
  2、作用域(scope)：作用域是视图和控制器的集合应用，是数据绑定的关键因素，在项目开发中尤为重要，项目实例如下：
   .controller('localStorCtrl',function($scope,$http,$window,locals){
//    alert(1);
//    //存储数据
//    $scope.currentUser = null;
     locals.set("username","wangwu");
    // locals.set("password",user.password);
    $scope.currentUser = locals.get("username","");
    
    //读取数据
    // console.log(locals.get("username",""));
    
//    $window.localStorage.name = 12;
//    console.log($window.localStorage.name);
//     localStorage.useNamesss="wangwu";
//     console.log(localStorage.useNamesss);
    
});
    .factory('locals',['$window',function($window){
    return {
        //存储单个属性：
        set : function(key,value){
            $window.localStorage[key] = value;
        },
        //读取单个属性
        get : function(key,defaultValue){
            return $window.localStorage[key] || defaultValue;
        },
        //存储对象，JSON格式
        setObject : function(key,value){
            $window.localStorage[key] = JSON.stringify(value);
        },
        //读取对象
        getObject : function(key){
            return JSON.parse($window.localStorage[key] || '{}');
        }
    }
}]);
  3、控制器（controllers）:视图背后的控制代码就是控制器，把模型和回调方法一起发送到“视图”，多个视图对应同一个控制器，实例如上controller
  4、指令（directives）编辑:
   var appModule = angular.module('app', []);
    appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '"<"div">"Hi there "<"span ng-transclude">""<"/span">""<"/div">"',
        transclude: true
    };
});

Html:
   <html ng-app='app'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <hello>
            <br/>
            <span>原始的内容，</span><br/>
            <span>还会在这里。</span>
        </hello>
        <hello>
        </hello>
    </body>

    <script src="js/angular.min.js"></script>
</html>
  5、过滤器（filters）：主要是接收输入，通过通过某种规则来处理，最后返回一个结果。比如数据本地化等内置九大过滤器，还可自定义过滤器，内置过滤器：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
  在模板使用：{{ expression | filter }}数据进行格式化
  在指令中对数组进行过滤，然后再输出:<span ng-repeat="a in array | filter ">
  在控制器中使用一个和多个过滤器：
.controller('testC',function($scope,currencyFilter){
    $scope.num = currencyFilter(123534);  
}
  .controller('testC',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date());  
}
  自定义过滤器：实例，返回一个数组中偶数值得下标
.filter('odditems',function(){
    return function(inputArray){
        var array = [];
        for(var i=0;i<inputArray.length;i++){
            if(i%2 ==0){
                array.push(inputArray[i]);
            }
        }
        return array;
    }
});
  6、$provide服务负责创建服务（service）的，服务会被叫做provider的东西来定义，例如：定义一个greeting的新provider,这样就可以把greeting变量注入到任何函数中，可以用$get函数来返回这个服务的一个实例
.config(function($provide) {
  $provide.provider('greeting', function() {
    this.$get = function() {
    return function(name) {
      alert("Hello, " + name);
    };
   };
  });
});  
//也可以用以下形式写，两种功能作用相同：
.config(function($provide) {
  $provide.factory('greeting', function() {
return function(name) {
  alert("Hello, " + name);
};
  });
});  
 
//直接运行
.controller('MainController', function($scope, greeting) {
  $scope.onClick = function() {
greeting('Ford Prefect');
  };
});

//开始注入($injector)：通过调用get函数来获得任何一个已经被定义过的服务的实例，比如：greeting()；

  var greeting = $injector.get('greeting');
  greeting('Ford Prefect');

  //将服务注入到函数中：invoke()方法：

  var myFunction = function(greeting) {
  greeting('Ford Prefect');
};
$injector.invoke(myFunction);  



项目中解决session时效和失效的技术问题：

//session时效
    //定义session改变时所用到的事件，并存储到constants中
app.constant('AUTH_EVENTS',{
    loginSuccess:'auth-login-success',
    loginFailed:'auth-login-failed',
    logoutSuccess:'auth-logout-success',
    sessionTimeout:'auth-session-timeout',
    notAuthenticated:'auth-not-authenticated',
    notAuthorized:'auth-not-authorized'
});

app.config(function ($httpProvider) {
    console.log("session時效");
    $httpProvider.interceptors.push([
        '$injector',
        function ($injector) {
            return $injector.get('AuthInterceptor');
        }
    ]);
})
.factory('AuthInterceptor', function ($rootScope, $q,AUTH_EVENTS) {  //AuthInterceptor:进行拦截显示不同信息
    return {
        responseError: function (response) {
            $rootScope.$broadcast({
                401: AUTH_EVENTS.notAuthenticated,
                403: AUTH_EVENTS.notAuthorized,
                419: AUTH_EVENTS.sessionTimeout,
                440: AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
});

//session失效过期重新登录：
app.directive('loginDialog', function (AUTH_EVENTS) {
    console.log("session過期");
  return {
    restrict: 'A',
    template: '<div ng-if="visible" ng-include="\'partials\/login.html\'">',
    link: function (scope) {
      var showDialog = function () {
        scope.visible = true;
      };

      scope.visible = false;
      scope.$on(AUTH_EVENTS.notAuthenticated, showDialog);
      scope.$on(AUTH_EVENTS.sessionTimeout, showDialog)
    }
  };
});

//在每个界面都添加："<"div login-dialog ng-if="!isLoginPage"">""<"/div">"实时监测session是否失效，登录界面不用引用这句话