AngularJS，$ routeProvider

Question

我正在嘗試學習如何在AngularJS中使用路由，以制作一個小應用程序，該應用程序允許用戶登錄並在實時Feed中寫評論。 但是，路線的整個概念對我的atm來說有點模糊，我無法正確理解。

我的標准index.html包含ng-view和必要的腳本。

 <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

    <script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
    <script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
    <script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
    <script src="controller.js"></script>

    <title>Test Login App</title>
</head>
<body>
<div class="container">
    <div ng-view></div>
</div>
</body>
</html>

我的控制器包含模塊和routeprovider。

    var myApp = angular.module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase',
    'firebase.utils',
    'simpleLogin'
]);

myApp.config(function($routeProvider) {
        $routeProvider.
            when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
            when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
            when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
            otherwise({ redirectTo: '/handler' });
});

myApp.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}])

myApp.controller('MyController', ['$scope', '$firebase',
    function($scope, $firebase) {
        //CREATE A FIREBASE REFERENCE
        var ref = new Firebase("https://ivproj.firebaseio.com/");

        // GET MESSAGES AS AN ARRAY
        $scope.messages = $firebase(ref).$asArray();

        //ADD MESSAGE METHOD
        $scope.addMessage = function(e) {

            //LISTEN FOR RETURN KEY
            if (e.keyCode === 13 && $scope.msg) {
                //ALLOW CUSTOM OR ANONYMOUS USER NAMES
                var name = $scope.name || 'anonymous';

                //ADD TO FIREBASE
                $scope.messages.$add({
                    from: name,
                    body: $scope.msg
                });

                //RESET MESSAGE
                $scope.msg = "";
            }
        }
    }
]);

$ routeprovider函數應該將我定向到處理程序，該處理程序是一個簡單的.html文件，其中包含兩個按鈕，這些按鈕又重定向到其他html。

Answer 1

我認為您在配置部分中的else調用的語法錯誤。 更改您為此擁有的內容：

otherwise('/handler');

希望這可以幫助...

Answer 2

您在控制器部分缺少“”。 正確的代碼應類似於-

myApp.config(function($routeProvider) {
        $routeProvider.
            when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
            when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
            when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
            otherwise({ redirectTo: '/handler' });
});

確保您在templateUrl中引用正確的路徑。

並查看我之前的文章以獲得更好的主意- 如何在Angular App中導航

Answer 3

myApp.config(function($routeProvider) {
    $routeProvider.
        when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
        when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
        when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
        otherwise({ redirectTo: '/handler' });
});

上面代碼中的$routeProvider.when()方法實際上創建具有給定配置的路由。 三個.when()正在創建三個不同的路由。

但是在$routeProvider.otherwise('/handler') ，您要告訴angular如果用戶嘗試導航已配置路線之外的任何地方，則轉到名為/handler的路線。

您在這里犯的錯誤是，您沒有在/handler 定義路由。 因此，您需要先定義該路由，然后在.otherwise()使用它。

嘗試更改您的配置以反映以下內容。

myApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
        when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
        when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
        when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
        otherwise({ redirectTo: '/handler' });
});

AngularJS，$ routeProvider

問題描述

3 個解決方案

解決方案1
1 2014-10-08 16:00:47

解決方案2
1 2014-10-08 16:04:34

解決方案3
0 已采納 2014-10-08 16:06:08

AngularJS，$ routeProvider

問題描述

3 個解決方案

解決方案1 1 2014-10-08 16:00:47

解決方案2 1 2014-10-08 16:04:34

解決方案3 0 已采納 2014-10-08 16:06:08

解決方案1
1 2014-10-08 16:00:47

解決方案2
1 2014-10-08 16:04:34

解決方案3
0 已采納 2014-10-08 16:06:08