在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>