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