angularJS 中的状态提供者和路由提供者 [英] state provider and route provider in angularJS

问题描述

下面是我的 app.js 文件

角度.module('repoApp', ['ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize','ngTouch','ui.bootstrap','ui.router']).config(function ($routeProvider) {$routeProvider.什么时候('/'， {templateUrl: 'views/main.html',控制器:'MainCtrl'}).when('/关于', {templateUrl: 'views/about.html',控制器:'关于Ctrl'}).when('/登录', {templateUrl: 'views/loginPage.html',控制器:'loginCtrl'}).除此以外({重定向到:'/'});});有角的.module('loginState',['ui.router']);

下面是我的状态文件

角度.module('repoApp').config(function ($stateProvider) {$stateProvider.state('home1', {网址:'/home1'，templateUrl: 'views/modals/test.html'}).state('第二个状态',{url:'/secondState',templateUrl: 'views/modals/secondStateTest.html'});});

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

<li class="active"><a href="#/">首页</a></li><li><a ng-href="#/about">关于</a></li><li><a ng-href="#/">联系方式</a></li><li class="loginShift"><a ng-href="#/login">登录</a></li>

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

angular.module('repoApp').controller('loginCtrl', function ($scope,$modal,$state) {$scope.awesomeThings = ['HTML5 样板','AngularJS','业力'];$state.go('home1');$scope.openDialog = 函数 () {$modal.open({键盘:'静态'，templateUrl: 'views/login/loginCred.html',});};});

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

$stateProvider.state('home1', {网址:'/登录'，templateUrl: 'views/modals/test.html'})

这里我更改了网址.现在运行正常.

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

<button data-ng-click="openDialog()">打开我！</button><div><a ui-sref="secondState">点击这里</a></div></div

但只要我点击这个锚标签，它就会导航我回到主页.即不是我打算去的州.主要问题是 URL(我猜)任何帮助将不胜感激.

解决方案

你不应该同时使用 ngRoute 和 UI-router.下面是 UI-router 的示例代码:

repoApp.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('state1', {网址:/state1"，templateUrl: "partials/state1.html",控制器:'你的Ctrl'}).state('state2', {网址:/state2"，templateUrl: "partials/state2.html",控制器:'YourOtherCtrl'});$urlRouterProvider.otherwise("/state1");});//等

您可以在此线程中找到有关这两者之间区别的很好的答案:angular-route 和 angular-ui-router 有什么区别?

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

Below is my app.js file

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']);

Below is my states file

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'
      });
  });

The problem is, using my html i navigate to login page.

<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>

but I am trying to hit the state as soon my flow hit the controller

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',
        });
      };        
  });

but I am not able to hit the home state. If I change my states file i.e

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

here I changed URL. It works fine now.

I have a template from where I want to navigate to a next state

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

but as soon I click this anchor tag it navigates me back to home page. ie not to the state I intend to go. The main issue is URL(i guess) any help will be appreciated.

解决方案

You shouldn't use both ngRoute and UI-router. Here's a sample code for 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.

You can find a great answer on the difference between these two in this thread: What is the difference between angular-route and angular-ui-router?

You can also consult UI-Router's docs here: https://github.com/angular-ui/ui-router

这篇关于angularJS 中的状态提供者和路由提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！