AngularJS는 Google에서 개발 한 고급 프론트 엔드 MVC 개발 프레임 워크입니다.
AngularJS 공식 웹 사이트 : https://angularjs.org/ 공식 웹 사이트에는 데모가 있으며 FQ에 액세스해야 할 수도 있습니다.
Angularjs 중국 커뮤니티 : http://www.angularjs.cn/ 초보자에게 적합합니다
참조 파일 : https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Angular를 사용할 때 메모
angularjs 라이브러리를 인용하십시오 : https : //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 ....이 섹션의 예에서 github에서 다운로드 할 수 있습니다.
사용중인 영역에 NG-App = "AppName"을 추가하거나 직접 NG-APP (Global)를 추가해야합니다.
컨트롤러 ng-controller = "ctrl"을 설정하십시오.
예제를 테스트 할 때 다음 사항에 주목하십시오
머리 앞에 angularjs 코드를 도입해야합니다. 저자는 Angular-1.0.1.min.js를 사용합니다. 버전 차이에주의하십시오.
모든 작은 예는 다음 영역에서 실행되며 활성 영역에 NG-App을 추가해야합니다.
다음은 AngularJS 기본값의 일반적인 지침과 사용을 설명하기위한 몇 가지 작은 사례입니다.
Hello World 프로그램 (이중 데이터 바인딩)
ng-model = {{name}}을 사용하여 데이터를 바인딩하십시오
코드 사본은 다음과 같습니다.
<label for = "name"> 이름 : </label>
<입력 유형 = "text"ng-model = "name"id = "name"/>
<HR>
안녕하세요 : {{이름 || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
이벤트 바인딩 사용의 작은 사례
코드 사본은 다음과 같습니다.
<div>
단가 : <입력 유형 = "숫자"min = 0 ng-model = "price"ng-init = "price = 299">
수량 : <입력 유형 = "숫자"min = 0 ng-model = "수량"ng-init = "수량 = 1">
<br>
총 가격 : {{(가격) * (수량)}}
<dt>
<dl> 참고 : </dl>
html5와 관련된 <dd> 입력 : <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.asp </dd>>
<dd> ng-init : 초기 값을 설정하십시오 </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
ng-init : 속성 값은 기본적으로 지정할 수 있습니다
코드 사본은 다음과 같습니다.
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
ng-repeat : JS의 정보에 대해 i와 유사한 데이터를 반복하는 데 사용
코드 사본은 다음과 같습니다.
<div ng-init = "friends = [{name : 'jhon', age : 25}, {name : 'mary', age : 28}]"> </div>
<p> 나는 {{friends.length}} 친구가 있습니다. 그들은 </p>입니다
<ul>
<li ng-repeat = "친구의 친구">
[{{$ index+1}}] : {{friend.name}} age is : {{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
NG- 클릭 : DOM 클릭 이벤트
코드 사본은 다음과 같습니다.
<div ng-controller = "ctrl">
<버튼 ng-dblclick = 'showmsg ()'> {{a}} </button>
</div>
<cript>
함수 ctrl ($ scope) {
$ scope.a = 'hello';
$ scope.showmsg = function () {
$ scope.a = '세계';
}
}
</스크립트>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
NG-SHOW : 요소 디스플레이를 설정하십시오
참고 : ng-show = "! xx": 속성 값 앞에 추가하십시오! 추가하지 않으면 표시해야합니다! 불확실한 경우 표시되지 않습니다
코드 사본은 다음과 같습니다.
<div ng-show = "! show">
ng-show = "! show"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
NG-HIDE : 요소 숨기기를 설정하십시오
코드 사본은 다음과 같습니다.
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
ng-show를 사용하여 토글 효과를 만듭니다
코드 사본은 다음과 같습니다.
<H2> 토글 </h2>
<a href ng-click = "showlog =! showlog"> 쇼 로고 </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NG 스타일 : 기본 스타일과 유사합니다
여기에 글쓰기 형식에 유의하십시오 : 문자열은 따옴표에 포함되어야합니다.
코드 사본은 다음과 같습니다.
<div ng-style = "{너비 : 100+'px', 높이 : 200+'px', backgroundcolor : 'red'}">
상자
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
필터 : 필터 필드
코드 사본은 다음과 같습니다.
<div> {{9999 | number}} </div> <!-9,999->
<div> {{9999+1 | 번호 : 2}} </div> <!-10,000.00->
<div> {{9*9 | Currency}} </div> <!-$ 81.00->
<div> {{ 'Hello World'| 대문자}} </div> <!-Hello World->
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template : 템플릿을로드 할 수 있습니다
코드 사본은 다음과 같습니다.
<div ng-include = " 'tpl.html'"> </div>
tpl.html
코드 사본은 다음과 같습니다.
<H1> 안녕하세요 </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http : Ajax와 유사한 방법은 매우 잘 작동합니다
코드 사본은 다음과 같습니다.
<div ng-controller = "testctrl">
<H2> http request-method 1 </h2>
<ul>
<li ng-repeat = "x names">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<H2> 방법 2 </h2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<cript>
// 메소드 1
var testctrl = function ($ scope, $ http) {
var p = $ http ({
방법 : 'get',
URL : 'json/date.json'
});
p.success (함수 (응답, 상태, 헤더, 구성) {
$ scope.names = 응답;
});
p.error (함수 (상태) {
Console.log (상태);
});
}
// 방법 2
함수 testctrl2 ($ scope, $ http) {
$ http.get ( 'json/yiqi_article.json'). 성공 (함수 (응답) {
$ scope.info = 응답;
});
}
</스크립트>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
위의 모든 코드 : https://github.com/litengdesign/angularjstest
구현 된 데모 : http://2.liteng.sinaapp.com/angularjstest/index.html
AngularJS의 라우터와 지시에 관해서는 다음에 별도로 꺼낼 것입니다.