AngularJsの謎

作品今何もありません - 私はちょうど空白の画面を取得しています、と私はなぜ....AngularJsの謎

誰も私を啓発することができますするよう見当もつかないを持っていません？
この
は私のHTMLファイルです：

<!doctype html> <head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  <script src="app.js"></script> </head> <body ng-app="myapp"> <div ng-controller="mycontroller as vm"> <label>My company:</label> <hr> <div id="divTeam" ng-repeat="m in vm.team"> <p> {{m.firstname}} {{m.name}} ({{m.tag}}) </p> </div> </div> </body>

、これが私のapp.jsファイル（同じディレクトリ）です....私はそれを得ることはありません

var app = angular.module('myapp', []); app.controller('mycontroller', function ($scope) { $scope.team = [ { name: "Brown", firstname: "Leo", tag: "lebr" }, { name: "Smith", firstname: "Adrian", tag: "adsm" }, { name: "Loflin", firstname: "Wes", tag: "welo" }, { name: "Hackett", firstname: "John", tag: "joha" } ] } );

私は角モジュールを作成しています。myapp

私は私が<div ng-controller="mycontroller as vm">タグ

に私は上のオブジェクトの配列を作成していその参照mycontroller

呼ば角コントローラを作成してい<body ng-app="myapp">タグに

をそのモジュールを参照$scope

ng-repeat="m in vm.team"という指示文を使用してこのオブジェクトの配列を繰り返し処理できることを期待していました

が、私は今取得すべてはちょうどタイトル「私の会社：」と空の画面である - 何もない.....

私は角度JSファイルへのURLをチェックする - それは正しいです私の知る限り。

私は、IEやChromeのJavaScriptコンソールをチェックしません - どこでも見られるようにエラーまたは情報メッセージを.....

私はHTMLに{{1+2}}のような単なる少し表現を追加した場合、それがevaluted取得ん」 3 "なので、Angularが稼働していることは確かです....

私は何が分かりませんか？

出典

2016-05-04 marc_s

あなたはng-controller="mycontroller as vm"を書くとき、あなたは$scope

の代わりに thisにデータをバインドする必要がcontrollerAs構文を使用します（私は.....常にすべての物事のJavascriptに苦しんで、長時間の.NET開発者です）

app.controller('mycontroller', function ($scope) { 
     this.team = [ 
      { name: "Brown", firstname: "Leo", tag: "lebr" }, 
      { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
      { name: "Loflin", firstname: "Wes", tag: "welo" }, 
      { name: "Hackett", firstname: "John", tag: "joha" } 
     ] 
    } 
);

または、構文を削除します。

出典

2016-05-04 09:02:59 Walfrat

私は 'controller as ...'を使わないで 'ng-controller =" mycontroller "'と書いています。どうすれば配列を正しく設定する必要がありますか？ –

これがうまくいけば、vm.teamの 'ng-repeat =" mをチーム "'の 'ng-repeat =" mに変更するだけです。 ControllerAsの構文は、たくさんの 'ng-controller'を使用する場合に特別に推奨されます。個人的に私はそれを使用しないでください。 – Walfrat

これは**狂気です** - 後でコードでコントローラを使用する方法は、 '$ scope'に含まれているデータメンバの設定をどのようにしなければならないのかを指示していますか？！?? *** <不安を揺さぶる> *** –

「チーム」は$の範囲にあるので、あなたが直接あなたのビューで「チーム」を呼び出すことができます：あなたはちょうどここvm.team からvmをremouveする必要が

<body ng-app="myapp"> 
    <div ng-controller="mycontroller as vm"> 
     <label>My company:</label> 
     <hr> 
     <div id="divTeam" ng-repeat="m in team"> 
      <p> 
       {{m.firstname}} {{m.name}} ({{m.tag}}) 
      </p> 
     </div> 
    </div> 
</body>

出典

2016-05-04 09:06:54

は作業plunker

出典

2016-05-04 09:12:45

です

JSコントローラー：（John Papa Angular 1 Style Guideように）次のように

一つのアプローチは、vmに結合this

で

var app = angular.module('myapp', []); 

app.controller('MyController', function() { 
    var vm = this; 

    vm.teams = [ 
     { name: "Brown", firstname: "Leo", tag: "lebr" }, 
     { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
     { name: "Loflin", firstname: "Wes", tag: "welo" }, 
     { name: "Hackett", firstname: "John", tag: "joha" } 
    ]; 
});

ここでは使用しないため、$scope依存関係は必要ありません。

そしてHTMLには、次の構文を使用します。

<div ng-controller="MyController as mc"> 
    <div ng-repeat="team in mc.teams"> 
     <p> 
      {{team.firstname}} {{team.name}} ({{team.tag}}) 
     </p> 
    </div> 
</div>

第二のアプローチは、次のよう$scopeを使用することです：

var app = angular.module('myapp', []); 

app.controller('MyController', function ($scope) { 
    $scope.teams = [ 
     { name: "Brown", firstname: "Leo", tag: "lebr" }, 
     { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
     { name: "Loflin", firstname: "Wes", tag: "welo" }, 
     { name: "Hackett", firstname: "John", tag: "joha" } 
    ]; 
});

をここでは$scopeを使用しています。

とHTMLではこのようなものです：

<div ng-repeat="team in teams"> 
    <p> 
     {{team.firstname}} {{team.name}} ({{team.tag}}) 
    </p> 
</div>

は、適切なコントローラで、特定のHTMLページをバインドすることを忘れないでください。

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/myPage', { 
      templateUrl: 'views/myPage.html', 
      controller: 'MyController' 
     }). 
     otherwise({ 
      redirectTo: '/404' 
     }); 
}]);

あなたはあなたが決めるものは何でも、$routeProviderまたは$stateProviderを使用することができます。

出典

2016-05-04 09:16:12

特にJohn Papaのスタイルガイドへのリンクありがとうございます.Javascript + Angularに関して学ぶにはまだ*たくさんあるようですね！ –

AngularJsの謎

答えて

関連する問題