2015-05-21 13 views
16

Poniżej złożyć moje app.jsstan dostawcą i droga dostawcą w angularjs

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

Poniżej złożyć moje stany

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

Problemem jest to, używając mojego html i przejdź do strony logowania.

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

ale staram się trafić w stanie tak szybko mój przepływ hit kontroler

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

ale nie jestem w stanie trafić państwie macierzystym. złożyć jeśli zmienię moje stany tj

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

tutaj zmieniłem adres. Teraz działa dobrze.

Mam szablon, z którego chcę, aby przejść do następnego stanu

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

ale jak tylko kliknę ten znacznik zakotwiczenia go nawiguje mnie z powrotem do strony głównej. tzn. nie do państwa, które zamierzam pojechać. Głównym problemem jest URL (chyba) każda pomoc zostanie doceniona.

+0

proszę unikać wszelkich błędów w znakowaniu, takich jak pominięte symbole i wszystkie. Musisz znać problem funkcjonalny. –

+1

Nie używałbym zarówno 'ngRoute', jak i' ui.router'; są to dwa różne podejścia do tego samego problemu. Powiedziałbym, że reguła '$ routeProvider.otherwise' uniemożliwia działanie konfiguracji stanu – Phil

Odpowiedz

19

Nie należy używać zarówno ngRoute, jak i UI-router. Oto przykładowy kod dla UI-routera:

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.

Można znaleźć wielkie odpowiedzi na różnicę między tymi dwoma w tym wątku: What is the difference between angular-route and angular-ui-router?

Można również zapoznać UI-routera Dokumenty tutaj: https://github.com/angular-ui/ui-router

Powiązane problemy