Angular UI routing

Question

I wanted separate routing for login page and other pages in angular single page application, I took the reference for it from here: AngularJS UI-Router multiple pages

it says we can use abstract state for doing it. They have used state provider. I have used just routeprovider. when i wrote my route.js, it is not taking my control to common.html. i am not able to write this state provider correctly. Please help me to solve this

. route.js

app.config(['$routeProvider', function($routeProvider,$locationProvider) {

                $routeProvider.
                when('/', {
                        templateUrl : 'css/pages/login.html',
                        controller  : 'loginController'
                    }).

                    when('/COMMON', {
                        templateUrl : 'css/pages/common.html',
                        abstract: true
                    }).

                when('/WEATHER DATA PULL - DAILY', {
                    templateUrl: 'css/pages/daily-weather.html',
                    parent: 'COMMON',
                    controller: 'dailyWeatherController'

                }).
                when('/WEATHER DATA PULL - WEEKLY', {
                    templateUrl: 'css/pages/weekly-weather.html',
                    parent: 'COMMON',
                    controller: 'weeklyWeatherController'
                }).
                when('/EVENT DALL PULL', {
                        templateUrl: 'css/pages/eventfull.html',
                        parent: 'COMMON',
                        controller: 'eventfullController'
                    }).

                when('/PricePredictionUI/DASHBOARD', {  
                        templateUrl: 'css/pages/dashboard.html',
                        parent: 'COMMON',
                        controller: 'dashboardController'

                    }).
                when('/LOGIN', {
                        templateUrl: 'css/pages/login.html',
                        controller: 'loginController'

                    }).
                when('/LOGOUT', {
                        templateUrl: '',
                        parent: 'COMMON',
                        controller: 'logoutController'

                    }).
                otherwise({
                          redirectTo: '/PricePredictionUI/DASHBOARD',
                        });


          }
]);

vistajess · Accepted Answer · 2016-11-28 01:25:51Z

I have here sample routes with abstract states and written in es6.I have abstract states for owner and attendant separated logically. This might help you

'use strict'
const MainRoutes = ($stateProvider, $locationProvider, $urlRouterProvider) => {

$locationProvider.html5Mode(true).hashPrefix('!');

$urlRouterProvider.otherwise('/');

$stateProvider
 .state('login', {
   url: '/',
   template: '<login></login>',
   data: {
    requireLogin: false
   }
 })


.state('owner', {
  abstract: true,
  template : '<div ui-view></div>',
  data: {
    requireLogin: true
  }
})

.state('owner.home', {
  url: '/owner',
  views: {
    '': { template: '<owner-dashboard owner-details="$resolve.ownerDetails" pictures="$resolve.pictures"></owner-dashboard>' },
    '[email protected]': { 
      templateUrl: 'src/app/templates/owner.dashboard.template.html' 
    }
 })



.state('owner.profile', {
  url: '/owner/profile',
  views: {
    '': { template: '<profile profile="$resolve.profile" pictures="$resolve.pictures"></profile>' },
    '[email protected]': { 
      templateUrl: 'src/app/templates/owner.profile.template.html' 
    }
})



.state('attendant', {
  abstract: true,
  template : '<div ui-view></div>',
  data: {
    requireLogin: true
  }
})

.state('attendant.home', {
  url: '/attendant/parking-lot',
  views: {
    '': { template: '<attendant-dashboard attendant-details="$resolve.attendantDetails"></attendant-dashboard>' },
    '[email protected]': { 
      templateUrl: 'src/app/templates/attendant.dashboard.template.html' 
    },
    '[email protected]': { 
      templateUrl: 'src/app/templates/attendant.arriving.cars.template.html' 
    },
    '[email protected]': { 
      templateUrl: 'src/app/templates/attendant.parked.cars.template.html' 
    }
 })


.state('attendant.block', {
  url: '/attendant/temporary-block',
  views: { 
    '': { template: '<attendant-block></attendant-block>' },
    '[email protected]': { 
      templateUrl: 'src/app/templates/attendant.block.template.html' 
    }
})

}

MainRoutes.$inject = ['$stateProvider','$locationProvider','$urlRouterProvider']

export default MainRoutes;

m.crowley · Accepted Answer · 2016-11-28 01:29:59Z

0

using $stateProvider, if you wanted hitting the '/' route to load your login.html template and the loginController you'd do it like this:

app.config(function($stateProvider) {
$stateProvider
   .state('home', {
        url: '/',
        templateUrl: 'css/pages/login.html',
        controller: 'loginController'
    });
});

answered Nov 28, 2016 at 1:29

m.crowley

33 bronze badges

2 Comments

Akshar J Over a year ago

I wrote with stateprovider as you suggested and also for my other pages. but now its not even routing to first page.

Akshar J Over a year ago

I am getting an error saying: angular.js:38 Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.5.6/$injector/……ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)

Collectives™ on Stack Overflow

Angular UI routing

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related