javascript - MEAN 应用程序中 UI 路由器上的嵌套 View

Question

我正在开发 MEAN 应用程序，但我不知道如何使我的 ui-router 按预期工作。

我有一个index.html模板，我在其中加载我的应用程序需要像Angular，jquery，Angular-ui-x，Bootstrap一样工作的所有JavaScript和CSS，并且在我拥有的索引主体内设置ui-view。

我使用的第一个状态是登录，它使用所有索引的主体ui-view。当用户成功登录时，它会重定向到 home.html 页面(状态:home)，该页面也使用所有索引的正文。主页有一个侧边栏、标题和内容。在 home 的内容中，我放置了一个嵌套的 ui-view。

我想要 home 的 ui-view 中接下来出现的所有内容。如果可能的话，我想将 home 抽象化，这样我就不必执行 home.state1 等操作。

为了澄清我画了一个图像的事情(我知道，我的 mspaint 水平令人印象深刻)。

这是我的状态:

myApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("login");

    $stateProvider

        .state('login', {
        url: '/login',
        templateUrl: '../views/login.html',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'myApp',
                    files: [
                        'js/controllers/LoginCtrl.js',
                        'css/login.css'
                    ]
                }]);
            }]
        }
    })

    .state('home', {
        url: '/home',
        templateUrl: '../views/home.html',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'myApp',
                    files: [
                        'js/controllers/homeCtrl.js',
                        'css/template.css'
                    ]
                }]);
            }]
        }
    })

});

Answer 1

这是带有一些静态部分(菜单等...)的多个状态的示例

看看它在这个 plunker 中的工作情况

以下是状态定义:

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/login');
  $stateProvider
  .state('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'LoginCtrl'
  })
  //This is not a real view so we put it abstract
  //This will manage the menus
  .state('app', {
    abstract: true,
    templateUrl: 'app.html',
    controller: 'AppCtrl'
  })
  .state('app.home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  })
  .state('app.greetings', {
    url: '/greetings',
    templateUrl: 'greetings.html',
    controller: 'GreetCtrl'
  })
}); 

希望对您有帮助，如果您还有其他问题，请随时提问。

编辑:我个人更喜欢将抽象状态称为“app”，因为它象征着应用程序 View 。