1

我希望/我的 AngularJS 应用程序的根 URL 显示基于 cookie 值的模板。例如，当存在登录 cookie 时，显示仪表板。当登录 cookie 不存在时，显示登录屏幕。

我尝试注入 $cookies 来app.config确定$route基于它的模板属性，但这不起作用。

var myApp = angular.module('myApp', ['ngRoute', 'ngCookies']);
myApp.config([
    '$routeProvider',
    '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: function() {
                    // read cookies here?
                    return '../../connect.html';
                },
                controller: "getAuthUrl"
            });
        $locationProvider.
            html5Mode(true).
            hashPrefix('!');
    }
]);
4

1 回答 1

0

回答我自己的问题...

经过进一步调查，我发现这$routeProvider不是我应该使用的。$routeProvider用于基于 URL 路由提供模板。这个问题需要的是ui-router模块，这是一个官方的AngularJS模块。

代替 URL，ui-router允许您基于“状态”指定页面内容。在我的情况下，我有一个“登录”状态和一个“仪表板”状态。以下是我实施解决方案的方式：

var myApp = angular.module('myApp', ['ngCookies', 'ui.router']);

myApp.config([
    '$stateProvider',
    '$locationProvider',
    function ($stateProvider, $locationProvider) {
        $stateProvider.
            state('login', {
                template: '<h1>Login now.</h1>'
            }).state('dashboard', {
                template: '<h1>You are logged in. Welcome.</h1>'
            });
        $locationProvider.
            html5Mode(true).
            hashPrefix('!');
    }
]);


myApp.controller('mainCtrl', [
    '$scope',
    '$state',
    '$cookies',
    function($scope, $state, $cookies) {
        // You can read cookies here
        if (true) {
            console.log($cookies);
            $state.go('dashboard');
        }
        else {
            $state.go('login');
        }
    }
]);

然后HTML是

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <script src='js/lib/angular.js'></script>
    <script src='js/lib/angular-ui-router.js'></script>
    <script src='js/lib/angular-cookies.js'></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller='mainCtrl'>

<div class="container" ui-view></div>

</body>
</html>

ui-router您可以在其wiki中阅读所有相关信息

注意：ui-router您至少必须使用v0.0.2。v0.0.1 不起作用。

于 2013-08-23T19:34:07.453 回答