在Angular的路線中加載不同的模板和控制器？

Question

我的app.js文件如下所示：

angular.module('airline', ['ngRoute', 'airlineServices', 'ngCookies'])
    .config(airlineRouter);

function airlineRouter($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'partials/destinations.html',
            controller: 'DestinationsCtrl'
        })
        .when('/airports/:airportCode', {
            templateUrl: 'partials/airport.html',
            controller: 'AirportCtrl'
        })
        .when('/airports/:airport1/:airport2', {
            templateUrl: 'partials/two_airports.html',
            controller: 'TwoAirportsCtrl'
        })
        .when('/flights', {
            templateUrl: 'partials/flights.html',
            controller: 'FlightsCtrl'
        })
        .when('/reservations', {
            templateUrl: 'partials/reservations.html',
            controller: 'ReservationsCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
};

現在，我只是希望用戶登錄（我可以通過將cookie從cookie發送到服務器並獲得響應來輕松地嘗試），希望加載視圖和控制器，但是如果用戶未登錄，我只想加載登錄視圖和登錄控制器？ 如何配置“ /”路由，使其加載不同的視圖和控制器？

Answer 1

視圖將動態加載，因此您不必擔心它們。 控制器是設置的一部分，因此，您不必擔心它們。 您要做的是根據用戶是否通過身份驗證來顯示視圖。

當用戶進行身份驗證時，您想在$ rootScope中的某個位置設置屬性，然后可以顯示不同的視圖，類似於以下代碼：

 <div data-ng-if="application.isAuthenticated()"> <div> I am logged in </div> </div> <div data-ng-if="!application.isAuthenticated()"> hello anon, please login. <button class="btn btn-primary" ng-click="application.login()">Login</button> </div>