如何使用 ui-route 更改主视图答案

【问题标题】：How to change the main view using ui-route如何使用 ui-route 更改主视图
【发布时间】：2015-10-08 20:37:34
【问题描述】：

通过 Yeoman，我使用 ui-route 创建了一个 angular-fullstack 项目。现在我想知道如何将主视图更改为 login.html。因此，通常当您启动应用程序时，您首先会看到主视图，您可以在其中选择登录或注册。我想要的是当应用程序启动页面时直接在 login.html 上启动

通过这篇文章 -> How to change/set the main view using Yeoman with Angular Fullstack ，我尝试了以下操作：

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
    $stateProvider
      .run(function ($state) {
        $state.go('login');
      });
  })

但是当我实现这段代码时，主视图页面只是空白，当我浏览到 http://localhost:900/login 时，我得到一个 304

【问题讨论】：

您是否为 html5mode 设置了服务器？您是否为login 定义了带有url 的状态？显示的路由不多
@charlietfl：是的，我愿意
是的也配置为 url 登录？
@charlietfl：是的，我相信是的

标签： angularjs angular-ui-router

【解决方案1】：

您可以将登录设置为默认路由：

   $urlRouterProvider
      .otherwise('/login');

【讨论】：

嗯，我的控制台出现错误 -> gyazo.com/3dff3792faf24febef6cf76c28d9f7c8
然后摆脱那个运行块
@pro：是的，当我摆脱那个块时，应用程序运行没有问题，但它没有达到我想要的。这是应用程序启动时应该显示登录页面而不是主视图

【解决方案2】：

对于那些可能遇到与我相同问题的人。我找到了解决方案。所以基本上我只是去main.js并将代码更改为

'use strict';

angular.module('zazzleToolPlannerApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('main', {
        url: '/login',
        templateUrl: 'app/account/login.html',
        controller: 'MainCtrl'
      });
  });

在文件夹 app 的 app.js 中，你只需更改以下代码

  .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');

  })

到：

  .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/login');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');

  })

【讨论】：