AngularJS，$ routeProvider

我正在尝试学习AngularJS中的路由如何工作，以制作一个允许用户在实时馈送中登录和写入注释的小应用。然而，整个路线的概念对我来说有点模糊，我无法做到这一点。

我的标准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功能应该告诉我去处理程序，它包含两个按钮，依次重定向到其他HTMLS一个简单的HTML文件。

来源

2014-10-08 seb

那什么不起作用？ – tymeJV 2014-10-08 15:58:39

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' }); 
});

来源

2014-10-08 16:06:08

是的，它使它工作，愚蠢我多久卡在这一部分。感谢您的解释。 – seb 2014-10-08 16:15:56

有没有办法让我保持我的html5Mode，所以我不需要通过'＃/ some'来引用路径？ – seb 2014-10-08 16:36:55

更新了答案。见第二个代码块。 – 2014-10-08 17:40:34

我认为你的配置部分有其他调用的语法错误。改变你对这个代替：

otherwise('/handler');

希望这有助于...

来源

2014-10-08 16:00:47 Fordio

我认为你可以与两个实际去。 – seb 2014-10-08 16:05:44

是的 - 我认为你是对的 - 道歉。 – Fordio 2014-10-08 16:07:28

不用担心。 – seb 2014-10-08 16:16:16

您在控制器部分失踪'。正确的代码应该看起来像 -

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

来源

2014-10-08 16:04:34 Rabi

嗯，你工作，虽然我不得不删除html5mode。 – seb 2014-10-08 16:11:31

AngularJS，$ routeProvider

回答

相关问题