state provider and route provider in angularJS

Question

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.

please avoid any markup mistakes like missed symbols and all. Need to know the functional issue. — Shah Rukh K
– Shah Rukh K, Commented May 21, 2015 at 10:11
I wouldn't use both ngRoute and ui.router; they're two different approaches to the same problem. I'd say the $routeProvider.otherwise rule is preventing your state configs from working — Phil
– Phil, Commented May 21, 2015 at 10:16

Community · Accepted Answer · 2017-05-23 11:54:56Z

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

Collectives™ on Stack Overflow

state provider and route provider in angularJS

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related