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

回答

相關問題