angularjs – 文件夹结构,登录设计,路由和grunt任务

我目前正在开发一个新项目,我想给它一个良好的开端,不要搞砸未来的迭代.

描述

申请将有两个方面：
– 客户方.
– 管理员方面.

它们中的每一个都有单独的API,我将它们分成2个应用程序似乎是合乎逻辑的.
他们每个人都有自己的登录方式.

我的想法

在阅读了很多关于这个主题的主题后,我正在考虑使用这个结构：

app/
    admin/
        home/
            home.tpl.html    // admin home template
        admin.html           // admin index,including templates via ng-view
        admin-api.js         // admin api
        admin.js             // admin app
    admin-login/
        home/
            home.tpl.html
        admin-login.html
        admin-login-api.js
        admin-login.js
    client/
        home/
            home.tpl.html
        client.html
        client-api.js
        client.js
    client-login/
        home/
            home.tpl.html
        client-login.html
        client-login-api.js
        client-login.js
css/
fonts/
img/
js/
libs/

为什么要将登录与其他登录分开？因为我希望登录页面更轻(我不会加载相同的CSS / JS文件),并且如果用户没有登录则无法访问其他文件/视图.

路由

如果我们将路由映射到此结构,它将提供如下内容：
/
应用程序/客户端/ client.html

/登录
应用程序/客户端,登录/客户的login.html

/管理/
应用程序/管理/ admin.html

/管理/登入
应用程序/管理登录/管理员-的login.html

身份验证条件示例：

/
如果用户已登录 – >显示主页
如果用户未登录 – >重定向到/登录

咕噜声的任务

我将使用grunt-useref主要在一组常见的JS / CSS文件上执行自动concat和uglify.

例：

<!-- build:js js/scripts.<%= pkg.version %>.min.js -->
    <!-- jQuery -->
    <script src="libs/jquery/jquery-1.11.1.js"></script>

    <!-- AngularJS -->
    <script src="libs/angularjs/angular.js"></script>
    <script src="libs/angularjs/angular-route.js"></script>
    <script src="libs/angularjs/angular-resource.js"></script>

    <!-- Our main application -->
    <script src="app/app.js" ></script>
<!-- endbuild -->

目标是有一个地下室,然后在路线改变时(通过延迟加载)在其顶部添加其他JS / CSS文件.

关注

首先,我在这里学习并分享想法,所以我希望你对我所做的事情有所了解.
其次,如果我保留这个结构,我想知道如何管理主要路线
(/,/ login,/ admin /,/ admin / login)和用户身份验证(但是对于这部分,已经有很多线程).

我想不处理这个服务器端,是否可以使用.htaccess或顶级Angular App？

更新1

我终于来到另一种方式来构建我的文件夹结构：

app/
    admin/
        home/
            home.html         // admin home view
        login/
            login.html        // admin login view
            login-api.html    // admin login API
            login.js          // admin login module
        admin.html        // admin index,including templates via ng-view
        admin-api.js      // admin api
        admin.js          // admin module

    client/           // same goes for the client
        home/
            home.tpl.html
        login/
            login.html
            login-api.html
            login.js
        client.html
        client-api.js
        client.js
    common/
        common.js         // shared module
    app.js             // main application,routing to the other pages based on Auth
css/
fonts/
img/
js/
libs/
locale/
index.html

index.html将提供我的主应用程序(app.js),它将根据用户登录状态提供正确的模板.

我的目标是异步加载css和js文件,只有当前路由所需的文件.

app / app.js(草稿)

/*
 * app/app.js
 * 
 * Our main application,handling routes
 * and lazy loading other modules / scripts
 *
 */
var app = angular.module('app',[
        'ngRoute','ngResource','ngTouch','ngAnimate'
    ]);



/*
 * App configuration
 *
 */
app.config( ['$routeProvider','$locationProvider',function( $routeProvider,$locationProvider ) {

        $locationProvider.hashPrefix('!');

        /*
         * Checks if a user is authorized to access a route
         * 
         * @role (string) minimum role name required
         *
         */
        var requireAuth = function ( role ) {
            return {
                load: function ( $q,$location ) {
                    console.log('Can user access route?');

                    var deferred   = $q.defer(),// TODO: replace isLoggedIn variable value by a function
                        // to check if the user is actually logged in
                        isLoggedIn = true;

                    deferred.resolve();

                    if ( isLoggedIn === true ) { // fire $routeChangeSuccess
                        console.log('authorized');

                        return deferred.promise;
                    }
                    else { // fire $routeChangeError
                        console.log('rejected');

                        $location.path('/login');
                    }
                }
            };
        };

        // Main application routes
        $routeProvider
            .when('/',{
                templateUrl   : 'app/client/home/home.html',resolve       : requireAuth()
            })
            .when('/login',{
                templateUrl   : 'app/client/login/login.html',resolve       : requireAuth('anonymous')
            })
            .when('/admin/',{
                templateUrl   : 'app/admin/home/home.html',resolve       : requireAuth('admin')
            })
            .when('/admin/login',{
                templateUrl   : 'app/admin/login/login.html',resolve       : requireAuth('anonymous')
            })
            .otherwise('/',resolve       : requireAuth()
            });
    }]);

更新2

经过更多的测试和研究,我想如果没有服务器端处理主要路由,我将无法做到这一点……

主要问题

>我没有找到在其他应用程序中包含应用程序的正确方法
>当重定向到登录页面时,仍然加载了请求的路径模板(例如：如果我从客户端重定向到客户端登录,它将加载app / client / home / home.html和app / client / login / login. HTML).

我的第一个结论

我绝对需要4个应用程序(客户端,客户端登录,管理员和管理员登录),因此他们每个人都有自己的路由,他们自己的主要index.html模板,因此,他们将真正独立于彼此.

他们每个人仍然可以访问常见的concat / minified文件,但他们也会加载自己的一堆文件.