angularJS 中的状态提供者和路由提供者答案

【问题标题】：state provider and route provider in angularJSangularJS 中的状态提供者和路由提供者
【发布时间】：2015-08-02 22:37:39
【问题描述】：

下面是我的 app.js 文件

angular
  .module('repoApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap',
    'ui.router'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .when('/login', {
        templateUrl: 'views/loginPage.html',
        controller: 'loginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
angular
  .module('loginState',['ui.router']);

下面是我的状态文件

angular
  .module('repoApp')
  .config(function ($stateProvider) {

      $stateProvider.state('home1', {
        url:'/home1',
        templateUrl: 'views/modals/test.html'
      })
      .state('secondState',{
        url:'/secondState',
        templateUrl: 'views/modals/secondStateTest.html'
      });
  });

问题是，我使用我的 html 导航到登录页面。

<ul class="nav navbar-nav">
              <li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>
              <li class="loginShift"><a ng-href="#/login">Login</a></li>
            </ul>

但我试图在我的流程到达控制器后立即进入状态

angular.module('repoApp')
  .controller('loginCtrl', function ($scope,$modal,$state) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $state.go('home1');
    $scope.openDialog = function () {
        $modal.open({
          keyboard: 'static',
          templateUrl: 'views/login/loginCred.html',
        });
      };        
  });

但我无法达到家庭状态。如果我更改我的状态文件，即

$stateProvider.state('home1', {
            url:'/login',
            templateUrl: 'views/modals/test.html'
          })

在这里我更改了 URL。现在可以正常使用了。

我有一个模板，我想从中导航到下一个状态

<div>
<button data-ng-click="openDialog()">open ME!</button>
<div><a ui-sref="secondState">click here</a></div>
</div

但只要我单击此锚标记，它就会将我导航回主页。即不是我打算去的状态。主要问题是 URL（我猜）任何帮助将不胜感激。

【问题讨论】：

请避免任何标记错误，例如遗漏符号等。需要了解功能问题。
我不会同时使用ngRoute 和ui.router；它们是解决同一问题的两种不同方法。我想说$routeProvider.otherwise 规则正在阻止您的状态配置工作

标签： javascript angularjs angular-routing

【解决方案1】：

您不应同时使用ngRoute 和UI-router。这是 UI-router 的示例代码：

repoApp.config(function($stateProvider, $urlRouterProvider) {
  
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html",
      controller: 'YourCtrl'
    })
    
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html",
      controller: 'YourOtherCtrl'
    });
    $urlRouterProvider.otherwise("/state1");
});
//etc.

你可以在这个帖子中找到关于这两者之间区别的一个很好的答案：What is the difference between angular-route and angular-ui-router?

您也可以在此处查阅 UI-Router 的文档：https://github.com/angular-ui/ui-router

【讨论】：