Angularjs routing not working

라우팅을 추가 할 때까지 모든 것이 잘 작동했습니다. Angularjs 버전 1.2 이상에서는 의존성으로 'ngRoute'이 필요합니다 (버전 1.2.16 사용). 나는 그것을 추가했지만 여전히 작동하지 않는다. 내 코드는 다음과 같습니다.Angularjs routing not working

인 test.html (메인 페이지)

<html ng-app="demoApp"> 
<head> 
    <title></title> 
</head> 
<body> 
    <p>Front Page</p> 
    <div ng-view></div> 
    <script src="angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script> 
    <script src="testjs.js"></script> 
</body> 
</html>

testjs.js

demoApp = angular.module('demoApp',['ngRoute']); 

demoApp.config(function ($routeProvider) { 

    $routeProvider.when('/', { 
     controller: 'SimpleController', 
     templateUrl: '/partials/first.html' 
    }); 

}); 

var controllers = {}; 
controllers.SimpleController = function ($scope){ 
    $scope.first = "Info"; 
    $scope.customers=[ 
     {name:'jerry',city:'chicago'}, 
     {name:'tom',city:'houston'}, 
     {name:'enslo',city:'taipei'} 
    ]; 
}; 
demoApp.controller(controllers);

first.html 여기

<div> 
    <input type="text" ng-model="name"/> 
    </br> 
    {{first}} 
    </br> 
    <ul> 
     <li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li> 
    </ul> 
</div>

출처

2014-04-17 yellowbyte

내 작업 디렉토리의 그림에 대한 링크가 있습니다. http://postimg.org/image/979tsaecd/ – yellowbyte

이것이 올바른 구문인지 확인하십시오 : demoApp.controller (controllers)? 그것에 대한 참조를 찾을 수 없습니다. – Yoeri

예,이 튜토리얼에서 보았습니다 : https://www.youtube.com/watch?v=Uj-KLCTsQrw. – yellowbyte

가장 기본적인 설정 possble가, 내가 노력 할게요 코드를 사용하여 다른 코드를 만들려면 http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview

EDIT 샘플 코드가 업데이트되었습니다. 모든게 효과가있는 것처럼 보입니까?

EDIT 2 문제는 OP가 웹 서버를 실행하지 않는 것입니다. Ng-Route는 제대로 작동하려면 웹 서버가 필요합니다.

출처

2014-04-17 23:54:32 Yoeri

감사합니다. 나는 자신의 코드가 무엇이 잘못된지 알아보기 위해 노력할 것이다. 그래도 감사합니다! – yellowbyte

분명히이 오류가 발생합니다. "XMLHttpRequest는 file : ///partials/first.html을로드 할 수 없습니다. 교차 출처 요청은 HTTP에서만 지원됩니다." 나는 그것을 지금 고치려고 노력할 것이다. 감사! – yellowbyte

partials/first.html (슬래시는 사용하지 않음)을 사용하십시오. – Yoeri

내 경로를 탐색하려고했을 때 느낌표가 URL에 삽입되어 내 경로가 작동하지 않았습니다. 나는 느낌표를 제거하려면이

app.config(function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix('');

같은 $locationProvider을 추가하고 내 템플릿보기는 내가 그들에게 탐색 할 때 나타나는 시작했다. 여기에 답변을 찾았습니다 Exclamation mark after hash (#!) in angularjs app

출처

2017-05-31 20:16:53 gary69

답변

관련 문제