如何使用 Yeoman 和 Angular Fullstack 更改/设置主视图答案

【问题标题】：How to change/set the main view using Yeoman with Angular Fullstack如何使用 Yeoman 和 Angular Fullstack 更改/设置主视图
【发布时间】：2015-07-19 13:52:21
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs yeoman yeoman-generator-angular

【解决方案1】：

在位于client\app\app.js 的 app.js 文件中，在 Angular 配置中添加以下内容：

$stateProvider
  .run(function ($state) {
    $state.go('login');
  });

所以它应该是这样的：

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

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

【讨论】：

这假设您在设置项目时选择了 ui-router 作为您的路由器。你改用 ngRouter 了吗？
您可能应该切换到 ui-router，老实说，这对于您正在尝试做的事情要好得多。
你知道如何用 ng route 来做吗？
没有简单的方法，不。您可能需要在 authInterceptor 中进行某种登录检查并重定向到 /login
好的，所以我添加了 ui-route，我现在正在使用这个。与您实现的代码一起，我仍然无法将主视图更改为登录页面...

【解决方案2】：

我意识到这已经有一段时间了，您可能已经有了一个很好的解决方案，但我最近自己也在研究这个问题，并看到了几个选项。

一，在app.js中你可以在$urlRouterProvider下添加如下代码sn-p：

.when('/', '/login')

使您的完整方法类似于：

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

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

这将强制任何人直接访问您的基本页面 url 登录，除非他们提供到另一个页面的完整路径。但是，如果您仍打算使用 main.html，则需要进入 client/app/main/main.js 并将默认路由更改为：

.state('main', {
    url: '/main',
    templateUrl: 'app/main/main.html',
    controller: 'MainCtrl'
 });

所以 main 可以通过将 /main 附加到 url 来访问。

这让我想到了选项 2：进入 main.js 文件并将其 url 切换为“/main”，然后进入 login.js 并将其 url 切换为“/”。然后导航到您的基本页面的任何人都会自动进入登录屏幕，但该 url 被视为您的域，没有任何子页面。

所以client/app/main/main.js变成了：

.state('main', {
    url: '/main',
    templateUrl: 'app/main/main.html',
    controller: 'MainCtrl'
 });

client/app/account/account.js 现在包含：

.state('login', {
    url: '/',
    templateUrl: 'app/account/login/login.html',
    controller: 'LoginCtrl'
 })

【讨论】：