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

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

A 제어 장치 AngularJS에서는 View에서 데이터를 가져와 처리한 다음 해당 데이터를 View로 전송하여 최종 사용자에게 표시합니다. Controller에는 핵심 비즈니스 로직이 있습니다. Controller는 데이터 모델을 사용하여 필요한 처리를 수행한 다음 출력을 View로 전달하여 최종 사용자에게 표시합니다.

Angular의 관점에서 컨트롤러는 어떤 역할을 합니까?

다음은 AngularJS Controller의 작동 방식에 대한 간단한 정의입니다.

AngularJS 컨트롤러 작동
AngularJS 컨트롤러 작동
  • 컨트롤러의 주요 임무는 뷰에 전달되는 데이터를 제어하는 ​​것입니다. 범위와 보기에는 양방향 통신이 있습니다.
  • 뷰의 속성은 범위에서 "함수"를 호출할 수 있습니다. 게다가 뷰의 이벤트는 범위의 "메서드"를 호출할 수 있습니다. 아래 코드 조각은 함수의 간단한 예를 제공합니다.
    • 이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 함수($범위) $scope.firstName과 $scope.lastName의 연결을 반환하는 데 사용되는 내부 함수와 컨트롤러를 정의할 때 정의됩니다.
    • In AngularJS와, 함수를 변수로 정의하는 것을 메소드(Method)라고 합니다.

AngularJS 컨트롤러 작동

  • 이러한 방식으로 데이터는 컨트롤러에서 범위로 전달되고, 그런 다음 데이터는 범위에서 뷰로 앞뒤로 전달됩니다.
  • 범위는 모델을 뷰에 노출하는 데 사용됩니다. 모델은 뷰의 이벤트를 통해 트리거될 수 있는 범위에 정의된 메서드를 통해 수정될 수 있습니다. 범위에서 모델까지 양방향 모델 바인딩을 정의할 수 있습니다.
  • 컨트롤러는 이상적으로는 DOM을 조작하는 데 사용되어서는 안 됩니다. 이는 나중에 볼 지시문으로 수행해야 합니다.
  • 가장 좋은 방법은 기능에 따라 컨트롤러를 갖는 것입니다. 예를 들어, 입력을 위한 폼이 있고 그에 대한 컨트롤러가 필요한 경우 "폼 컨트롤러"라는 컨트롤러를 만듭니다.

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

다음은 AngularJS에서 컨트롤러를 만드는 단계입니다.

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

컨트롤러 생성을 시작하기 전에 먼저 기본 HTML 페이지 설정을 준비해야 합니다.

아래 코드 조각은 "이벤트 등록"이라는 제목이 있고 다음과 같은 중요한 라이브러리에 대한 참조가 있는 간단한 HTML 페이지입니다. Bootstrap, jquery 및 Angular.

AngularJS에서 기본 컨트롤러 구축

  1. 부트스트랩 라이브러리와 함께 사용될 부트스트랩 CSS 스타일시트에 대한 참조를 추가하고 있습니다.
  2. 우리는 Anglejs 라이브러리에 대한 참조를 추가하고 있습니다. 이제 앞으로Angular.js로 수행하는 모든 작업은 이 라이브러리에서 참조됩니다.
  3. 특정 컨트롤에 대한 웹페이지의 반응성을 높이기 위해 부트스트랩 라이브러리에 대한 참조를 추가하고 있습니다.
  4. DOM 조작에 사용될 jquery 라이브러리에 대한 참조를 추가했습니다. Angular의 일부 기능이 이 라이브러리에 의존하기 때문에 이는 Angular에 필요합니다.

기본적으로 위의 코드 조각은 모든 예제에 표시되므로 다음 섹션에서는 특정 angleJS 코드만 표시할 수 있습니다.

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

둘째, 과정 기간 동안 시작할 파일과 파일 구조를 살펴보겠습니다.

AngularJS에서 기본 컨트롤러 구축

  1. 먼저 기존 웹 애플리케이션에서와 마찬가지로 파일을 2개의 폴더로 분리합니다. "CSS" 폴더가 있습니다. 여기에는 모든 계단식 스타일 시트 파일이 포함되며, 모든 항목을 포함하는 “lib” 폴더가 있습니다. Java스크립트 파일.
  2. bootstrap.css 파일은 CSS 폴더에 위치하며 웹 사이트에 좋은 모양과 느낌을 추가하는 데 사용됩니다.
  3. angle.js는 angleJS 사이트에서 다운로드하여 lib 폴더에 보관된 기본 파일입니다.
  4. app.js 파일에는 컨트롤러에 대한 코드가 포함됩니다.
  5. bootstrap.js 파일은 웹 애플리케이션에 부트스트랩 기능을 추가하기 위해 bootstrap.cs 파일을 보완하는 데 사용됩니다.
  6. jquery 파일은 우리 사이트에 DOM 조작 기능을 추가하는 데 사용됩니다.

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

여기서 우리가 하려는 것은 브라우저에서 페이지를 볼 때 텍스트 형식과 텍스트 상자에 "AngularJS"라는 단어를 표시하는 것입니다. angular.js를 사용하여 이를 수행하는 방법에 대한 예를 살펴보겠습니다.

