ng-Controller 예제를 사용한 AngularJS 컨트롤러

AngularJS의 컨트롤러란 무엇입니까?

A 제어 장치 AngularJS에서 컨트롤러는 뷰에서 데이터를 가져와 처리한 후 최종 사용자에게 표시되는 뷰로 전달합니다. 컨트롤러는 핵심 비즈니스 로직을 담고 있으며, 데이터 모델을 사용하여 필요한 처리를 수행하고 그 결과를 뷰로 전달합니다.

⚠️ 버전 참고: AngularJS(1.x 버전)는 2021년 12월 31일부로 지원이 종료되었으며 더 이상 보안 패치가 제공되지 않습니다. 아래 개념들은 기존 애플리케이션에는 여전히 적용되지만, 최신 Angular에서는 컨트롤러 대신 컴포넌트 클래스가 동일한 역할을 수행합니다.

컨트롤러가 무엇인지 알았다면 한 가지 질문이 남습니다. 바로 컨트롤러가 뷰와 실제로 어떻게 통신하는가 하는 것입니다. 다음 섹션에서 그 답을 알려드립니다.

Angular 관점에서 컨트롤러의 역할은 무엇인가

다음은 AngularJS 컨트롤러의 작동 방식에 대한 간단한 설명입니다.

• 컨트롤러의 주요 임무는 뷰에 전달되는 데이터를 제어하는 ​​것입니다. 범위와 보기에는 양방향 통신이 있습니다.
• 뷰 속성과 이벤트는 스코프 내의 함수를 호출할 수 있습니다. 아래 코드 조각은 그 예시를 보여줍니다. 함수($범위) 컨트롤러와 내부 함수를 사용하여 선언됨 $scope.firstName $scope.lastName 참여했습니다. AngularJS와변수로 정의된 함수는 메서드입니다.

• 데이터는 컨트롤러에서 스코프로 전달된 후, 스코프와 뷰 사이에서 다시 컨트롤러에서 뷰로 전달됩니다.
• 스코프는 뷰에 모델을 노출합니다. 모델은 스코프에 정의된 메서드를 통해 수정할 수 있으며, 이러한 메서드는 뷰에서 발생하는 이벤트에 의해 호출됩니다.
• 컨트롤러는 DOM을 조작하는 데 사용해서는 안 됩니다. 그것은 컨트롤러의 역할입니다. ��ħ.
• 컨트롤러를 만들 때는 기능에 기반하는 것이 가장 좋습니다. 예를 들어 입력 폼에 컨트롤러가 필요하다면 "폼 컨트롤러"라는 이름의 컨트롤러를 만들면 됩니다.

메커니즘을 이해했으니, 다음 섹션에서는 빈 페이지에서 컨트롤러를 구축하는 방법을 살펴보겠습니다.

AngularJS에서 기본 컨트롤러를 구축하는 방법

다음은 AngularJS에서 컨트롤러를 생성하는 단계입니다.

1단계) 기본 HTML 페이지 생성

컨트롤러를 생성하기 전에 기본 HTML 페이지가 있어야 합니다. 아래 코드 조각은 "이벤트 등록"이라는 제목의 간단한 페이지로, 컨트롤러를 참조합니다. Bootstrap 그리고 AngularJS.

1. 다음에 대한 참조 Bootstrap CSS 스타일시트는 다음과 함께 사용됩니다. Bootstrap 도서관.
2. AngularJS 라이브러리에 대한 참조입니다. 이후 AngularJS를 사용한 모든 작업은 이 파일을 기준으로 처리됩니다.
3. 에 대한 참조 Bootstrap 특정 컨트롤이 반응형이 되도록 하는 라이브러리입니다.

⚠️ 보정: 원래 코드는 jQuery를 로드하고 AngularJS가 jQuery에 의존한다고 명시했지만, 사실은 그렇지 않습니다. AngularJS는 jQuery API의 내장 하위 집합인 jqLite를 제공하며, jQuery가 로드될 때만 전체 jQuery로 업그레이드됩니다. 전에 그것. 참조가 삭제되었습니다.

2 단계) 파일 및 파일 구조 확인

