web-dev-qa-db-ja.com

個別のAngularJSコントローラファイルを作成する方法

AngularJSコントローラはすべて1つのファイルcontrollers.jsに収められています。このファイルは次のように構成されています。

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

私がやりたいことはCtrl1とCtrl2を別々のファイルに入れることです。次に両方のファイルを私のindex.htmlに含めますが、それはどのように構成されるべきですか？私はこのようなことをやろうとしました、そしてそれはそれが私のコントローラを見つけることができないと言うウェブブラウザコンソールでエラーを投げます。何かヒントは？

私はStackOverflowを検索し、この同じような質問を見つけました - しかし、この構文はAngularの上に異なるフレームワーク（CoffeeScript）を使っているので、私は従うことができませんでした。

AngularJS：複数のファイルにコントローラを作成する方法

javascriptangularjscontroller
314
Beebunny

ファイル1

angular.module('myApp.controllers', []);

ファイル2

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

ファイル3：

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

その順序で含めてください。私は3つのファイルをお勧めしますので、モジュール宣言はそれ自身のものです。

フォルダ構造に関しては、この件に関する多くの意見がたくさんありますが、この二つはかなり良いです

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html

395
Fresheyeball

Angular.module APIを使用して 最後に配列を指定して は、新しいモジュールを作成するようにangleに指示します。

myApp.js 

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

配列なしでそれを使うことは、実際にはゲッター関数です。コントローラを切り離すために、次のことができます。

Ctrl1.js 

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js 

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

JavaScriptのインポート中は、 myApp.js がAngularJSの後、コントローラ/サービスなどの前にあることを確認してください。

177
Jimmy Au

両方の答えは技術的には正しいですが、私はこの答えに対して異なる構文の選択を紹介したいと思います。このimhoは、注射で何が起こっているのかを読みやすくしたり、区別したりします。

ファイルワン

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

ファイル2

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

ファイル3

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}
49
jason328

この解決策はどうですか？ ファイル内のモジュールとコントローラ （ページの最後にあります）複数のコントローラ、ディレクティブなどで動作します。

app.js

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

myCtrl.js

app.controller("myCtrl", function($scope) { ..});

html

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

Googleには Angular App Structureの推奨されるベストプラクティスの推奨事項もあります コンテキスト別にグループ化することをお勧めします。 1つのフォルダ内のすべてのHTMLファイルではなく、たとえばログイン用のすべてのファイル（html、css、app.js、controller.jsなど）。だから私がモジュールで作業しているなら、すべてのディレクティブは見つけやすいです。

16
schasoli

簡潔にするために、グローバル変数に依存しないES2015のサンプルを次に示します。

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)
2
Pete TNT

それほど優雅ではありませんが、非常に単純な実装ソリューション - グローバル変数を使用.

"最初の"ファイルでは：


window.myApp = angular.module("myApp", [])
....

"2番目"、 "3番目"などにあります。


myApp.controller('MyController', function($scope) {
    .... 
    });
0
user3682640