A, AngularJS와
AngularJS와는 것입니다 자바 스크립트 프레임 워크 . 함으로써 지시 HTML을 확장하고 의해 표현 HTML 데이터 바인딩.
네 1. 특성
MVC 패턴 데이터 바인딩 양방향 자동 모듈 의존성 삽입
2.
1) 첫째는 코어 패키지 페이지에 소개
<스크립트 SRC = "../ 플러그인 / AngularJS와 / angular.min.js"> </ script>
2) body 태그에 겨-응용 프로그램을 작성해야합니다
<body NG-앱 = "">
3) {}} {변수의 발현 또는 노출 데이터
4) 겨 모델 이름은 전송 된 값에 대응하는 선단의 NG 모델 $ 범위에 저장된 값에 따라 획득 될 수있다
5) 범위 $ : AngularJS와 내장되는 오브젝트도 해당하는 데이터가 데이터 요청이
6) $ NG-INIT : 긴 페이지의 구현이 먼저 NG-초기화하는 동작을 수행
7) VAR 앱 angular.module = ( '앱'[]) == "body 태그에 사용 나중에 선언 모듈 이름을 정의해야 앱라는 모듈을 정의
어디에 []는 플러그인 아를 넣어 어렵다
8) ng를 클릭 : 마우스 클릭 이벤트를 == "onclick을
9) ng를 반복 = "목록 X"(X)의 각리스트의 트래버스 대응
10) $는 HTTP : AngularJS와 내장 객체, HTTP 요청을 보내는의 주요 역할, 그리고 아약스를 전송
$ http.get $ http.post
11) $ 이벤트 : 어떤 이벤트를하면 현재 작업은 일반적으로 확인란이 선택되어 "== 상자에 사용되는 얻을 수있는
둘, demo
1. 작은 문제
1) 추가를 완료 한 후, 다음 새 기본 값의 마지막 증가되면 증가 성공의 가치의 증가가 창을 떠날 것입니다 후,
새로운 에코는,이 새로운 NG-클릭으로 선언해야 할 때 분명히, 우리는이 데이터를 필요로하지 않는다 = "실체 = {}"
如: <버튼 유형 = "버튼"클래스 = "BTN BTN-기본"제목 = "新建" ng를 클릭 = "실체 = {}" 데이터 전환 = "모달"데이터 대상 = "# editModal"> <I 클래스 = "FA-FA 파일 O"> </ I>新建</ 버튼>
2) 버튼 무효 클릭
NG 클릭 = "DELE ()"잊지 마세요 ()
2. 모든 쿼리의 JS
VAR 앱 angular.module = ( 'brandApp'[ '페이징']) // []中为插件
app.controller ( 'brandController'기능 ($ 범위 $ HTTP) {// $ HTTP发送AJAX
$ 범위. findall은 = 함수 () {
$ http.get ( '../ 브랜드 / findAll.do') 성공 (기능 (응답) {.
$ scope.list = 응답;
})
}
});
3. 페이징 쿼리 JS 코드
<! - 페이징 구성 요소 시작 ->
<스크립트 SRC = "../ 플러그인 / AngularJS와 / pagination.js"유형 = "텍스트 / 자바 스크립트"> </ SCRIPT>
<링크합니다 REL = "이 스타일 시트"href를 = ".. /plugins/angularjs/pagination.css ">
<! - 구성 요소 끝을 페이징 ->
// 목록 데이터 리로딩 $ scope.reloadList = 함수 () { // 페이지 전환 $ scope.findPage (scope.paginationConf.currentPage $, $ scope.paginationConf.itemsPerPage) } // 페이징 제어 배열 을 $ = scope.paginationConf { //이 페이지 currentPage :. 1, //의 기본 페이지 번호 TOTALITEMS : 10, // 얼마나 많은 페이지 표시 데이터 itemsPerPage이 : 10, 드롭 다운 상자가 조정 수동 // 당 데이터의 몇 가지 보여 perPageOptions를 : 10 , 20, 40, 30, 50 onchange를 : 함수 () { $ scope.reloadList (); // 리로드 } } 마다 표시 데이터 량 : // 탭 첫번째 매개 변수는이 페이지의 두 번째 파라미터 $ scope.findPage = 함수 (쪽 행) { $ http.get ( '../ 제작사 / findPage.do은 ? 페이지 = '+ + 페이지'행 = '+ 행) 일단 .success ( 기능 (대응) { // 데이터를 반환 목록 <브랜드> 설정 ; $ scope.list = response.rows 기록 쿼리 //의 총 수 $ 범위를. paginationConf.totalItems = response.total; // 레코드의 총 수를 갱신 } ); }
추가 JS 저장 수정 (4)
쿼리하여 ID는 판사가 신규 또는 수정 존재
scope.save 기능 = $ () {
var에 methodName로는 = '추가';
IF는 (! $ scope.entity.id = NULL가) {// 널 ID가 이미 대표, 수정해야 브랜드하지
methodName로 = '업데이트' ;
}
$ http.post ( '. 할' '../ 브랜드 /'+ methodName로 +, $ scope.entity) 일단 .success (
기능 (응답) {
IF (response.success) {
// 다시 쿼리
경고 (response.message );
$ scope.reloadList (); // 다시로드
}는 다른 {
경고 (response.message);
}
}
);
}
// 쿼리 수정 실체
$ scope.findOne = 기능 (언급 된 ID 위) {
$ http.get ( '../ 브랜드 / findOne.do? 위에서 언급 한 id ='+ 언급 된 ID 위)는 일단 .success (
기능 (응답) {
$ scope.entity = 응답;
}
);
}
삭제 5. 배치
$ scope.selectIds = []; // 선택된 ID의 세트가
업데이트 확인 //
$ scope.updateSelection = 함수 ($ 이벤트 ID)를 $ {// 이벤트에 이벤트의 현재 동작을 얻을 수는 어떤
경우에 ($ event.target .checked를) {// YES를 선택하면에 배열 증가
$ scope.selectIds.push (ID)
}는 {다른
VAR IDX = $ scope.selectIds.indexOf (ID);
$ scope.selectIds.splice (IDX, 1); // 삭제
}
}
// 대량 삭제
$의 scope.dele = 함수 () {
// 선택된 체크 박스를 얻을
$ 범위 + $ http.get ( '../ ? 브랜드 / delete.do IDS =' .selectIds) 일단 .success (
함수 (대응) {
IF (response.success) {
경고 (response.message);
$ scope.reloadList (); //刷新列表
} 다른 {
경고 (response.message);
}
}
);
}