AngularJS, $ routeProvider

AnglesJS에서 경로가 작동하여 사용자가 로그인하여 실시간 피드에 의견을 쓸 수있는 작은 응용 프로그램을 만드는 방법을 배우려고합니다. 그러나 경로의 전체 개념은 나를 위해 조금 흐리게하고 atm 나는이 권리를 얻을 수 없다.

내보기 및 필요한 스크립트가 포함 된 내 표준 index.html.

<!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

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')에있는 경우 사용자가 구성된 경로를 벗어난 곳으로 이동할 경우 /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

답변을 업데이트했습니다. 두 번째 코드 블록을 참조하십시오. –

나는 당신이 config 섹션에서 잘못 호출하는 구문을 가지고 있다고 생각한다. 이 대신에 대해 무엇을 변경 :이 도움이

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

답변

관련 문제