1. 파일은 일반적인 웹 애플리케이션처럼 "css" 폴더(스타일시트용)와 "lib" 폴더(기타 파일용)로 나뉘어 있습니다. JavaScript 파일.
2. bootstrap.css 파일은 css 폴더에 있으며 사이트의 모양과 느낌을 결정합니다.
3. angular.js는 AngularJS 웹사이트에서 다운로드하여 lib 폴더에 저장한 주요 라이브러리입니다.
4. app.js 파일에는 컨트롤러 코드가 포함될 것입니다.

3단계) ​​AngularJS 코드를 사용하여 출력 표시

여기서 목표는 브라우저에서 페이지가 열렸을 때 "AngularJS"라는 단어를 일반 텍스트와 텍스트 상자 안에 모두 표시하는 것입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code 설명 :

1. ng-앱 이 요소는 AngularJS 애플리케이션의 루트임을 나타냅니다. 접두사가 붙은 속성 응- 내장 명령어입니다. "DemoApp"은 애플리케이션에 지정된 이름입니다.
2. div는 운반합니다 ng-컨트롤러 "DemoController"라는 이름을 사용하면 해당 요소와 그 안에 있는 모든 요소가 컨트롤러 범위에 접근할 수 있게 됩니다.
3. ng 모델 튜토리얼 이름 텍스트 상자를 범위 속성에 연결하는 모델 바인딩을 생성합니다. tutorialName.
4. 모듈 DemoApp 생성되고 컨트롤러는 기본값으로 "AngularJS"를 할당합니다. tutorialName.

⚠️ 수정 사항이 적용되었습니다. 원래 목록에는 다음과 같이 명시되어 있었습니다. chrset="UTF 8"이는 유효한 속성도 아니고 유효한 인코딩 이름도 아니며, AngularJS를 두 번 로드했습니다. 한 번은 CDN에서, 또 한 번은 다른 곳에서 로드했습니다. lib/angular.js라이브러리를 두 번 로드하면 모듈 시스템이 다시 등록되어 예측할 수 없는 동작이 발생합니다. 의존성 배열 어노테이션 ['$scope', function($scope){…}] 또한, 이 기능이 추가되었는데, 이 기능이 없으면 파일이 축소되는 순간 컨트롤러가 작동을 멈춥니다.

출력:

때문에 tutorialName 해당 속성에는 "AngularJS"라는 값이 할당되었으며, 이 값은 텍스트 상자와 일반 텍스트 줄에 나타납니다. 데모에서는 하나의 속성만으로도 충분하지만, 실제 컨트롤러는 일반적으로 동작도 함께 노출하며, 이는 다음 섹션에서 다룹니다.

AngularJS 컨트롤러에서 메서드를 정의하는 방법

일반적으로 컨트롤러에서는 비즈니스 로직을 분리하기 위해 여러 메서드를 정의합니다. 예를 들어 컨트롤러에서 두 숫자를 더하고 빼야 하는 경우를 생각해 보겠습니다.trac두 숫자를 다룰 때는 각 연산마다 하나의 메서드를 만들어야 합니다.

아래 예제는 AngularJS 컨트롤러 내부에 문자열을 반환하는 사용자 지정 메서드를 정의합니다.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code 설명 :

1. 함수는 스코프 객체에 멤버로 연결됩니다. tName현재 값을 반환합니다. tutorialName.
2. 뷰는 해당 메서드를 호출합니다. {{tName()}}괄호가 중요합니다. 괄호가 없으면 표현식이 함수의 결과가 아닌 함수 자체를 출력합니다.

⚠️ 보정: 원래 방법은 다음과 같습니다. $scope.tName = function() { return $scope.tName; };해당 함수는 튜토리얼 이름이 아닌 자기 자신을 반환하므로 페이지에 텍스트 대신 함수 본문이 표시되었습니다. 이제는 제대로 작동합니다. $scope.tutorialName.

출력:

지금까지 모든 것이 하나의 파일에 저장되어 있었습니다. 하지만 실제 운영 환경에서는 컨트롤러를 별도로 관리하는데, 다음 섹션에서 그 방법을 설명합니다.

ng-Controller 예제가 포함된 AngularJS 컨트롤러

위의 "HelloWorld" 예제에서는 모든 기능을 하나의 파일에 구현했습니다. 이제 컨트롤러 코드를 별도의 파일로 옮길 차례입니다.

