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>

Мой контроллер, содержащий модуль и маршрутизатор.

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 файл, содержащий две кнопки, которые, в свою очередь перенаправляет на другие HTMLs.

источник

2014-10-08 seb

Так что же не работает? – tymeJV

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

Есть ли способ, который позволяет мне поддерживать мой html5Mode, поэтому мне не нужно ссылаться на пути через «#/some»? – seb

Обновлен ответ. См. Второй блок кода. –

Я думаю, что у вас есть синтаксис другого вызова в вашем разделе конфигурации неправильно. Изменить то, что у вас есть для этого вместо:

otherwise('/handler');

надеюсь, что это помогает ...

источник

2014-10-08 16:00:47 Fordio

Я думаю, вы можете пойти с обоими на самом деле. – seb

Да, я думаю, вы правы - извинения. – Fordio

Не стоит беспокоиться. – seb

вам не хватает «» в контроллер части. правильный код должен выглядеть так:

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

AngularJS, $ routeProvider

ответ

Смежные вопросы