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는 컨트롤러 기능을 실행합니다.

  • 그런 다음 컨트롤러에 의해 채워진 모델의 데이터로 뷰를 렌더링합니다. 이제 페이지가 준비되었습니다.