이 장에서는 웹 응용 프로그램 개발에 사용할 angularjs 라이브러리를 설정하는 방법에 대해 논의 할 것입니다. 또한 디렉토리 구조와 그 내용을 간단히 조사 할 것입니다.
링크 https://angularjs.org/ 링크를 열면 AngularJS 라이브러리를 다운로드 할 수있는 두 가지 옵션이 있습니다.
GitHub 다운로드 -이 버튼을 클릭하여 GitHub로 이동하여 모든 최신 스크립트를 얻으십시오.
다운로드 - 또는이 버튼을 클릭하면 다음을 볼 수 있습니다.
이 화면은 다음과 같이 각도 JS를 사용하기위한 다양한 옵션을 제공합니다.
다운로드 및 로컬 호스트 파일
두 가지 옵션이 있습니다 : 오래된 것과 최신. 이름 자체는 자기 설명입니다. 이전 버전은 이미 1.2.x 버전보다 낮고 최신 버전은 1.3.x 버전입니다.
우리는 또한 최소화, 압축되지 않거나 압축 된 버전을 사용할 수 있습니다.
CDN 액세스 : CDN을 사용할 수도 있습니다. CDN은 세계에 액세스 할 수 있으며,이 경우 Google은 지역 데이터 센터를 호스팅합니다. 이는 CDN을 자체 서버에서 다양한 외부 요인으로 파일에 대한 모바일 호스트의 책임에 CDN을 사용하는 것을 의미합니다. 또한 방문자가 귀하의 페이지가 동일한 CDN에서 AngularJS 사본을 다운로드 한 경우 다시 다운로드 할 필요가 없다는 이점을 제공합니다.
이 튜토리얼에서 CDN 버전 라이브러리를 사용하십시오.
예
이제 AngularJS 라이브러리를 사용하여 간단한 예제를 작성해 봅시다. 다음과 같이 html 파일 myfirstexample.html을 만듭니다.
<! docType html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </script> </head> <body ng-app = "myapp"> <div ng-controller = "hellocontroller"> <h2> 환영 {{helloto.title}} yiibai의 세계에! </h2> </div> <cript> angular.module ( "myapp", []) .controller ( "hellocontroller", function ($ scope) {$ scope.hello.hello =}; $ scope.helloto.title = "angularjs"); </script> </body> </html>다음 장에서는 위의 코드에 대해 자세히 설명합니다.
Angularjs 포함
AngularJS의 JavaScript 파일에 이미 HTML 페이지가 포함되어 있으므로 AngularJS를 사용할 수 있습니다.
<head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
공식 웹 사이트에서 최신 버전의 AngularJS를 확인하십시오.
AngularJS 응용 프로그램을 가리 킵니다
다음으로 HTML의 일부에는 AngularJS 응용 프로그램이 포함되어 있다고 말씀 드리겠습니다. 이것은 AngularJS 응용 프로그램의 루트에서 NG--App 속성을 HTML 요소에 배치하여 수행 할 수 있습니다. 다음과 같이 HTML 요소 또는 신체 요소에 추가 할 수 있습니다.
<body ng-app = "myapp"> </body>
보다
보기 의이 부분 :
<div ng-controller = "hellocontroller"> <h2> 환영 {{helloto.title}} yiibai의 세계에! </h2> </div>NG-Controller는 AngularJS에게 컨트롤러와 뷰가 무엇인지 알려줍니다. Helloto.title은 AngularJS 에게이 위치에서 Helloto.title이라는 HTML의 "모델"의 값을 작성하도록 지시합니다.
제어 장치
컨트롤러 부분은 다음과 같습니다.
<cript> angular.module ( "myapp", []) .controller ( "hellocontroller", function ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs"; </script>이 코드는 먼저 HelloController에 MyApp Angle Module Controller라는 기능을 등록합니다. 우리는 해당 장에서 모듈 및 컨트롤러에 대해 자세히 알아볼 것입니다. 컨트롤러 함수는 각도를 통해 각도로 등록됩니다. 컨트롤러 (...) 함수 호출.
$ SCOPE 매개 변수 모델은 컨트롤러 기능으로 전달되었습니다. 컨트롤러 함수는 Helloto의 JavaScript 객체를 추가하며 제목 필드가 추가되었습니다.
구현하다
위의 코드를 myfirstexample.htmlll로 저장하십시오. 다음 출력이 표시됩니다.
브라우저에 페이지가로드되면 다음 이벤트가 발생합니다.
HTML 문서는 브라우저에로드되고 브라우저에서 계산됩니다. Angularjs JavaScript 파일이로드되고 각도 글로벌 개체가 생성됩니다. 다음으로 JavaScript의 등록 컨트롤러 기능이 실행됩니다.
AngularJS는 HTML을 통해 스캔하여 AngularJS 응용 프로그램 및 뷰를 찾습니다. 보기가 발견되면보기를 해당 컨트롤러 기능에 연결합니다.
다음으로 AngularJS는 제어 기능을 실행합니다. 그런 다음 인구가 많은 컨트롤러 모델로 데이터보기를 렌더링합니다. 이제 페이지가 준비되었습니다.