AngularJS에서 기본 컨트롤러 구축

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

코드 설명 :

  1. 이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 ng-앱 키워드는 이 애플리케이션이 각도 애플리케이션으로 간주되어야 함을 나타내는 데 사용됩니다. 접두사로 시작하는 모든 것 'ng' 로 알려져 있습니다 지령. "DemoApp"은 Angular.JS 애플리케이션에 지정된 이름입니다.
  2. 우리는 div 태그를 만들었고 이 태그에 컨트롤러 "DemoController"의 이름과 함께 ng-controller 지시어를 추가했습니다. 이는 기본적으로 div 태그가 데모 컨트롤러의 콘텐츠에 액세스할 수 있는 기능을 제공합니다. 컨트롤러 내에 정의된 기능에 액세스할 수 있도록 지시문 아래에 컨트롤러 이름을 언급해야 합니다.
  3. ng-model 지시문을 사용하여 모델 바인딩을 만들고 있습니다. 이 작업의 목적은 Tutorial Name의 텍스트 상자를 멤버 변수 "tutorialName"에 바인딩하는 것입니다.
  4. "tutorialName"이라는 멤버 변수를 생성하는데, 이 변수는 사용자가 튜토리얼 이름 텍스트 상자에 입력한 정보를 표시하는 데 사용됩니다.
  5. DemoApp 애플리케이션에 연결할 모듈을 생성 중입니다. 따라서 이 모듈은 이제 우리 애플리케이션의 일부가 됩니다.
  6. 모듈에서는 tutorialName 변수에 "AngularJS"라는 기본값을 할당하는 함수를 정의합니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

AngularJS에서 기본 컨트롤러 구축

변수 tutorialName에 "Angular JS" 값을 할당했기 때문에 이 값이 텍스트 상자와 일반 텍스트 줄에 표시됩니다.

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

일반적으로 비즈니스 로직을 분리하기 위해 컨트롤러에 여러 메서드를 정의하려고 합니다.

예를 들어 컨트롤러가 두 가지 기본 작업을 수행하도록 하려는 경우

  1. 2개의 숫자를 더해 보세요
  2. 2개의 숫자를 뺄셈하세요

그런 다음 컨트롤러 내부에 이상적으로 2개의 메서드를 생성합니다. 하나는 덧셈을 수행하고 다른 하나는 뺄셈을 수행합니다.

Angular.JS 컨트롤러 내에서 사용자 정의 메서드를 정의할 수 있는 방법에 대한 간단한 예를 살펴보겠습니다. 컨트롤러는 단순히 문자열을 반환합니다.

AngularJS 컨트롤러에서 메서드 정의

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

코드 설명 :

  1. 여기서는 "AngularJS" 문자열을 반환하는 함수를 정의하고 있습니다. 이 함수는 tutorialName이라는 멤버 변수를 통해 범위 개체에 연결됩니다.
  2. 명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

AngularJS 컨트롤러에서 메서드 정의

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

모든 기능이 단일 파일에 배치된 “HelloWorld”의 예를 살펴보겠습니다. 이제 컨트롤러에 대한 코드를 별도의 파일에 배치할 차례입니다.

이를 위해 아래 단계를 따르세요.

단계 1) app.js 파일에서 컨트롤러에 대한 다음 코드를 추가합니다.

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

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

위 코드는 다음과 같은 작업을 수행합니다.

  1. 컨트롤러 기능과 함께 컨트롤러를 보유할 "앱"이라는 모듈을 정의합니다.
  2. "HelloWorldCtrl"이라는 이름의 컨트롤러를 만듭니다. 이 컨트롤러는 "Hello World" 메시지를 표시하는 기능을 갖는 데 사용됩니다.
  3. 범위 개체는 컨트롤러에서 뷰로 정보를 전달하는 데 사용됩니다. 따라서 우리의 경우 범위 개체는 "메시지"라는 변수를 보유하는 데 사용됩니다.
  4. 변수 메시지를 정의하고 여기에 "Hello World" 값을 할당합니다.

단계 2) 이제 Sample.html 파일에 ng-controller 지시문을 포함하는 div 클래스를 추가한 다음 멤버 변수 "message"에 대한 참조를 추가합니다.

또한 컨트롤러의 소스 코드가 있는 스크립트 파일 app.js에 대한 참조를 추가하는 것을 잊지 마세요.

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

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

위 코드를 올바르게 입력하면 브라우저에서 코드를 실행하면 다음과 같은 출력이 표시됩니다.

출력:

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

요약

  • 컨트롤러의 주요 임무는 뷰에 전달되는 범위 개체를 만드는 것입니다.
  • ng-app, ng-controller 및 ng-model 지시문을 사용하여 간단한 컨트롤러를 구축하는 방법
  • Anglejs 모듈 내에서 다양한 기능을 분리하는 데 사용할 수 있는 사용자 정의 메서드를 컨트롤러에 추가하는 방법.
  • 이 레이어를 뷰 레이어와 분리하기 위해 컨트롤러를 외부 파일에 정의할 수 있습니다. 이는 일반적으로 웹 애플리케이션을 만들 때 가장 좋은 방법입니다.