Ci-dessous mon fichier 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']);
Ci-dessous, mon fichier d'états
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'
});
});
Le problème est, en utilisant mon HTML je navigue vers la page de connexion.
<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>
mais j'essaie de frapper l'état dès que mon flux frappe le contrôleur
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',
});
};
});
mais je ne suis pas capable de frapper le pays d'origine. Si je modifie mon fichier d’états, i.e
$stateProvider.state('home1', {
url:'/login',
templateUrl: 'views/modals/test.html'
})
ici j'ai changé d'URL. Cela fonctionne bien maintenant.
J'ai un modèle d'où je veux naviguer vers un état suivant
<div>
<button data-ng-click="openDialog()">open ME!</button>
<div><a ui-sref="secondState">click here</a></div>
</div
mais dès que je clique sur cette balise d'ancrage, elle me ramène à la page d'accueil. c'est-à-dire pas à l'état dans lequel je compte aller. Le problème principal est l'URL (je suppose) toute aide sera appréciée.
Vous ne devriez pas utiliser à la fois ngRoute
et UI-router
. Voici un exemple de code pour 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.
Vous pouvez trouver une bonne réponse sur la différence entre ces deux dans ce fil de discussion: Quelle est la différence entre angular-route et angular-ui-router?
Vous pouvez également consulter la documentation de UI-Router ici: https://github.com/angular-ui/ui-router