22

anglejsでは、コントローラーをに定義しますwindow。これは他のモジュールやプラグインとの名前の衝突を引き起こしjsませんが、それでも良い習慣ではありません。単一のアプリケーションが単一のオブジェクトをグローバル名前空間に公開する必要があります。

これは通常の方法であり、次のように定義されていwindowます。

function UserController($scope) { ... }

HTML：

<div ng-controller="UserController">

これは私が思うことです：

myApp.UserController = function ($scope) { ... };

その場合、私はこのようにhtmlからコントローラーを開始する必要があります

<div ng-controller="myApp.UserController">

どう思いますか？

4

3 に答える 3

22

それを回避する方法の1つは、説明した方法のようにAngular自体内で定義することです。言い換えると：

angular.module('YourApp').controller('ControllerName', function($scope) {})

上記の方法がグローバル名前空間を汚染しないことを確認しました。

<div ng-controller="myApp.UserController">編集:属性 ng-app で myApp を定義できるので、使用する必要もありません:<body ng-app="myApp">そうすれば、毎回 myApp のプレフィックスを付けずに ng-controller を呼び出すことができます。

于 2012-08-25T13:12:44.190 に答える
1

コントローラーを定義する最もクリーンな方法は、ファイルごとに 1 つです。各ファイルは、即時起動関数式 (IIFE) またはグローバル スコープを汚染することなく独自のローカル変数を持つことができるクロージャーでラップする必要があります。これが私のプロジェクトでのアプローチです。

my-app.js - プライマリ モジュール定義ファイル - このファイルの主な目的は、アプリケーション モジュールとその依存関係を定義し、ルーティングを定義し (ルーティングが使用されている場合)、プロバイダーを構成することです。最も単純な形式では、次のようになります。

(function (angular) {
  angular.module('myApp', ['myApp.someFeature']);
}(angular));

some-feature/some-feature.js - 機能モジュール定義ファイル - このファイルは、機能のモジュールと、この機能が必要とする依存関係を定義します。これは、機能だけでなく、任意の論理グループにすることができます。これにより、必要に応じて機能を別のモジュールまたはアプリケーションに簡単に組み込むことができます。

(function (angular) {
  angular.module('myApp.someFeature', []);
}(angular));

some-feature/some-feature-controller.js - 機能に必要なコントローラー - 機能に複数のコントローラーが含まれている場合は、よりわかりやすい名前が必要ですが、この機能には 1 つのコントローラーしか必要ないと仮定します。

(function (angular) {
  function SomeFeatureController($scope) {
    ...
  }

  angular
    .module('myApp.someFeature')
    .controller('SomeFeatureController', SomeFeatureController);
}(angular));

index.html - ページの html ファイル - かなり自明です

<html ng-app="myApp">
  <head>
    <title>My Angular App</title>
    <!-- Note: Angular and jQuery (if used) go in head so they delay view loading -->
    <script type="text/javascript" language="javascript" src="angular.js"></script>
  </head>
  <body ng-controller="SomeFeatureController">
    Content here....
    <!-- Note application files go at the end of the body so they do not delay view loading -->
    <script type="text/javascript language="javascript src="my-app.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature-controller.js">
  </body>
</html>
于 2014-11-26T09:35:56.673 に答える
0

btesser が示唆しているように、コントローラを個別のファイルと関数に記述し、コントローラの関数プロトタイプでそのメソッドを定義することは、AngularJS アプリのベスト プラクティスです。クロージャーまたは IIFE を使用して、グローバル名前空間の汚染を防ぐことができます。これにより、関数は現在のコンテキストにのみ公開されます。

(function(){
'use strict';

angular.module('myApp', [])
.controller('MyAppCtrl', MyAppCtrl)

;
  
function MyAppCtrl(){
  this.greeting = 'I\'m app ctrl';
}
  
MyAppCtrl.prototype.hello = function(){
  alert(this.greeting);
}

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyAppCtrl as ctrl">
  <pre>{{ctrl | json}}</pre>
  <button ng-click="ctrl.hello()">Hello!</button>
</div>
  

	
</body>

于 2014-12-17T16:38:58.257 に答える