AngularJS-환경 설정

이 장에서는 웹 애플리케이션 개발에 사용할 AngularJS 라이브러리를 설정하는 방법을 설명합니다. 또한 디렉토리 구조와 그 내용에 대해 간략하게 설명합니다.

링크를 열 때 https://angularjs.org/, AngularJS 라이브러리를 다운로드하는 데는 두 가지 옵션이 있습니다.

View on GitHub −이 버튼을 클릭하면 GitHub로 전환되고 모든 최신 스크립트를 볼 수 있습니다.
Download AngularJS 1 −이 버튼을 클릭하면 다음과 같은 대화 상자가 나타납니다. −

이 화면은 다음과 같이 Angular JS를 사용하는 다양한 옵션을 제공합니다.

Downloading and hosting files locally
- Legacy와 Latest의 두 가지 옵션이 있습니다. 이름 자체는 자명합니다. 레거시 버전은 1.2.x 미만이고 최신 버전은 버전 1.3.x와 함께 제공됩니다.
- 최소화, 비 압축 또는 압축 버전을 사용할 수도 있습니다.
CDN access− 또한 CDN에 액세스 할 수 있습니다. CDN을 통해 지역 데이터 센터에 액세스 할 수 있습니다. 이 경우 Google 호스트입니다. CDN은 자체 서버에서 일련의 외부 서버로 파일 호스팅 책임을 이전합니다. 또한 웹 페이지 방문자가 동일한 CDN에서 AngularJS 사본을 이미 다운로드 한 경우 다시 다운로드 할 필요가 없다는 이점도 있습니다.

이 튜토리얼 전체에서 라이브러리의 CDN 버전을 사용하고 있습니다.

예

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

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</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://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

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

AngularJS 앱을 가리 킵니다.

다음으로 AngularJS 앱이 포함 된 HTML 부분을 알려야합니다. AngularJS 앱의 루트 HTML 요소에 ng-app 속성을 추가하여이를 수행 할 수 있습니다. 아래와 같이 html 요소 또는 body 요소에 추가 할 수 있습니다.

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

전망

보기는이 부분입니다-

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

ng-controller 는이 뷰에서 사용할 컨트롤러를 AngularJS에 알려줍니다. helloTo.title 은 AngularJS에게이 위치에 helloTo.title이라는 모델 값을 HTML로 작성하도록 지시합니다.

제어 장치

컨트롤러 부분은-

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

이 코드는 myapp 이라는 각도 모듈에 HelloController라는 컨트롤러 함수를 등록합니다 . 각 장에서 모듈 과 컨트롤러 에 대해 자세히 알아볼 것 입니다. 컨트롤러 함수는 angular.module (...). controller (...) 함수 호출을 통해 angular에 등록됩니다.

$ scope 매개 변수 모델은 컨트롤러 함수로 전달됩니다. 컨트롤러 함수는 helloTo JavaScript 객체를 추가하고 해당 객체에 제목 필드를 추가 합니다.

실행

위 코드를 myfirstexample.html 로 저장하고 아무 브라우저에서나 엽니 다. 다음 출력을 볼 수 있습니다.

Welcome AngularJS to the world of Tutorialspoint!

페이지가 브라우저에로드되면 어떻게됩니까? 보자-

HTML 문서는 브라우저에로드되고 브라우저에서 평가됩니다.
AngularJS JavaScript 파일이로드되고 각도 전역 개체가 생성됩니다.
컨트롤러 기능을 등록하는 JavaScript가 실행됩니다.
다음으로 AngularJS는 HTML을 스캔하여 AngularJS 앱과 뷰를 검색합니다.
뷰를 찾으면 해당 뷰를 해당 컨트롤러 기능에 연결합니다.
다음으로 AngularJS는 컨트롤러 기능을 실행합니다.
그런 다음 컨트롤러에 의해 채워진 모델의 데이터로 뷰를 렌더링합니다. 이제 페이지가 준비되었습니다.