AngularJSはVisual Studioで動作しませんか？

AngularJSの学習を始めたばかりですが、簡単なコントローラメソッドを書き始める前にeverthingがうまく動作していますが、ng-contollerを含めても動作しません。分離されたjsファイルとしてインクルードしようとしましたが、私はangularJSを初めて使っているので、notped ++でも同じことをやってみましたが、これは私のコードです。あなたがどこかのコードでモジュールを定義していないAngularJSはVisual Studioで動作しませんか？

<!DOCTYPE html> 
<html data-ng-app=""> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="Scripts/bootstrap.min.js"></script> 
    <script src="Scripts/angular.min.js"></script> 

</head> 
<body> 
    <div class="container" data-ng-controller="AppController"> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">Contact Manager</a> 

      </div> 
      <div class="collapse navbar-collapse" id="nav-toggle"> 
       <ul class="nav navbar-nav"> 
        <li class="alert-success"><a href="/">Browse</a></li> 
        <li><a href="/add">Add contacts</a></li> 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
        <input type="text" class="form-control" placeholder="Search"/> 
       </form> 
      </div> 
     </nav> 
     <div class="page-header"> 
      <h2>Prvo poglavlje <small>Hello world</small></h2> 
     </div> 
     <div class="container"> 
      <div class="jumbotron"> 
       <h1>Hello, {{name||"World"}}</h1> 
       <input type="text" class="form-control input-lg" data-ng-model="name" /> 

      </div> 
      <div class="row"> 
       <div class="col-sm-8 pull-right hidden-lg" > 
        <div class="row"> 
         <div class="col-sm-6"> 
          <p>Prvi</p> 
         </div> 
         <div class="col-sm-6"> 
          <p>Drugi</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4 pull-left show" > 
        This is our sidebar 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-8"> 
        <button ng-click="clickHandler()">Click me</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script> 
     function AppController($scope) { 
      $scope.clickHandler = function() { 
       window.alert("Clicked"); 
      }; 
     } 
    </script> 
</body> 
</html>

出典

2016-08-07 jhony3

あなたが前にあなたのcontrollerをインスタンス化moduleを定義する必要があります。

angular 
 
    .module('app', []) 
 
    .controller('AppController', AppController); 
 

 
AppController.$inject = ['$scope']; 
 

 
function AppController($scope) { 
 
    $scope.clickHandler = function() { 
 
    window.alert("Clicked"); 
 
    }; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container" ng-controller="AppController"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="/">Contact Manager</a> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse" id="nav-toggle"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="alert-success"><a href="/">Browse</a></li> 
 
      <li><a href="/add">Add contacts</a></li> 
 
     </ul> 
 
     <form class="navbar-form navbar-right" role="search"> 
 
      <input type="text" class="form-control" placeholder="Search" /> 
 
     </form> 
 
     </div> 
 
    </nav> 
 
    <div class="page-header"> 
 
     <h2>Prvo poglavlje <small>Hello world</small></h2> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="jumbotron"> 
 
     <h1>Hello, {{name||"World"}}</h1> 
 
     <input type="text" class="form-control input-lg" data-ng-model="name" /> 
 

 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-8 pull-right hidden-lg"> 
 
      <div class="row"> 
 
      <div class="col-sm-6"> 
 
       <p>Prvi</p> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <p>Drugi</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4 pull-left show"> 
 
      This is our sidebar 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-8"> 
 
      <button ng-click="clickHandler()">Click me</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-08-07 17:03:09 developer033

投稿した回答との違いは？ – Sajeetharan

あなたのポストにコントローラの構築はありませんか？ – developer033

これはうまくいけば、私はいくつかの説明を教えてくれますか？ – jhony3

、ビューで

：JSで

<html ng-app="myApp">

：

var app = angular.module("myApp", []);

ワーキングSample

出典

2016-08-07 16:56:10 Sajeetharan

それはまだ動作しませんか？ – jhony3

@ jhony3サンプルを確認してください – Sajeetharan

角度モジュールを含める必要があります。角はモジュールで動作します。コントローラはモジュールの一部です。

このような何か試してみてください：

app = angular.module("myApp", []); 
app. Controller(...);

をそして

<html ng-app="myApp">

ようなあなたのhtmlで、このモジュールを使用するには、また、使用しているコントローラ宣言が古いです。これを試してみてください：

app.controller('controllerName', ['$scope', function($scope){...}]);

出典

2016-08-07 16:58:43

私はこの本の初心者です試してみます私はそれについて何も書いていません – jhony3

私はこの新しい宣言を結んで、それは素晴らしいthxを結びました – jhony3

助けてくれてうれしいです。ハッピーラーニング。 –

AngularJSはVisual Studioで動作しませんか？

答えて

関連する問題