MEAN.JS-앱의 각도 구성 요소
이 장에서는 응용 프로그램에 각도 구성 요소를 추가합니다. MVC (Model View Controller) 패턴을 사용하여 동적 단일 페이지 애플리케이션을 만들 수있는 웹 프런트 엔드 JavaScript 프레임 워크입니다. MEAN.JS 아키텍처 장에서 AngularJS가 클라이언트 요청을 처리하고 데이터베이스에서 결과를 얻는 방법을 보았습니다.
AngularJS 알아보기
AngularJS는 HTML을 템플릿 언어로 사용하고 HTML 구문을 확장하여 애플리케이션 구성 요소를 명확하게 표현하는 오픈 소스 웹 애플리케이션 프레임 워크입니다. AngularJS는 데이터 바인딩, 모델, 뷰, 컨트롤러, 서비스 등과 같은 몇 가지 기본 기능을 제공합니다. AngularJS에 대한 자세한 내용은이 링크를 참조하십시오 .
페이지에 Angular를 추가하여 페이지를 Angular 응용 프로그램으로 만들 수 있습니다. 외부 JavaScript 파일을 사용하여 추가 할 수 있으며 다운로드하거나 CDN 버전에서 직접 참조 할 수 있습니다.
파일을 다운로드하고 다음과 같이 페이지에 추가하여 로컬로 참조했다고 가정합니다.
<script src="angular.min.js"></script>이제 Angular에이 페이지가 Angular 애플리케이션임을 알려야합니다. 따라서 아래와 같이 <html> 또는 <body> 태그에 ng-app 속성을 추가하여이를 수행 할 수 있습니다.
<html ng-app>
or
<body ng-app>ng-app은 페이지의 모든 요소에 추가 할 수 있지만 Angular가 페이지 내 어디에서나 작동 할 수 있도록 종종 <html> 또는 <body> 태그에 삽입됩니다.
모듈로서의 Angular 애플리케이션
Angular 애플리케이션으로 작업하려면 모듈을 정의해야합니다. 애플리케이션과 관련된 구성 요소, 지시문, 서비스 등을 그룹화 할 수있는 곳입니다. 모듈 이름은 HTML의 ng-app 속성에서 참조됩니다. 예를 들어, Angular 애플리케이션 모듈 이름을 myApp으로 말하고 아래와 같이 <html> 태그에 지정할 수 있습니다.
<html ng-app="myApp">외부 JavaScript 파일에서 아래 문을 사용하여 응용 프로그램에 대한 정의를 만들 수 있습니다.
angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition컨트롤러 정의
AngularJS 애플리케이션은 컨트롤러를 사용하여 애플리케이션의 데이터 흐름을 제어합니다. 컨트롤러는 ng-controller 지시문 을 사용하여 정의됩니다 .
예를 들어, 사용하려는 컨트롤러의 이름과 함께 ng-controller 지시문을 사용하여 컨트롤러를 본체에 연결합니다. 아래 줄에서는 컨트롤러의 이름을 "myController"로 사용하고 있습니다.
<body ng-controller="myController">아래 그림과 같이 컨트롤러 (myController)를 Angular 모듈 (myApp)에 연결할 수 있습니다.
angular
.module('myApp')
.controller('myController', function() {
// controller code here
});가독성, 재사용 성 및 테스트 가능성을 위해 익명 함수 대신 명명 된 함수를 사용하는 것이 좋습니다. 아래 코드에서 우리는 컨트롤러 코드를 유지하기 위해 새로운 이름의 함수 "myController"를 사용하고 있습니다.
var myController = function() {
// controller code here
};
angular
.module('myApp')
.controller('myController', myController);컨트롤러에 대한 자세한 내용은이 링크를 참조하십시오 .
범위 정의
범위는 컨트롤러를 뷰와 연결하고 모델 데이터를 포함하는 특수 JavaScript 개체입니다. 컨트롤러에서 모델 데이터는 $ scope 개체를 통해 액세스됩니다. 컨트롤러 함수는 Angular에 의해 생성 된 $ scope 매개 변수를 취하며 모델에 직접 액세스 할 수 있습니다.
아래 코드 스 니펫은 $ scope 매개 변수를 수신하고 기본값을 설정하도록 컨트롤러 함수를 업데이트하는 방법을 지정합니다.
var myController = function($scope) {
$scope.message = "Hello World...";
};컨트롤러에 대한 자세한 내용은이 링크를 참조하십시오 . 다음 장에서는 Angular를 사용하여 단일 페이지 응용 프로그램 만들기를 시작합니다.