Question

我有一个带有主index.html的webapp，它通过ng-view和routeProvider显示每个页面。

现在我为尚未登录的用户添加了一个入口页面。此页面也可以有自己的ng-view来为非登录用户滑动不同的部分（欢迎，是什么，登录，签名ecc ...）以及他自己的css脚本ecc ...

我宁愿将webapp索引和入口页索引都发送到www.example.com（所以没有像www.example.com/welcome那样）。

我想到了类似的结构：

web应用/

主/

第1页/

第2页/

欢迎/

SECTION1 /

第2节/

的index.html

welcome.js（输入页面的角度模块）



的.htaccess

的index.html

webapp.js（包含webapp的routeProvider的angular模块）

目前我有.htaccess将所有假查询重写为index.html，以便在此处处理所有内容。

特别是：

1）如果用户未登录，如果我已经将此条件用于webapp主页，我怎么能说webapp.js的routerProvider转到/welcome/index.html？（我应该使用run方法吗？一个简短的例子会很有帮助）

.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when(...)
    .when('/', {
        templateUrl : 'main/webapp-main.html'
    })
    .when(...)

2）如何防止welcome / index.html中的所有内容都加载到index.html ng-view中？（也许使用ng-if隐藏ng-view？或者有一些方法可以通过routerProvider来控制这种行为？）

3）有一种更好，更简单的方法来实现这一切吗？

感谢。

更新好吧我认为在我的问题中存在潜在的问题...我无法使用完整的不同页面，因为所有内容都已加载并切换到另一个页面将导致重新加载应用程序丢失所有数据。所以我想我应该为整个网站使用相同的主模板然后我补充一点：angularjs有一种方法可以动态加载不同的样式表吗？

Answer 1

这个问题已经过时了，但我认为是有效的，可以澄清一些人的想法。

首先，你应该为AngularJS应用程序使用单个页面，否则你将不得不做类似重定向链接的事情，并且在你的other-index.html中加载一个完全不同的Angular应用程序，同时加载所需的每个脚本第一个。

1）使用ui-router易于使用且非常强大，您唯一需要的是ui-view的容器，然后ui-router将填充容器对应的html

2）为防止导航，您应该执行以下操作：

angular.module('myApp', [])
.run(function($rootScope, mySessionService){
  $rootScope.$on('$stateChangeStart',
      function(event, next, nextParams, prev, prevParams) {
        // The info of your currentUser could be obtain from a service
        // or localStorage or cookies anyway you are already doing it
        var authorized= checkAuthorization(next.authorazedRoles,             
                          mySessionService.getCurrentRol());
        if(!authorized) {
          $rootScope.$state.go('defaultState');
          // Or $rootScope.$emit('NOT_AUTHENTICATED');
          // and some service will have to implement a listener for this emit
          // $rootScope.$on('NOT_AUTHENTICATED', func..redirect to X State)
        }
      });
});

如何使用AngularJS处理完全不同区域（但相同网站）的模板

1 个答案: