English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 기본 튜토리얼

AngularJS 환경 설정

이 장은 웹 애플리케이션 개발을 위해 사용하는 AngularJS 라이브러리를 설정하는 방법을 설명합니다. 또한, 디렉토리 구조 및 내용을 간단히 설명합니다.

https:의 링크를 엽니다.//angularjs.org/클릭하면 다운로드 가능한 AngularJS 라이브러리의 두 가지 옵션을 볼 수 있습니다-

  • GitHub에서 보기 − 이 버튼을 클릭하면 GitHub으로 이동하여 모든 최신 스크립트를 가져옵니다.

  • AngularJS 다운로드 1 − 이 버튼을 클릭하면 다음과 같은 스크린이 표시됩니다:−

이 스크린은 Angular JS를 사용하는 다양한 옵션을 제공합니다-

  • 로컬로 파일을 다운로드하고 호스팅

    • 두 가지 다른 옵션이 있습니다: '전통적'과 '최신'. 이름 자체가 설명합니다. 구 버전의 버전은1.2.x, 가장 최신 버전은1.7.x.

    • 최소화된, 압축되지 않은 또는 압축된 버전을 사용할 수 있습니다.

  • CDN 접근− CDN에 접근할 수 있습니다. CDN은 지역 데이터 센터에 접근할 수 있게 합니다. 이 경우 Google가 관리합니다. CDN은 파일을 관리하는 책임을 여러 외부 서버로 옮겨줍니다. 또한, 웹 페이지 방문자가 이미 동일한 CDN에서 AngularJS 복사본을 다운로드했을 경우 다시 다운로드하지 않아도 되는 장점을 제공합니다.

이 튜토리얼에서는 CDN 버전의 라이브러리를 사용해 왔습니다.

온라인 예제

이제 AngularJS 라이브러리를 사용하여 간단한 예제를 작성해 보겠습니다. HTML 파일을 생성하겠습니다myfirstexample.html와 같이-

!doctype html>
<html>
　　　<head>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.5.2/angular.min.js"></script>
　　　</head>
　　　
　　　<body ng-app="myapp">
　　　　　　<div ng-controller="HelloController">
　　　　　　　　　<h2>Welcome {{helloTo.title}} to the world of w3codebox!/h2>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　angular.module("myapp", [])
　　　　　　　　　
　　　　　　　　　.controller("HelloController", function($scope) {
　　　　　　　　　　　　$scope.helloTo = {};
　　　　　　　　　　　　$scope.helloTo.title = "AngularJS";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
테스트를 보겠습니다 ‹/›

위의 코드를 자세히 읽어보겠습니다-

AngularJS를 포함합니다

HTML 페이지에 AngularJS JavaScript 파일을 포함하여 사용할 수 있도록 포함합니다-

<head>
　　　<script src="https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js">
　　　</script>
</head>

AngularJS의 공식 웹사이트에서 최신 버전을 확인할 수 있습니다.

AngularJS 애플리케이션을 가리키도록 설정할 수 있습니다.

다음으로, AngularJS 애플리케이션이 포함된 HTML의 어떤 부분인지 결정해야 합니다. ng-app 속성을 AngularJS 애플리케이션의 루트 HTML 요소에 추가하여 구현할 수 있습니다. html 요소나 body 요소에 추가할 수 있습니다. 예를 들어-

<body ng-app="myapp">
</body>

뷰

뷰는 이 부분입니다-

<div ng-controller="HelloController">
　　　<h2>Welcome {{helloTo.title}} to the world of w3codebox!/h2>
</div>

ng-controllerAngularJS가 이 뷰에서 사용할 제어자를 지시합니다.helloTo.titleAngularJS가 이 위치에서 helloTo.title라는 모델 값으로 HTML을 작성하도록 지시합니다.

제어자

제어자 부분은-

<script>
　　　angular.module("myapp", [])
　　　
　　　.controller("HelloController", function($scope) {
　　　　　　$scope.helloTo = {};
　　　　　　$scope.helloTo.title = "AngularJS";
　　　});
</script>

이 코드는 이름이myapp의 각도 모듈에 HelloController라는 제어자 함수가 등록되었습니다. 각 장에서 모듈과 제어자를 자세히 설명할 것입니다. 제어자 함수는 angular.module(...)과 controller(...) 함수 호출을 통해 각도로 등록됩니다.

$scope 파라미터 모델이 컨트롤러 함수에 전달됩니다. 컨트롤러 함수는 JavaScript 객체에 helloTo를 추가하고, 그 객체에 title 필드를 추가합니다.

실행

위 코드를 다른 이름으로 저장하십시오myfirstexample.html그리고 어떤 브라우저에서나에그것이 열리면 다음과 같은 출력을 볼 수 있습니다-

Welcome AngularJS to the world of w3codebox!

브라우저에서 페이지를 로드할 때 무엇이 일어날까요? 봅시다-

  • HTML 문서가 브라우저에 로드되고, 브라우저에서 평가됩니다.

  • AngularJS 자바스크립트 파일이 로드되었으며, 각도전역객체가 생성되었습니다.

  • 레지스터 컨트롤러 기능을 수행하는 자바스크립트를 실행합니다.

  • 그런 다음, AngularJS는 HTML을 스캔하여 AngularJS 애플리케이션과 뷰를 검색합니다.

  • 뷰를 찾은 후, 그것은 해당 컨트롤러 기능에 뷰를 연결합니다.

  • 그런 다음, AngularJS는 컨트롤러 기능을 실행합니다.

  • 그런 다음, 그것은 컨트롤러로 채워진 모델 데이터를 사용하여 뷰를 표시합니다. 현재 페이지는 준비되었습니다.

AngularJS MVC 아키텍처AngularJS 개요