AngularJS，$routeProvider答案

【问题标题】：AngularJS, $routeProviderAngularJS，$routeProvider
【发布时间】：2014-10-08 15:53:46
【问题描述】：

我正在尝试了解路由在 AngularJS 中的工作原理，以制作一个允许用户在实时提要中登录和编写 cmets 的小应用程序。然而，路线的整个概念对我 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>

我的控制器包含模块和路由提供程序。

    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。

【问题讨论】：

那么什么不起作用？

标签： javascript angularjs module ngroute

【解决方案1】：

我认为您的配置部分中的 else 调用的语法错误。改变你所拥有的：

otherwise('/handler');

希望这会有所帮助...

【讨论】：

我认为你可以同时使用两者。

【解决方案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 中引用了正确的路径。

并查看我之前的帖子以获得更好的想法 - How to navigate in Angular App

【讨论】：

嗯，虽然我也必须删除 html5mode，但确实有效。

【解决方案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' });
});

【讨论】：

是的，它成功了，我在这部分卡了多久。也感谢您的解释。
有没有办法让我保持 html5Mode 开启，这样我就不需要通过 '#/some' 引用路径？