angularjsでは、コントローラをwindowに定義します。これにより、他のjsモジュールとプラグインとの名前の衝突は発生しませんが、1つのアプリケーションで1つのオブジェクトをグローバル名前空間に公開するようにしてください。angularjsでglobalを汚染しない
これは、通常の方法では、windowに定義されています。
function UserController($scope) { ... }
HTMLは：
<div ng-controller="UserController">
これは私が考えるものです。だから、その場合には
myApp.UserController = function ($scope) { ... };
、IこのようなHTMLからコントローラを起動する必要があります
<div ng-controller="myApp.UserController">
あなたはどう思いますか？
説明する方法のように、Angular自体で定義することが1つの方法です。言い換えれば：
angular.module('YourApp').controller('ControllerName', function($scope) {})
私はグローバルな名前空間を汚染しない、上記の方法を確認しています。
編集：属性ng-appにmyAppを定義できるので、<div ng-controller="myApp.UserController">も使用する必要はありません。<body ng-app="myApp">これで、毎回myAppのプレフィックスを付けずにng-controllerを呼び出すことができます。
コントローラーを定義する最もクリーンな方法は、ファイルごとに1つです。各ファイルは、グローバルスコープを汚染することなく独自のローカル変数を持つことができる、直ちに呼び出される関数式（IIFE）またはクロージャーでラップする必要があります。
my-app.js - プライマリモジュール定義ファイル - このファイルの主な目的は、アプリケーションモジュールとその依存関係を定義し、ルーティング（ルーティングが使用されている場合）を定義することです。プロバイダーを構成します。最も単純な形式では、それは次のようになります。 - 機能モジュール定義ファイル -
(function (angular) {
angular.module('myApp', ['myApp.someFeature']);
}(angular));
一部-機能/一部-feature.jsこのファイルには、機能と、この機能が必要とするすべての依存関係のためのモジュールを定義します。これは、フィーチャだけでなく、任意の論理グループにすることができます。これにより、必要に応じて機能を他のモジュールやアプリケーションに持ち込むことが非常に簡単になります。
(function (angular) {
angular.module('myApp.someFeature', []);
}(angular));
一部-機能/一部-機能-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>
別々のファイルと関数で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>
\t
</body>私はジョン・パパの角度スタイルガイドに従ってください。それは）=私は `module`のオブジェクトが内部` controller`機能を持っていることを知っているが、多くの意味になりませんでした
など、感謝のモジュール、ディレクティブ、サービスのためのスタイルガイドを持っています。 –
角度にはより良い文書が必要です。それは素晴らしいフレームワークですが、急な学習曲線があります –
ng-controllerではなくng-appでモジュールを使用する方法を編集していただきありがとうございます – Alex