Latest web development tutorials

AngularJS와 소개

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

에 의해 AngularJS와 지시어는 HTML을 확장하고 관통 HTML에 바인드 데이터.


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

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

AngularJS와 자바 스크립트 파일은 릴리스의 형태는 페이지에 스크립트 태그를 추가 할 수있다 :

<스크립트 SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

주의 우리는 <몸> 요소의 하단에 스크립트를 제안한다.
HTML로드 스크립트를 로딩 될 수 없기 때문에 이것은 페이지의 로딩 속도를 증가시킬 것이다.

각 angular.js 버전 다운로드 : https://github.com/angular/angular.js/releases


AngularJS와는 HTML을 확장

ng를-지시에 의해 AngularJS와는 HTML을 확장했다.

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

NG 모델은 애플리케이션에 바인딩 (예를 들어, 입력 필드의 값으로) 요소 값을 명령.

NG-바인드 명령은 HTML보기로 응용 프로그램 데이터를 바인딩합니다.

예를 AngularJS와

<! DOCTYPE html로>
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8 ">
<스크립트 SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ 헤드>
<바디>

<사업부의 NG-응용 프로그램 = "" >
<P> 이름 : <입력 유형 = "텍스트" NG 모델 = "이름"> </ P>
<H1> 안녕하세요 {{이름} } </ H1>
</ DIV>

</ BODY>
</ HTML>

»시도

예를 설명하기 :

페이지가로드 될 때 자동적 AngularJS와.

NG-앱 지시어는 AngularJS와 지시, <div> 요소의 AngularJS와 응용 프로그램입니다 "소유자."

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

응용 프로그램 변수 이름에 NG-bind 명령은 단락 innerHTML을 바인딩됩니다.

주의 당신은 NG-앱 지시문을 제거하면 HTML 결과의 발현을 평가하지, 표현에 직접 표시됩니다.

AngularJS와는 무엇인가?

쉽게 : AngularJS와 현대 단일 페이지 응용 프로그램 (단일 페이지 응용 프로그램 SPA를)의 개발을합니다.

  • AngularJS와 바인드 응용 프로그램 데이터는 HTML 요소입니다.
  • AngularJS와 HTML 요소를 복제하고 반복 할 수 있습니다.
  • AngularJS와는 숨기고 HTML 요소를 표시 할 수 있습니다.
  • AngularJS와는 HTML 요소에 코드를 추가 할 수 있습니다 "뒤에."
  • AngularJS와 입력 유효성 검사를 지원합니다.

지시를 AngularJS와

당신이 볼 수 있듯이, AngularJS와 명령은 NG의 HTML 속성을 앞에 붙습니다.

NG-init 명령은 AngularJS와 응용 프로그램 변수를 초기화합니다.

예를 AngularJS와

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

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

»시도

주의 HTML5는 데이터 - 처음으로 (수제) 속성을 확장 할 수 있습니다.
AngularJS와 재산 ng- 시작은 있지만 유효한 HTML5에 대한 웹 페이지를 만들기 위해 데이터 ng-를 사용할 수 있습니다.

유효 HTML5와 함께 :

예를 AngularJS와

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

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

»시도


AngularJS와 표현

중괄호로 작성 식을 AngularJS와 {{식}}.

AngularJS와 표현은 NG-BIND 명령이 동일한 목적이 HTML로 데이터를 결합한다.

쓰기 위치 "출력"데이터 AngularJS와 식입니다.

자바 스크립트 표현식과 같은 식을 AngularJS와 : 그들은 텍스트, 연산자 및 변수를 포함 할 수 있습니다.

예 5 + 5 {{}} 또는 {{firstName을 + ""+이 lastName}}

예를 AngularJS와

<! DOCTYPE html로>
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8">
<스크립트 SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ 헤드>
<바디>

<사업부의 NG-응용 프로그램 = "">
<P> 내 첫 번째 표현식 : {{5 + 5}} </ P>
</ DIV>

</ BODY>
</ HTML>

»시도

응용 프로그램 AngularJS와

AngularJS와 모듈 (모듈) AngularJS와 응용 프로그램을 정의합니다.

AngularJS와 응용 프로그램을 제어하기위한 AngularJS와 컨트롤러 (컨트롤러).

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

예를 AngularJS와

<DIV NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "myCtrl">

이름 : <입력 유형 = "텍스트"NG 모델 = "firstName을">로 <br>
성 : <입력 유형 = "텍스트"NG 모델 = "이 lastName">로 <br>
로 <br>
이름 : {{firstName을 + ""+이 lastName}}

</ DIV>

<스크립트>
var에 응용 = angular.module ( '을 myApp' , []);
app.controller ( 'myCtrl', 기능 ( $ 범위) {
$ Scope.firstName = "존";
$ Scope.lastName = "미상";
});
</ 스크립트>

»시도

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

AngularJS와 모듈

var에 응용 = angular.module ( '을 myApp', []);

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

컨트롤러 AngularJS와

app.controller ( 'myCtrl', 기능 ($ 범위) {
$ Scope.firstName = "존";
$ Scope.lastName = "미상";
});

다음 튜토리얼에서 당신은 더 많은 지식과 응용 프로그램 모듈을 배울 것입니다.