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


          }
]);

score 0 · Answer 1 · answered Nov 28 '16 at 01:25

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>' },
    'content@owner.home': { 
      templateUrl: 'src/app/templates/owner.dashboard.template.html' 
    }
 })



.state('owner.profile', {
  url: '/owner/profile',
  views: {
    '': { template: '<profile profile="$resolve.profile" pictures="$resolve.pictures"></profile>' },
    'content@owner.profile': { 
      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>' },
    'content@attendant.home': { 
      templateUrl: 'src/app/templates/attendant.dashboard.template.html' 
    },
    'arriving-cars@attendant.home': { 
      templateUrl: 'src/app/templates/attendant.arriving.cars.template.html' 
    },
    'parked-cars@attendant.home': { 
      templateUrl: 'src/app/templates/attendant.parked.cars.template.html' 
    }
 })


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

}

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

export default MainRoutes;

score 0 · Answer 2 · answered Nov 28 '16 at 01:29

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 '16 at 01:29

m.crowley

3
3

I wrote with stateprovider as you suggested and also for my other pages. but now its not even routing to first page. – Akshar J Nov 28 '16 at 02:39
I am getting an error saying: angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=tool&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332) – Akshar J Nov 28 '16 at 02:51

Angular UI routing

2 Answers2