javascript 예제 - 별도의 AngularJS 컨트롤러 파일을 만드는 방법은 무엇입니까?




페이지 이동 (6)

모든 AngularJS 컨트롤러는 하나의 파일 인 controllers.js에 있습니다. 이 파일은 다음과 같이 구성되어 있습니다.

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

내가하고 싶은 것은 Ctrl1과 Ctrl2를 별도의 파일에 넣는 것입니다. 그런 다음 두 파일을 내 index.html에 포함 시키겠다. 어떻게 구성해야합니까? 이런 일을 시도하고 웹 브라우저 콘솔에서 컨트롤러를 찾을 수 없다는 오류가 발생합니다. 어떤 힌트?

를 검색하여 이와 비슷한 질문을 발견했습니다. 그러나이 구문은 Angular 위에 다른 프레임 워크 (CoffeeScript)를 사용하고 있으므로 따라갈 수 없었습니다.

AngularJS : 여러 파일에 컨트롤러를 만드는 방법


Answers

끝에 배열이 있는 angular.module API 사용하면 각도를 지정하여 새 모듈을 만들 수 있습니다.

myApp.js

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

배열없이 그것을 사용하는 것은 실제로 getter 함수입니다. 따라서 컨트롤러를 분리하려면 다음을 수행 할 수 있습니다.

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) {}]);

자바 스크립트를 가져 오는 동안 myApp.js 가 AngularJS 뒤에 있지만 컨트롤러 / 서비스 / etc 앞에 있는지 확인하십시오. 그렇지 않으면 각도가 컨트롤러를 초기화 할 수 없습니다.


너무 우아하지 않지만 구현 변수가 매우 간단합니다. 전역 변수를 사용합니다.

"첫 번째"파일에서 :


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

"두 번째", "세 번째"등 :


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

이 솔루션은 어떻습니까? 파일의 모듈과 컨트롤러 (페이지 끝 부분) 여러 컨트롤러, 지시어 등에서 작동합니다 :

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은 앵귤러 앱 구조에 대한 모범 사례 권장 사항을 가지고 있습니다. 문맥에 따라 그룹화하는 것이 좋습니다. 한 폴더에있는 모든 HTML은 아니지만 예를 들어 로그인 용 모든 파일 (html, css, app.js, controller.js 등)이 있습니다. 따라서 모듈에서 작업하면 모든 지시문을 쉽게 찾을 수 있습니다.


간략하게, 전역 변수에 의존하지 않는 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)

두 대답 모두 기술적으로는 정확하지만이 대답에 대해 다른 구문 선택을 도입하고자합니다. 이 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
}

  1. 단방향 데이터 바인딩은 데이터 모델에서 값을 가져 와서 HTML 요소에 삽입하는 방식입니다. 보기에서 모델을 업데이트 할 수있는 방법은 없습니다. 이것은 고전적인 템플릿 시스템에서 사용됩니다. 이러한 시스템은 한 방향으로 만 데이터를 바인딩합니다.

  2. 각도 응용 프로그램의 데이터 바인딩은 모델과 뷰 구성 요소 간의 데이터 자동 동기화입니다.

데이터 바인딩을 통해 모델을 애플리케이션에서 단일 소스로 취급 할 수 있습니다. 뷰는 항상 모델의 투영입니다. 모델이 변경되면 뷰에는 변경 사항이 반영되고 반대의 경우도 마찬가지입니다.





javascript angularjs controller