AngularJS와 부트 스트랩

이전 : AngularJS와 입력 확인

다음 : AngularJS와는 포함

AngularJS와 선호하는 스타일 시트는 트위터 부트 스트랩 가장 인기있는 프런트 엔드 프레임 워크, 트위터 부트 스트랩입니다.

부트 스트랩 자습서를 참조하십시오 .

부트 스트랩

당신은 트위터 부트 스트랩 당신의 AngularJS와 응용 프로그램에 가입 할 수 있습니다, 당신은 당신의 <head>에 다음 코드 요소를 추가 할 수 있습니다 :

<링크 REL = "스타일 시트"HREF = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

국가에있는 사이트 경우, 바이 정적 저장소 부트 스트랩, 다음 코드를 사용하는 것이 좋습니다 :

다음은 AngularJS와 부트 스트랩 클래스 명령어를 사용하여 완전한 HTML 예이다.

HTML 코드

<! DOCTYPE html로>
<HTML>
<링크 REL = "스타일 시트"HREF = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<바디 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "userCtrl">

<사업부 클래스 = "컨테이너">

<H3> 사용자 </ H3>

<표 클래스 = "테이블 테이블 -의 스트라이프">
<THEAD> <TR>
<목> 수정 </ 일>
<목> 이름 </ 일 >
<목> 성 </ 일 >
</ TR> </ THEAD>
<TBODY> <TR-반복 ng를 "사용자의 사용자"=>
<TD>
<Button 클래스 = "BTN"NG - 클릭 = "editUser (user.id)">
<스팬 클래스 = "glyphicon glyphicon- 연필"> </ SPAN> & NBSP; & NBSP; 편집
</ 버튼>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</ 테이블>

<HR>
<버튼 클래스 = "btn을 btn- 성공"NG 클릭 = "editUser ( '새')">
<스팬 클래스 = "glyphicon glyphicon- 사용자"> </ SPAN> 새 사용자 만들기
</ 버튼>
<HR>

<H3의 NG 쇼 = "편집 "> 새 사용자 만들기 : </ H3>
<H3의 NG 숨기기 = "편집 "> 사용자 편집 : </ H3>

<Form 클래스 = "폼 수평 ">
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 이름 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "텍스트"NG -Model = "FNAME"NG 장애인 = "! 수정 '자리 ="이름 ">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 성 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "텍스트"NG -Model = "LNAME"NG 장애인 = "! 수정 '자리 ="성 ">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 비밀번호 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "암호"NG -Model = "passw1"자리 = "비밀번호">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 ">
<Label 클래스 = "COL-SM -2 제어 라벨"> 반복 : </ 라벨>
<사업부 클래스 = "COL-SM -10">
<입력 유형 = "암호"NG -Model = "passw2"자리 = "반복 암호">
</ DIV>
</ DIV>
</ FORM>

<HR>
<버튼 클래스 = "btn- btn을 성공"NG 장애인 = "오류 || 불완전">
<스팬 클래스 = "glyphicon glyphicon- </ SPAN> 변경 사항 저장 저장">
</ 버튼>
</ DIV>

<스크립트 SRC = "myUsers.js"> </ script>
</ BODY>
</ HTML>

»시도

명령 구문 분석

