javascript - Proveedor estatal y proveedor de rutas en angularJS.

angular-routing

Question

A continuación se muestra mi archivo 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'']);

Abajo esta mi archivo de estados

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

El problema es que, al usar mi HTML, navego para ingresar a la página.

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

pero estoy tratando de alcanzar el estado tan pronto como mi flujo golpeó el controlador

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

pero no soy capaz de golpear el estado de origen. Si cambio mi archivo de estados es decir

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

Aquí he cambiado la URL. Funciona bien ahora.

Tengo una plantilla desde la que quiero navegar al siguiente estado

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

pero tan pronto como hago clic en esta etiqueta de anclaje, me lleva de vuelta a la página de inicio. Es decir, no al estado al que pretendo ir. El principal problema es la URL (supongo) que cualquier ayuda será apreciada.

Answer 1

No debe utilizar ngRoute y UI-router . Aquí hay un código de ejemplo para el enrutador UI:

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.

Puede encontrar una gran respuesta a la diferencia entre estos dos en este hilo: ¿Cuál es la diferencia entre enrutador angular y enrutador ui angular?

También puede consultar los documentos de UI-Router aquí: https://github.com/angular-ui/ui-router