angularjs - 文件夹结构、登录设计、路由和繁重的任务

Question

我目前正在开发一个新项目，我想给它一个良好的开端，以免弄乱 future 的迭代。

描述

该应用程序将有两个方面:
- 客户端。
- 管理方面。

它们每个都有单独的 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 文件)，并且如果用户未登录，则无法访问其他文件/ View 。

路由

如果我们将路由映射到这个结构，它会给出这样的结果:/应用程序/客户端/client.html
/login应用程序/客户端登录/客户端登录.html
/admin/app/admin/admin.html
/admin/login应用程序/管理登录/管理登录.html

认证条件示例:
/如果用户已登录 -> 显示主页
如果用户未登录 -> 重定向到 /login
繁重的任务

我将使用 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 应用程序？

更新 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('/', {
                templateUrl   : 'app/client/home/home.html',
                resolve       : requireAuth()
            });
    }]);

更新 2

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

主要问题

我没有找到将应用程序包含在另一个应用程序中的正确方法

重定向到登录页面时，仍会加载请求的路由模板(例如:如果我从客户端重定向到客户端登录，它将同时加载 app/client/home/home.html 和 app/client/login/login.html )。

我的第一个结论

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

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

Answer 1

在我看来，您的第一个结论是正确的思维方式:)
登录页面不应显示任何 AngularJS api。所以应该只有小的 JS 文件来处理 AJAX 发布和显示错误消息。您的真实业务代码应仅在身份验证后可用。

这样，您的应用程序将有两个主要文件 app.js(客户端、管理员)
根据我的经验，在处理 AngularJS 时不需要延迟加载 jsFiles。 Javassript Angular 文件非常短。并且由于 AngularJS 架构，您可以使用依赖注入(inject)来禁用不需要的功能。

您的文件结构很好，但是当您的应用程序变得越来越大时，您可以在每个模块中创建子目录: Controller 、指令、过滤器、服务。
我不建议将所有 Controller 保存在一个文件中(仅当它们很短时)，但是当您的应用程序开发时，保持干净的 dir 结构会很有帮助。