지시를 AngularJS와	기술
<HTML NG-앱	를 들어 <HTML> 요소는 응용 프로그램 (무명)를 정의
<바디 NG 컨트롤러	의 <몸>에 대한 요소는 컨트롤러를 정의
<TR 겨 반복	사이클 사용자 객체의 배열하는 <TR> 요소의 각 사용자 개체.
<버튼 NG 클릭	함수가) (editUser 클릭 <버튼> 요소를 호출 할 때
<H3의 NG 쇼	당신은 = true를 표시 <H3> 요소를 편집하는 경우
<H3의 NG 숨기기	당신은 = 사실 숨겨진 <H3> 요소를 편집하는 경우
<입력 NG 모델	응용 프로그램에 대한 <입력> 요소를 바인딩
<버튼 NG 장애인	오류가 발생하는 경우 또는 ncomplete = true를 사용 안 함 <버튼> 요소

분석의 부트 스트랩 클래스

요소	부트 스트랩 클래스	정의
<DIV>	컨테이너	용기의 내용물
<표>	테이블	테이블
<표>	테이블 줄무늬	표 줄무늬 배경
<버튼>	BTN	누름 단추
<버튼>	BTN-성공	성공 버튼
<SPAN>	glyphicon	갈매기 표 수장
<SPAN>	glyphicon 연필	연필 아이콘
<SPAN>	glyphicon 사용자	사용자 아이콘
<SPAN>	glyphicon 절약	저장 아이콘
<양식>	폼 수평	수평 테이블
<DIV>	폼 그룹	양식 그룹
<레이블>	제어 라벨	컨트롤러 태그
<레이블>	COL-SM-2	이상 2
<DIV>	COL-SM-10	10 이상

자바 스크립트 코드

myUsers.js

angular.module ( '을 myApp', [] ). 컨트롤러 ( 'userCtrl', 기능 ($ 범위) {
$ scope.fName = '';
$ scope.lName = '';
$ scope.passw1 = '';
$ scope.passw2 = '';
$ Scope.users = [
{ID : 1, FNAME ' Hege', LNAME "Pege"},
{ID : 2, FNAME ' 김', LNAME "핌"},
{ID : 3, FNAME : ' 살', LNAME : "스미스"},
{ID : 4, FNAME : ' 잭', LNAME "존스"},
{ID : 5, FNAME ' 존', LNAME : "미상"},
{ID : 6, FNAME ' 피터', LNAME "팬"}
]
$의 scope.edit = TRUE;
$의 scope.error = 거짓;
$의 scope.incomplete = 거짓;

$ scope.editUser = 함수 (ID) {
경우 (ID == '새') {
$의 scope.edit = TRUE;
$의 scope.incomplete = TRUE;
$ scope.fName = '';
$ scope.lName = '';
} 그밖에 {
$의 scope.edit = 거짓;
$ Scope.fName = $ scope.users [ID-1] .fName;
$ Scope.lName = $ scope.users [ID-1] .lName;
}
};

. $ 범위 $ 시계 ( 'passw1 ', 함수 () {$ scope.test ();});
. $ 범위 $ 시계 ( 'passw2 ', 함수 () {$ scope.test ();});
. $ 범위 $ 시계 ( 'FNAME ', 함수 () {$ scope.test ();});
. $ 범위 $ 시계 ( 'LNAME ', 함수 () {$ scope.test ();});

$ scope.test = 함수 () {
($ scope.passw1! == $의 scope.passw2 경우 ) {
$의 scope.error = TRUE;
} 그밖에 {
$의 scope.error = 거짓;
}
$의 scope.incomplete = 거짓;
경우 ($의 scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$의 scope.incomplete = TRUE;
}
};

});

자바 스크립트 코드 분석

범위 속성	용도
$ Scope.fName	모델 변수 (사용자 이름)
$ Scope.lName	모델 변수 (사용자 이름)
$ Scope.passw1	모델 변수 (사용자 암호 1)
$ Scope.passw2	모델 변수 (사용자 암호 2)
$ Scope.users	모델 변수 (사용자 어레이)
$ Scope.edit	사용자가 사용자를 만들 클릭 할 때 그것은 true로 설정됩니다.
$ Scope.error	passw1 같지 passw2는 true로 설정하면
$ Scope.incomplete	각 필드가 비어 있으면 (길이 = 0)가 true로 설정되어
$ Scope.editUser	모델 변수 설정
$ Scope.watch	모니터 모델 변수
$ Scope.test	유효성 검사 오류 및 모델 변수의 완전성