2015-02-04 2 views
2

저는 Angular를 처음 사용하기 때문에 기본적인 라우팅을 설정하고 싶습니다. 내 cart.html에는 "Hello Cart"텍스트가 있고 #/Step으로 이동하여 이것을 "Hello World"로 변경하고 싶습니다. someurl.com/page을 내가로 변경하는 경우 :
내가 가진기본 Angularjs 라우팅이 템플릿을 가져 오지 못함

(내 콘솔은 나에게 오류 메시지를 제공하지 않음) someurl.com/page#/Step 아무 반응이 없습니다.

이는 그것을 어지럽히 부모 DIV에 NG-포함 갖는 JS

var ecom = angular.module('ecom', ['ngRoute', 'ngResource']); 

ecom.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/Step', { 
      template: 'hello world' 
     }); 
}); 

답변

1

인 HTML

<div class="row" ng-app="ecom"> 
    <div class="large-12 columns" ng-include="'cart.html'"> 
    <div ng-view></div> 
    </div> 
</div> 

입니다. 여기 plunk

입니다 :이 문제를 해결하기 위해

한 가지 방법은 "/"에 다른 경로를 추가하고 경로 templateUrl는 "cart.html"

(function() { 
 
    var ecom = angular.module('ecom', ['ngRoute']); 
 

 
    ecom.config(function($routeProvider) { 
 
    $routeProvider 
 
     .when("/", { 
 
     template: "hello cart", //remove this line to use cart.html 
 
     templateUrl: "cart.html" 
 
     }) 
 
     .when("/step", { 
 
     template: "hello world" 
 
     }); 
 
    }); 
 

 

 
})();
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 
 
    <script data-require="[email protected]*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="ecom"> 
 
    <a href="#/step">To Step</a> 
 
    <div> 
 
     <div ng-view> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>
또한

것을 설정하는 것입니다

+0

감사합니다 csmithmaui, 그 작품. 그러나, ng-include가 이런 방식으로 작동하지 않는 이유를 정말로 이해하지 못합니다. –

+0

안녕, 안녕. 나는 기술적 인 수준에서 왜 실제로 확신 할 수 없다. 어쩌면 각도를 좀 더 잘 이해하는 사람이 우리에게 설명 할 수 있습니다. ng-include를 사용하면 템플릿 또는 templateUrl 파일에있는 html 만 컴파일되고 전체 ng-include 태그가 대체됩니다. 그러므로 당신의 사진을 닦아 내십시오. – csmithmaui

+0

사실, 왜 ng-include를 사용합니까? –

관련 문제