최신 웹 개발 튜토리얼
 

AngularJS소개


AngularJS와는 자바 스크립트 프레임 워크입니다. 그것은 <script> 태그를 HTML 페이지에 추가 될 수있다.

AngularJS와는 HTML이 지침을 속성을 확장하고 식으로 HTML 데이터를 결합한다.


AngularJS와는 자바 스크립트 프레임 워크입니다

AngularJS와는 자바 스크립트 프레임 워크입니다. 그것은 자바 스크립트로 작성된 라이브러리입니다.

AngularJS와는 자바 스크립트 파일로 배포되고, 스크립트 태그를 웹 페이지에 추가 될 수있다 :

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

AngularJS와는 HTML을 확장

AngularJS와는 NG-지침에 HTML을 확장합니다.

NG-앱 지시자는 AngularJS와 응용 프로그램을 정의합니다.

NG 모델 지시자는 애플리케이션 데이터에 HTML 컨트롤의 값 (입력 선택, 텍스트 영역)를 결합한다.

NG-바인드 지시문은 HTML보기로 응용 프로그램 데이터를 결합한다.

AngularJS와 예

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

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

</body>
</html>
»그것을 자신을 시도

예 설명 :

웹 페이지가로드되면 AngularJS와 자동으로 시작됩니다.

NG-앱 지시어는 <DIV> 요소가 AngularJS와 응용 프로그램의 "소유자"입니다 AngularJS와 알려줍니다.

NG 모델 지시자는 애플리케이션 변수 이름 입력 필드의 값을 결합한다.

NG-바인드 지시문은 응용 프로그램 변수 이름으로 <P> 요소의 innerHTML을 결합한다.


AngularJS와 지침

이미 보았 듯이, AngularJS와 지시어는 HTML이 NG 접두사와 속성입니다.

NG-초기화 지시자는 AngularJS와 응용 프로그램 변수를 초기화한다.

AngularJS와 예

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

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

</div>
»그것을 자신을 시도

또는 유효한 HTML과 :

AngularJS와 예

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

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

</div>
»그것을 자신을 시도
노트 당신이 당신의 페이지에 HTML이 유효하게하려는 경우, 대신 ng-의, 데이터 ng- 사용할 수 있습니다.

나중에이 튜토리얼에서 지시문에 대해 더 많이 배울 것입니다.


AngularJS와 식

AngularJS와 표현이 두 번 괄호 안에 기록 : {{식}}.

AngularJS와는 "출력"데이터는 표현은 기록 정확히 어디에 :

AngularJS와 예

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

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

</body>
</html>
»그것을 자신을 시도

AngularJS와 식은 NG 바인드 지시어와 같은 방식으로 HTML로 AngularJS와 데이터를 결합한다.

AngularJS와 예

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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와 응용 프로그램을 제어 할 수 있습니다.

NG-앱 지시어는 응용 프로그램의 NG 컨트롤러 지시어는 컨트롤러를 정의하고 정의합니다.

AngularJS와 예

<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와 모듈은 응용 프로그램을 정의 :

AngularJS와 모듈

var app = angular.module('myApp', []);

컨트롤러 제어 응용 프로그램을 AngularJS와 :

AngularJS와 컨트롤러

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

당신은 모듈과 나중에이 튜토리얼의 컨트롤러에 대한 자세한 내용을 배울 것입니다.