JavaScript의 AngularJS 라이브러리를 사용하여 hello world를 작성하는 방법

JavaScript의 AngularJS 라이브러리를 사용하여 hello world를 작성하는 방법_AngularJS

WBOY

풀어 주다： 2016-05-16 15:53:26

원래의

1155명이 탐색했습니다.

이 글은 AngularJS 프레임워크로 구현된 Hello World 코드 예제를 보여줍니다.

다음은 Hello World 예제와 다음 코드 예제를 볼 때 집중해야 할 몇 가지 측면입니다.

ng-app, ng-controller, ng-model 지시어
두 개의 중괄호가 있는 템플릿

1단계: 섹션에 Angular Javascript

를 포함합니다.

에 다음 코드를 포함하여 Angularjs 자바스크립트 파일을 가져옵니다. 다음 작성 방법을 사용하여 Google 관리 라이브러리에서 최신 코드를 가져올 수 있습니다.

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

로그인 후 복사

2단계: 요소에 ng-app 지시어 적용

다음과 같이 요소에 ng-app 지시문을 적용합니다. 선택적으로 앱에 이름을 지정하면 간단히 로 작성할 수 있습니다. 이는 애플리케이션 루트 요소의 html 요소입니다. 이를 통해 애플리케이션 개발자는 전체 HTML 페이지 또는 일부만 Angular 애플리케이션으로 처리해야 한다고 Angular에 알릴 수 있습니다.

<html ng-app="helloApp">

로그인 후 복사

3단계: 요소에 ng-controller 지시어 적용

요소에 ng-controller 지시문을 적용합니다. 컨트롤러 지시문은 div와 같은 모든 요소에 적용될 수 있습니다. 아래 코드에서 "HelloCtrl"은 컨트롤러의 이름이며 <script></script> 요소에 있는 컨트롤러 코드에서 참조할 수 있습니다.

<body ng-controller="HelloCtrl">

로그인 후 복사

4단계: 입력 요소에 ng-model 지시어 적용

ng-model 지시문을 사용하여 입력을 모델에 바인딩할 수 있습니다.

<input type="text" name="name" ng-model="name"/>

로그인 후 복사

5단계: 템플릿 코드 작성

다음은 "name"이라는 모델의 모델 값을 표시하는 템플릿 코드입니다. "name"이라는 모델이 4단계의 입력에 바인딩되어 있습니다.

Hello {{name}}! How are you doing today&#63;

로그인 후 복사

6단계: <스크립트>에서 컨트롤러 코드 생성

아래와 같이 script 요소에 컨트롤러 코드를 생성합니다. 아래 코드에서 "helloApp"은 요소에서 ng-app 지시어를 사용하여 정의된 모듈 이름입니다. 요소의 ng-controller 지시문을 사용하여 정의된 "HelloCtrl"이라는 이름의 컨트롤러를 만듭니다. 컨트롤러 "HelloCtrl"은 이 모듈("helloApp")에 등록됩니다. $scope 객체는 관련되어 있습니다

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

로그인 후 복사

전체 코드는

여기에서 확인하세요.