angularJS总结

最新推荐文章于 2021-12-06 09:40:13 发布

bing_JavaScript

最新推荐文章于 2021-12-06 09:40:13 发布

阅读量461

点赞数 1

本文链接：https://blog.csdn.net/bing_JavaScript/article/details/51397378

版权

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是否失效，登录界面不用引用这句话

bing_JavaScript

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS总结

Angularjs组成部分： 1、启动（startUp） :--展示 “hello world!” 2、执行期（runtime） :--AngularJs执行期 3、作用域（scope） :--视图和控制器的集合区 4、控制器（controller）:--应用的行为 5、模型（mode
复制链接

扫一扫