지역 사회 배우다 도구 라이브러리 여가

한국어

집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

AngularJS 기본 학습 노트에 대한 간략한 소개_AngularJS

WBOY

풀어 주다： 2016-05-16 15:59:58

원래의

1193명이 탐색했습니다.

AngularJS는 JavaScript 프레임워크입니다. <script> 태그를 통해 HTML 페이지에 추가할 수 있습니다. </p> <p>AngularJS는 지시문을 통해 HTML 속성을 확장한 다음 표현식을 통해 데이터를 HTML 요소에 바인딩합니다. </p> <p><strong>AngularJS는 JavaScript 프레임워크입니다<br> </strong></p> <p> AngularJS는 JavaScript 프레임워크로 JavaScript 언어로 작성된 클래스 라이브러리입니다. </p> <p> AngularJS는 JavaScript 파일로 게시되며 스크립트 태그를 통해 웹페이지에 추가할 수 있습니다. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="84745" class="copybut" id="copybut84745" onclick="doCopy('code84745')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code84745"><script src="http://cdn.bootcss.com /angular.js/1.3.14/angular.min.js"></script>

AngularJS는 HTML을 확장합니다

AngularJS는 일련의 ng-지시문을 통해 HTML을 확장합니다.

ng-app 지시문은 AngularJS 애플리케이션을 정의합니다.

ng-model 지시어는 HTML 컨트롤의 값을 데이터 모델에 바인딩합니다.

ng-bind 지시문은 모델 데이터를 HTML 보기에 바인딩합니다.

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>

로그인 후 복사

설명 예:

AngularJS는 페이지가 로드되면 자동으로 실행을 시작합니다.

ng-app 지시어는 AngularJS에 자신이 위치한

요소가 AngularJS 애플리케이션의 루트 요소임을 알려줍니다.

ng-model 지시문은 입력 태그의 값을 변수 이름에 바인딩합니다.

ng-bind 지시어는 변수 이름의 값을

요소의 innerHTML 속성에 바인딩합니다.

AngularJS 명령
보시다시피 AngularJS 지시문은 ng로 시작하는 HTML 속성 집합입니다.

AngularJS 애플리케이션 변수는 ng-init 지시어를 통해 초기화할 수 있습니다.

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

로그인 후 복사

동등한 코드:

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

로그인 후 복사

참고 ng- 대신 접두사 data-ng-를 사용하여 페이지의 HTML이 유효한지 확인할 수 있습니다.
이후 장에서 더 많은 AngularJS 지시문을 배우게 됩니다.

AngularJS 표현식

AngularJS 표현식은 이중 중괄호({{ 표현식 문 }})로 작성됩니다.

AngularJS는 표현식을 계산된 결과로 정확하게 "출력"합니다. 예:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

로그인 후 복사

AngularJS 표현식은 ng-bind 지시문과 동일한 방식으로 데이터를 HTML에 바인딩합니다.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>

로그인 후 복사

다음 장에서 AngularJS 표현식에 대해 자세히 알아봅니다.

AngularJS 애플리케이션

AngularJS 모듈은 AngularJS 애플리케이션을 정의합니다.

AngularJS 컨트롤러는 AngularJS 애플리케이션의 동작을 제어합니다.

ng-app 지시어는 애플리케이션을 지정하는 데 사용되고, ng-controller 지시어는 컨트롤러를 지정하는 데 사용됩니다.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

로그인 후 복사

AngularJS 모듈 정의 애플리케이션:

var app = angular.module('myApp', []);
　　AngularJS控制器控制AngularJS Applications的行为：

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

로그인 후 복사

다음 장에서 모듈과 컨트롤러에 대해 자세히 알아봅니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.