角UI路由

Question

我想單獨的路由的登錄頁面，在角單頁的應用程序的其他頁面， 我把基準它從這裏：AngularJS UI-Router multiple pages

它說我們可以用抽象的狀態做。 他們使用了州提供者。我只用了routeprovider。當我寫我的route.js時，它並沒有把我的控制權交給common.html。我無法正確編寫這個狀態提供者。請幫我解決這個問題

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


      } 
]); 

Answer 1

我這裏用抽象狀態並寫入es6.I具有抽象狀態樣本路線owner和attendant邏輯上分開。這可以幫助你

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

Answer 2

使用$ stateProvider，如果你想打的「/」路徑來加載您的login.html的模板和LoginController中你會做這樣的：

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