Angularjs 기본 지식 및 예제 요약_AngularJS

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(글로벌)을 추가해야 합니다.
컨트롤러 ng-controller="Ctrl"을 설정합니다.
예제 테스트 시 다음 사항에 유의하시기 바랍니다

머리에 앞서angularjs 코드를 소개해야 합니다. 작성자는angular-1.0.1.min.js를 사용합니다. 버전 차이에 주의하세요.
모든 작은 예제는 다음 영역에서 실행됩니다. 범위에 ng-app을 추가하세요.
다음은 몇 가지 작은 사례를 사용하여 기본 공통 지침과angularjs의 사용법을 보여줍니다.

Hello World 프로그램(이중 데이터 바인딩)

ng-model={{name}}을 사용하여 데이터 바인딩

코드 복사 코드는 다음과 같습니다.

이름:

<시간>
안녕하세요:{{이름 || 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

이벤트 바인딩을 활용한 작은 사례

코드 복사 코드는 다음과 같습니다.

단가:
수량: <입력 유형="숫자" min=0 ng-model="수량" ng-init="수량=1">

총 가격: {{(가격) * (수량)}}

참고:

html5 관련 입력: http://www.w3school.com.cn/ html5 /att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp>

ng-init: 초기값 설정

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: 속성 값을 기본으로 지정할 수 있습니다

코드 복사 코드는 다음과 같습니다.

{{value}}

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: js의 정보를 위해 i와 유사한 데이터를 반복하는 데 사용됩니다

코드 복사 코드는 다음과 같습니다.

저에게는 {{friends.length}}명의 친구가 있습니다.

• 
  [{{$index 1}}]: {{friend.name}}의 나이: {{friend.age}}
  
  

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom 클릭 이벤트

코드 복사 코드는 다음과 같습니다.

{{a}}

<스크립트> 함수 ctrl($scope){
$scope.a='안녕하세요';
$scope.showMsg=기능(){
          $scope.a='world';
}
}

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show: 요소 표시 설정

참고: ng-show="!xx": 속성 값 앞에 추가하세요! 추가되지 않은 경우 표시 확인을 나타냅니다! 확실하지 않으면 표시하지 마세요

코드 복사 코드는 다음과 같습니다.

ng-show="!show"

ng-show="표시"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: 숨길 요소 설정

코드 복사 코드는 다음과 같습니다.

ng-hide="아아"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

ng-show를 사용하여 토글 효과 만들기

코드 복사 코드는 다음과 같습니다.

전환

로고 표시

" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style: 기본 스타일과 유사

여기서 작성 형식에 주의하세요. 문자열은 따옴표로 묶어야 합니다.

코드 복사 코드는 다음과 같습니다.

상자

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

필터: 필터 필드

코드 복사 코드는 다음과 같습니다.

{{9999|숫자}}

{{9999 1 |번호:2}}

{{9*9|통화}}

{{'hello world' | 대문자}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: 템플릿을 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

tpl.html

코드 복사 코드는 다음과 같습니다.

안녕하세요

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: ajax와 유사한 방법이 잘 작동합니다

코드 복사 코드는 다음과 같습니다.

HTTP 요청 방법 1

          
• 
  {{x.이름}} {{x.국가}}
  >

방법 2

         
• 
  {{y.aid}} {{y.title}}
  >

//방법 1
var TestCtrl=function($scope,$http){
        var p=$http({
방법:'GET',
                                  
url:'json/date.json'
          });            p.success(함수(응답,상태,헤더,구성){
                $scope.names=response;
          });
           p.error(기능(상태){
console.log(상태);
          });
}
//방법 2
함수 TestCtrl2($scope,$http){
           $http.get('json/yiqi_article.json').success(함수(응답){
                  $scope.info=response;
        });
}

http://2.liteng.sinaapp.com/angularjsTest/ajax.html

위 코드 모두: https://github.com/litengdesign/angularjsTest

데모 구현: http://2.liteng.sinaapp.com/angularjsTest/index.html

Angularjs의 라우팅(router)과 디렉티브(directive)에 대해서는 다음번에 따로 다루겠습니다.