angularjs 组件化项目基本框架

　　angularjs 单页面项目使用组件化开发模式，降低模块之间的耦合性，便于协同开发；使用ui-router 作为项目的路由切换，并结合ocLazyLoad 按需加载组件（component）、服务（service）。后续结合requirejs 动态加载js 文件，解决index 页面加载大量js 文件，可能导致js 阻塞的问题。

项目结构：

index.html
app.js
js
    |__ jquery.js
    |__ angular.js
    |__ angular-resource.js
    |__ angular-ui-router.js
    |__ ocLazyLoad.js
css
    |__ main.css
plugins
    |__ bootstrap
            |__ js
            |__ css
    |__ ng-table
            |__ js
            |__ css       
login
    |__ module.js
    |__ component.js
    |__ template.html
home
    |__ module.js
    |__ component.js
    |__ service.js
    |__ template.html
users
    |__ module.js　
    |__ service.js
    |__ list
            |__ component.js
            |__ template.html    
    |__ detail
            |__ component.js
            |__ template.html

View Code

项目内容：

主页 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my project</title>
<link href="css/main.css" rel="stylesheet" />
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="plugins/ng-table/css/ng-table.css" rel="stylesheet" />
</head>

<body ng-app="myProject" ng-strict-di>

    <div ui-view></div>
    
    <script src="js/jquery.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.js"></script>
    <script src="js/ocLazyLoad.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script src="plugins/ng-table/js/ng-table.js"></script>
    <script src="login/module.js"></script>
    <script src="users/module.js"></script>
    <script src="home/module.js"></script>
    <script src="app.js"></script>
</body>
</html>

View Code

启动模块 app.js

angular.module('myProject',[
    'ui.router',
    'oc.lazyLoad',
    //引入各个模块，以备依赖
    'login',
    'home',
    'users'
])
//服务端与客户端在一起时，指定空字符串
.constant('basePath','')
.config(['$compileProvider','$httpProvider',function($compileProvider,$httpProvider){
    //禁用调试数据
    $compileProvider.debugInfoEnabled(false);
    $compileProvider.commentDirectivesEnabled(false);
    /*$compileProvider.cssClassDirectivesEnabled(false);*/

    //允许携带cookie，跨域设置
    $httpProvider.defaults.withCredentials = true;
}])
.run(['$urlService','$state',function($urlService,$state){
    if(!$urlService.url()){
        //登录后系统默认进入的状态。注意home状态会做重定向
        $state.go('home');
    };
}]);

View Code

angular.module('login', [
    'ui.router', 
    'oc.lazyLoad', 
    'ngResource'
])
.factory('loginService',['$resource', 'basePath','$injector', function($resource,basePath,$injector){
    return $resource(
                '',
                {},
                {
                    'login':{
                        url:basePath+'/login',
                        method:'post',
                        headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
                    },
                    'logout':{
                        url:basePath+'/logout',
                        method:'post'
                    }
                });
}])
.config(['$transitionsProvider','$httpProvider','$stateProvider',function($transitionsProvider,$httpProvider,$stateProvider){
    //拦截服务器响应，处理服务器登录态失效的情况
    $httpProvider.interceptors.push(['$q', '$injector', '$state', function($q, $injector, $state){
        return {
            'responseError': function(response) {
                if(response.status==401){
                    //移除客户端的登录态
                    sessionStorage.removeItem("currentUser");
                    //回到登录状态
                    $state.go('login');
                };
                //标记此次响应失败
                return $q.reject(response);
                }
            }
    }]);

    $stateProvider.state('login', {
        url: '/login',
        component: 'login',
        lazyLoad: function($transition$){
            return $transition$.injector().get('$ocLazyLoad').load(['login/component']);
        },
        resolve:{
            returnTo: ['$transition$', '$state', function($transition$,$state){
                var from = $transition$.from();
                if(from.name){
                    return $state.target(from,$transition$.params("from"));
                };
                //默认登录后进入的状态
                return $state.target('home');
            }]
        }
    });
}]);

View Code

home 模块

angular.module('home', [
    'ui.router', 
    'oc.lazyLoad'
])
.config(['$stateProvider',function($stateProvider){
    $stateProvider.state('home', {
        url: '/home',
        component: 'home',
        redirectTo: 'home.users.list',
        lazyLoad: function($transition$){
            //注意不要加js后缀
            return $transition$.injector().get('$ocLazyLoad').load('home/component');
        }
    });
}]);

View Code

users 模块

angular.module('users',[
    'ui.router', 
    'oc.lazyLoad', 
    'ngResource',
    'ngTable'
])
.config(['$stateProvider',function($stateProvider){
    $stateProvider
        .state('home.users',{
            lazyLoad: function($transition$){
                //加载此模块公共的服务
                return $transition$.injector().get('$ocLazyLoad').load('users/service');
            }
        })
        .state('home.users.list', {
            url: '/users/list',
            component: 'usersList',
            dynamic:true,
            lazyLoad: function($transition$){
                //加载对应的组件
                return $transition$.injector().get('$ocLazyLoad').load('users/list/component');
            }
        });    
}]);

View Code

angularjs 组件化项目基本框架

猜你喜欢