2016-10-18 5 views
0

私はAngularを初めて使い、単純なHello Worldをやろうとしています。下に私のソースファイルを検索してください:Angular - Angular.jsが認識されない

<html > 
    <head> 
    <script src="./node_modules/angular/angular.js"></script> 

    <title>ngClassifieds</title> 
    </head> 
    <body ng-app="ngClassifieds"> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </body> 
</html> 

.. \スクリプト\ ngClassifieds \現在の場所で

angular.module("ngClassifieds",[]); 

をapp.jsファイル構造(NPMを使用して作成)

└───ngClassifieds 
    │ index.html 
    │ package.json 
    │ 
    ├───css 
    ├───node_modules 
    │ ├───angular 
    │ │  angular-csp.css 
    │ │  angular.js 
    │ │  angular.min.js 
    │ │  angular.min.js.gzip 
    │ │  angular.min.js.map 
    │ │  bower.json 
    │ │  index.js 
    │ │  LICENSE.md 
    │ │  package.json 
    │ │  README.md 

私は現在2つの問題に直面しています:

  1. 私は\ ngClassifieds \ node_modules \角度\ angular.jsを使用している場合、私はNG-アプリ= index.htmlファイルで "ngClassifieds"、角度ストップが作動(下記の出力を参照)
  2. にNG-アプリを設定した場合ファイル、代わりにhttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.jsの、それが動作しなくなった(下記参照出力)

エラー: enter image description here

私はNG-アプリのパラメータを削除し、代わりにhttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.jsを使用する場合に予想されるとして、それが動作するのに対し:

enter image description here

これは作業のindex.htmlです:あなたはモジュールを定義している間、あなたはacuallyあなたのファイルに含まれていませんし、それがエラーを与える理由です

<html > 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

    <title>ngClassifieds</title> 
    </head> 
    <body ng-app> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </body> 
</html> 
+0

あなたの 'ng-controller'はどこですか? – ryanyuyu

+0

私は持っていません。私はここに記載されている手順に従っていますhttps://school.scotch.io/getting-started-with-angularjs-1x/making-a-hello-world-app – user1829136

答えて

0

。探しているモジュールが含まれていないので(ngClassifieds)存在しません。ただ、角度の後にあなたのヘッダーであなたのapp.jsファイルをインクルードし、それが実行されます:EDITEDを

<html> 
    <head> 
    <script src="./node_modules/angular/angular.js"></script> 
    <script src="/ngClassifieds/scripts/app.js"></script> <!-- Include it here--> 
    <title>ngClassifieds</title> 
    </head> 
    <body ng-app="ngClassifieds"> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </body> 
</html> 

としてはapp.jsファイルへのパスが間違っていた、と指摘しました。それを固定した後、それは働いた。

+0

あなたの提案を使用しましたが、うまくいかなかった: – user1829136

+0

申し訳ありませんが、それは前に行かなかった: <スクリプトsrcは= "node_modules /角度/ angular.js"> <スクリプトsrcは= "ngClassifieds /スクリプト/ app.js"> ngClassifieds <ボディNG-アプリ= "ngClassifieds">


Hello {{yourName}}!

user1829136

+1

「app.js」ファイルがどこにあるかは完全にはわかりません。正しく取り付けられていますか? –

関連する問題