2014-06-25 3 views
0

여기에 v1.2.12 용 AngularJS 튜토리얼을 작성하려고합니다. 내 로컬 호스트에있는 내용은 튜토리얼 자체에있는 라이브 데모와 많이 다릅니다.AngularJS 튜토리얼은 표현식을 읽지 않습니다.

주로 처음 몇 단계부터 시작하여 내 표현을 읽지 않습니다. 코드에서 잘라내어 붙여 넣는 것처럼 일반 텍스트로 표시됩니다. 0 단계에서 예를 들어

, 내 로컬 호스트는 여기에 나에게

아무것도 제공하지 않습니다 {{ '아직'+ '!'}}

사이트에서 라이브 데모

아무것도 제공하지 않습니다 동안 여기 아직!

다른 단계에서도 마찬가지입니다. 웬일인지 1 단계는 웹 페이지에서와 똑같이 작동합니다.

이 기능은 무엇입니까? Angular의 일부분을 설치하는 것을 잊었습니까? 또는 무엇을? 자습서가 엉망이 되었습니까? 여기

은 여전히 ​​잘못을 수행하는 코드의 예 : 나는 단계-5 -f이 하나 자식 체크 아웃을 사용하고,
<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>Google Phone Gallery</title> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="js/controllers.js"></script> 
</head> 
<body ng-controller="PhoneListCtrl"> 

    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 
     <!--Sidebar content--> 

     Search: <input ng-model="query"> 
     Sort by: 
     <select ng-model="orderProp"> 
      <option value="name">Alphabetical</option> 
      <option value="age">Newest</option> 
     </select> 

     </div> 
     <div class="col-md-10"> 
     <!--Body content--> 

     <ul class="phones"> 
      <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
      <span>{{phone.name}}</span> 
      <p>{{phone.snippet}}</p> 
      </li> 
     </ul> 

     </div> 
    </div> 
    </div> 

</body> 
</html> 

대신은에서와 같이 나에게 전화의 긴 목록을주는 데모, 나는 로컬 서버에서 index.html을 실행할 때 {{phone.name}}과 {{phone.snippet}} 만 보았습니다.

+0

모든 콘솔 오류? ng-app를 html 태그에 추가 했습니까? –

+3

적어도 코드를 게시 할 수 있습니까? –

+0

정말요? 나는 "자습서를 비판하고있다"고?이 코드는 자습서가 말한 것과 정확히 동일하며 "git checkout -f step- #"을 사용하더라도 여러 단계에서 똑같은 작업을 수행합니다. 나는 무엇이 잘못되었는지 알아 내려고 노력하고있다. – Femtosecond

답변

0

아마도 누락되었습니다. 모든 기본 각도 자습서가 작동합니다. 불행히도 코드 없이는 실제 이유를 제시 할 수 없습니다. 다음과 같이 추측 할 수 있습니다 :

  1. 정확하게 anglejs.js 파일 및 각도 캔트 부트 스트랩 코드를 포함하지 않습니다.

  2. 서버 인스턴스 (예 : apache 또는 nodejs)에서 제공하는 것이 아니라 html 파일을 열어 브라우저에서 로컬로 html을 실행하려고합니다.

이러한 솔루션은 몇 가지 안전 제한 때문에 스크립트를 포함하여 작동하지 않습니다. 서버를 사용하거나 디스크의 스크립트 파일을 링크하는 대신 CDN 각도 링크를 사용해보십시오.

3. 각도 코드가 잘못되었습니다.

+0

이봐, 나는 그것이 무엇인지 알 수 없다. git checkout -f step- # soandso를 사용하므로 자습서와 마찬가지로 코드가 완벽하므로 여전히 작동하지 않습니다. 나는 카르마를 사용하여 로컬 서버도 호스팅하고 있습니다. 새 터미널 창에 ./scripts/web-server.js를 입력하면 bash 오류가 발생하지 않으므로 "sudo npm start"를 통해 Karma를 사용해야합니다. No File or No Files. – Femtosecond

+0

임 전화에, 그래서 내가 innacurate 수 있습니다 ... bower 설치 제대로 작동 했나요? 자동으로 실행되어야하지만, 나에게 한 번 조용히 실패했습니다 (npm 설치시). 설치하고 확인하십시오. – Jarema

+0

CDN 각 소스 대신 로컬 CDN 각 소스를 연결하고 도움이되는지 확인해야합니다. – Jarema

0

이이 당신에게

<!DOCTYPE html> 
<html ng-app> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
Nothing here {{'yet' + '!'}} 
</body> 
</html> 

을 도움이 될 것입니다 demo 희망 난 당신이 "각 JS"또는 NG-응용 프로그램 지침

+0

내 코드는 튜토리얼과 동일하므로 "git checkout -f step- # soandso"를 사용하고 있습니다. 이것은 튜토리얼입니다 -> https://code.angularjs.org/1.2.9/docs/tutorial/step_00 – Femtosecond

+0

이상하게도 튜토리얼에서 가져온 코드는 내가 게시 한 데모 사이트에서 똑같은 것을 제공합니다. 그런데 코드 자체가 작동하지 않는데 왜 실제 버전으로 라이브 데모를 제공할까요? – Femtosecond

+0

@Femtosecond에 bower와 "bower components"를 설치했는지 확인했습니다. 누락 된 것 같습니다. –

1

는 답변을 추가하는 것을 잊지 생각!

NPM 설치로 인해 bower가 적절한 설치를 수행하지 못했습니다.

은 튜토리얼에 저장되어있는 해당 디렉토리에있는 동안 명령 줄에서 "정자 설치를"전 세계적으로 정자를 설치하고 실행하여 수정되었습니다.

관련 문제