Angularjs 부트 스트랩
AngularJS의 선호하는 스타일 시트는 현재 가장 인기있는 프론트 엔드 프레임 워크 인 Twitter Bootstrap입니다.
부트 스트랩 자습서를 확인하십시오.
부트 스트랩
AngularJS 응용 프로그램에 Twitter 부트 스트랩을 추가 할 수 있으며 <head> 요소에 다음 코드를 추가 할 수 있습니다.
<link rel = "stylesheet"href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
사이트가 전국에있는 경우 Baidu의 정적 리소스 라이브러리의 부트 스트랩을 사용하는 것이 좋습니다. 코드는 다음과 같습니다.
<link rel = "stylesheet"href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
다음은 AngularJS 지시문 및 부트 스트랩 클래스를 사용하는 완전한 HTML 인스턴스입니다.
HTML 코드
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "스타일 시트"href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootsprap.min.css"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "ng-controller ="userctrl "> <div> <h3> users </h3> <Thead> <Thead> <Th> name </th> <th> last </th> </tr> </thead> <tbody> <tr ng-repeat = "user in user"> <td> <button ng-click = "edituser (user.id)"> <span> </span> edit </button> </td> <td> {user.fname.fname}} user.lname}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ( 'new')"> <span> </span> 새 사용자 만들기 </button> <hr> <h3 ng-show = "편집"> 새 사용자 만들기 : </h3> <h3 ng-hide = </h3> 편집자 "> <div> <lable> 이름 : </label> <div> <입력 유형 = "text"ng-model = "fname"ng-disabled = "! edit"placeholder = "name"> </div> </div> <label> 주제 : </label> <div> <div> <intep "ng-model ="lname "! </div> <div> <labe> 비밀번호 : </label> <div> <입력 유형 = "password"ng-model = "passw1"placeholder = "password"> </div> </div> <div> <label> 반복 비밀번호 : </label> <div> <input type = "Passwor"ng-model = "passw2"plastolder = "blound"> </div> </form> ng-disabled = "error || incomplete"> <span> </span> modify </button> </div> <script src = "myusers.js"> </script> </body> </html>실행 결과 :
교육 분석
| AngularJS 지침 | 설명하다 |
|---|---|
| <html ng-app | <html> 요소에 대한 응용 프로그램 정의 (이름이 없음) |
| <바디 ng- 컨트롤러 | <body> 요소의 컨트롤러를 정의하십시오 |
| <tr ng-repeat | 루프 사용자 객체의 배열을 고리하고 각 사용자 객체는 <tr> 요소에 배치됩니다. |
| <버튼 ng 클릭 | <버튼> 요소를 클릭하면 function edituser ()를 호출하십시오 |
| <h3 ng-show | edit = true 인 경우 <h3> 요소를 표시합니다 |
| <H3-HIDE | edit = true가 <h3> 요소를 숨 깁니다 |
| <입력 ng 모델 | 응용 프로그램의 <입력> 요소를 바인딩합니다 |
| <버튼 ng disabled | 오류가 발생하거나 ncomplete = true가 <버튼> 요소를 비활성화하는 경우 |
부트 스트랩 클래스 분석
| 요소 | 부트 스트랩 클래스 | 정의 |
|---|---|---|
| <div> | 컨테이너 | 콘텐츠 컨테이너 |
| <테이블> | 테이블 | 시트 |
| <테이블> | 테이블 스트라이프 | 줄무늬 배경이있는 테이블 |
| <버튼> | BTN | 단추 |
| <버튼> | BTN-SUCCESS | 성공 버튼 |
| <span> | 글리 피콘 | 글리프 아이콘 |
| <span> | 글리 피콘 연필 | 연필 아이콘 |
| <span> | 글리 피콘 사용자 | 사용자 아이콘 |
| <span> | 글리 피콘 사무리 | 아이콘을 저장하십시오 |
| <양식> | 형태-영역 | 레벨 테이블 |
| <div> | 형태 그룹 | 양식 그룹 |
| <라벨> | 제어 라벨 | 컨트롤러 태그 |
| <라벨> | col-SM-2 | 2 개의 열에 걸쳐 있습니다 |
| <div> | Col-SM-10 | 10 개의 열에 걸쳐 있습니다 |
자바 스크립트 코드
myusers.js
Angular.Module ( 'myApp', []). 컨트롤러 ( 'userctrl', function ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = ''; $ scope.users = [{id : 1, fname : 'hege', "} fname : 'kim', lname : "pim"}, {id : 3, fname : 'sal', lname : "smith"}, {id : 4, fname : 'jack', lname : "jones"}, {id : 5, fname : 'John', lname : 'doe "}, {pete': 6, fname : 6, fname : 6 }; $ scope.error = false; $ scope.incement; $ scope.edituser = function (id == 'new'). $ scope.fname = $ scope.users [id-1] .fname.lname = $ scope.users [id-1]; $ scope. $ watch ( 'passw1', {$ scope.test (); $ scope. $ scope. {$ scope.test ();}); $ scope. $ watch ( 'fname', function () {$ scope.test ();}); $ scope. $ scope. $ watch ( 'lname', function () {$ scope.test ();}); $ scope. $ scope. ( 'lname', function (); if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true} $ scope.incople = false; ! $ scope.passw2.length)) {$ scope.incomplete = true;};JavaScript 코드 구문 분석
| 범위 속성 | 사용 |
|---|---|
| $ 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 | 모델 변수의 오류 및 무결성을 확인하십시오 |
위는 AngularJS 부트 스트랩 정보의 편집입니다. 나중에 계속 추가 할 것입니다. AngularJS를 프로그램 할 수있는 학생들을 도울 수 있기를 바랍니다.