단계 1) app.js 파일에 컨트롤러에 대한 다음 코드를 추가하세요.

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

위의 코드는 다음을 수행합니다.

1. 컨트롤러를 담는 "app"이라는 모듈을 정의합니다.
2. "HelloWorldCtrl"이라는 이름의 컨트롤러를 생성하여 "Hello World" 메시지를 표시합니다.
3. 컨트롤러에서 뷰로 정보를 전달하기 위해 스코프 객체를 사용합니다. 이 경우 전달되는 정보는 'score'라는 변수입니다. message.

단계 2) Sample.html 파일에 ng-controller 디렉티브와 멤버 변수에 대한 참조를 포함하는 div를 추가하세요. message컨트롤러 소스 코드가 담긴 app.js 파일을 참조하는 것을 잊지 마세요.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ 보정: app.js 파일이 로드되어야 합니다. 시간 내에 angular.js를 호출하기 때문입니다. angular.module원본 또한 라이브러리를 두 번 로드하여 동일한 내용을 담고 있었습니다. chrset 오식.

출력:

지금까지의 모든 예시는 읽기 및 쓰기 속성을 직접 가지고 있습니다. $scope아래 섹션에서는 AngularJS 팀에서 권장하는 대안을 다룹니다.

AngularJS에서 `controllerAs` 구문을 사용하는 방법

직접 바인딩 $scope 작동은 하지만 컨트롤러가 중첩되면 모호해집니다. 뷰 표현식은 다음과 같습니다. {{name}} 어떤 컨트롤러가 소유하고 있는지 전혀 알 수 없습니다. name자식 스코프는 부모 스코프로부터 프로토타입적으로 상속받기 때문에, 상속받은 기본 요소에 쓰는 중첩 컨트롤러는 자체적인 섀도 복사본을 조용히 생성합니다. controllerAs 이 구문은 각 컨트롤러에 별칭을 부여함으로써 두 가지 문제를 모두 해결합니다.

단계 1) 뷰에서 컨트롤러에 별칭을 지정하려면 다음을 사용하세요. as 키워드를 선택한 다음, 모든 바인딩에 해당 별칭을 접두사로 붙입니다.

단계 2) 컨트롤러 내부에서 속성을 연결합니다. this 오히려 $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

세 가지 이점이 있습니다. 바인딩이 자체적으로 문서화되는 이유는 다음과 같습니다. demo.tutorialName 소유자 이름을 지정합니다. 부모 컨트롤러가 별칭을 지정했기 때문에 중첩된 컨트롤러 간의 충돌이 발생하지 않습니다. outer 그리고 아이는 가명을 사용했습니다. inner 둘 다 드러낼 수 있다 name또한 값은 단순한 기본형이 아닌 객체를 통해 바인딩됩니다.ping 자식 노드의 수정 사항이 부모 노드에 반영되지 않는 함정.

💡 Tip 포착 this 예를 들면 다음과 같은 변수로 변환합니다. vm 컨트롤러의 맨 위에. 콜백 함수 안에, this 이는 완전히 다른 것을 참조하며, 캡처된 참조는 바인딩을 올바르게 유지합니다.

바인딩 스타일을 선택하는 것은 하나의 결정입니다. 컨트롤러에 무엇을 포함시켜야 하는지 결정하는 것은 또 다른 결정이며, 아래 비교는 그 경계를 명확히 합니다.

AngularJS에서 컨트롤러와 서비스 비교

초보자들은 흔히 서비스에 속하는 작업을 컨트롤러에 과도하게 할당하는 경향이 있습니다. 둘의 차이점은 수명과 재사용성입니다. 컨트롤러는 뷰가 화면에 표시되는 동안에만 존재하지만, 서비스는 애플리케이션의 수명 동안 존재하는 싱글턴입니다.

컨트롤러는 간결하게 유지하세요. 두 컨트롤러가 동일한 로직을 필요로 하거나, 뷰 간 이동 시에도 값이 유지되어야 하는 경우, 해당 로직을 서비스로 분리하고 필요한 곳에 서비스를 주입하세요. 실질적인 판단 기준은 현재 화면이 닫힌 상태에서도 코드가 여전히 유효한지 확인하는 것입니다. 만약 그렇다면, 해당 코드는 서비스에 속하는 것이 맞습니다.

자주 묻는 질문