2016-08-25 11 views
0

私はMVCプロジェクトを作成し、AngularJS-Materialと必要なすべてのファイルを追加しました。プロジェクト全体でツールバーを表示できるようにするため、AngularJS Appを_Layout.cshtmlページに配置しました。私は別のコントローラを使用して計画されたが、私は新しいスクリプトファイルでコントローラを参照するとき、私は、コントローラが未定義であるというエラーを取得する各ビューの複数のMVCスクリプトファイルで同じAngularJSコントローラを使用するには?

次のコードは正常に動作し、私は、コードの@RenderBody()のセクションで別のビューを追加しようとすると、私が得る唯一の問題があります。それぞれのchstmlファイルで、私は新しいコントローラを定義していますが、同じアプリケーションを保持しています。

<!DOCTYPE html> 
<html ng-app="bPST" ng-controller="layoutCtrl"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
<link href="~/Content/angular-material.min.css" rel="stylesheet" /> 

<script src="~/Scripts/angular.js"></script> 
<script src="~/Scripts/angular-animate.js"></script> 
<script src="~/Scripts/angular-aria.js"></script> 
<script src="~/Scripts/angular-messages.js"></script> 
<script src="~/Scripts/angular-material/angular-material.js"></script> 
<script src="~/Ang_Scripts/bpst.js"></script> 

</head> 
<body> 
    <div layout="column" layout-fill> 
    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <span>Title </span> 
      <!-- fill up the space between left and right area --> 
      <span flex></span> 
      <md-button ng-click="sideBarFunctions()">Menu</md-button> 
     </div> 
    </md-toolbar> 

    <md-sidenav ng-cloak class="md-sidenav-left md-whitefram-z2" md-component-id="left" md-is-open="sideBarOpen"> 
     <div layout="column" layout-align="space-around stretch"> 
      <md-toolbar> 
       <h2 style="text-align: center;">Menu</h2> 
      </md-toolbar> 
      <md-content layout-padding layout="column" layout-align="start"> 
      </md-content> 
     </div> 
    </md-sidenav> 
    <md-content> 
     <div class="container body-content"> 
      @RenderBody() 
     </div> 
    </md-content> 
</div> 
<hr /> 
<footer> 
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
</footer> 
@Scripts.Render("~/bundles/jquery") 
@*@Scripts.Render("~/bundles/bootstrap")*@ 
@RenderSection("scripts", required: false) 

login.js:

var bApp = angular.module('bPST', ['ngMaterial']); 
bApp.controller('loginCTRL',function($scope) { 

$scope.message = "Login"; 
}); 
+0

上記のコードで参照されている 'login.js'が表示されません - それは問題ですか?私はまた、どのようにアプリケーションを構築するつもりか質問します。 "@RenderBody()の別のビューを追加するには、Razorビューについて話していますか?そうであれば、Angularはシングルページアプリケーションで使用される傾向があります。 –

答えて

0

だから、問題は、私はJSでアプリケーションを作成していた方法でより多くのでした。ここ

は私のレイアウトファイルでありますファイル。

私はこれをやっていました。

var bPSTApp = angular.module('bPST', ['ngMaterial']); 

次に、このようなコントローラを作成します。

bPSTApp.controller('layoutCtrl', function ($scope) { 
//Add coding here 

}; 

これに変更すると、動作し始めました。

angular.module('bPST').controller('layoutCtrl', function ($scope) { 
//Add coding here 
}); 

これで、メインのJSファイルで設定していた変数を参照するのではなく、各コントローラファイルのアプリケーションを参照するだけで済みます。

また、login cshtmlファイルでlogin.jsを使用しているため、そのビューで参照されていました。

よく見ると、私が望むように機能し、私はAngularJSとAngularJS材質は単一ページのアプリケーションに適していることを得るかが、私はそれは私のアプリケーションを作成使用したい機能があります。

初心者のミスが大好きです。

+0

すべてのファイルjをレイアウトカミソリに入れます。レイアウトはすべてのページで共有されるため、よりシンプルです。ngRouterを使用するとまたはuiRouter、ページ角度jsのためにpartialviewかみそりを使用してください。そしてあなたのルートを設定するとき、あなたはコントローラの角度への参照を追加する必要があります。 – nevradub

関連する問題