Question

我想在模块中分离我的应用程序。我有一个登录模块和应用程序的其余部分。我的想法是，用户无需先登录即可访问应用程序的其余部分。为此，我使用了两个具有不同配置的angular.module，但是我无法接缝以动态地对新的app.js进行角度解析并在我的webapp上使用它的配置。

//index.html
<div data-ng-app="login" ui-view></div>

//login.js
.state('user.signin', {
            url: '/signin',
            templateUrl: 'login.html'
        })
        .state('appUIView', {
            url: '/appUIView',
            templateUrl: 'appUIView.html',
            resolve: {
                deps: ['uiLoad',
                  function( uiLoad ){
                    return uiLoad.load( [
                                            'js/app.js'//I try resolving the app.js so I can now use it's configuration
                                        ]);
                }]
            }
        })
 //appUIView.html
 <div data-ng-app="app" ui-view></div>//uses the app defined in app.js


 //app.js
 $urlRouterProvider
    .otherwise('/app');//when app.js is loaded if the new configuration is used the page should land on app.html
 $stateProvider   
        .state('app', {
            url: '/app',
            templateUrl: 'app.html'
        })

http://plnkr.co/edit/FOAegZmmWjuPeWp3VhBe

感谢您的帮助！

Answer 1

Angular中的webapp通常有1 ng-app模块。

最合理的做法是，如果你真的需要两个独立的应用程序，那就是开发两个独立的角度应用程序。您可以将登录模块重定向到承载应用程序安全版本的页面。当然，这意味着您必须进行常规重定向，从而触发浏览器重新加载。

您还可以在一个应用程序中拥有多个ng-app。在这种情况下，您必须使用bootstrap在它们之间切换。但是，除非有充分的理由，否则我不会诉诸于此。这看起来有点像黑客。

angular.bootstrap(document.getElementById('app'),['app']);

Answer 2

我使用一些服务器端MVC（ASP.NET MVC，但我相信你可以用任何类似的平台完成它）来完成我们用于内部应用程序的一组AngularJS模块。我只是设置了一个ViewBag属性，可以通过我在MVC中的（共享）页面模板来获取，例如。

<html ng-app="@ViewBag.NgApp">

此ViewBag属性由我的服务器端路由设置，因此对/ App1的请求将为该捆绑包提供脚本，包括相关的模块定义。 / App2，/ App3等相同。/ App1下的任何内容都由SPA的客户端路由处理（我们使用ui-router）。

值得关注router being created for Angular 2.0，但是后端移植到1.3 - 这应该支持在单个应用程序中动态加载子应用程序/路由器。我希望这意味着动态加载应用程序模块...

在angularjs中切换数据-ng-app模块配置

2 个答案: