AngularJS 부트스트랩
AngularJS에서 선호하는 스타일 시트는 Twitter Bootstrap입니다. Twitter Bootstrap은 현재 가장 인기 있는 프런트 엔드 프레임워크입니다.
부트스트랩 튜토리얼을 확인해 보세요.
Bootstrap
Twitter Bootstrap을 AngularJS 애플리케이션에 추가할 수 있습니다. <head> 요소에 다음 코드를 추가할 수 있습니다:
<link rel="stylesheet" href="//maxcdn .bootstrapcdn. com/bootstrap/3.3.4/css/bootstrap.min.css">
사이트가 중국에 있는 경우 Baidu 정적 리소스 라이브러리의 Bootstrap을 사용하는 것이 좋습니다. 코드는 다음과 같습니다.
< ;link rel=" stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
다음은 AngularJS 지시문을 사용하는 완전한 HTML 예입니다. 및 부트스트랩 클래스.
HTML code
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead>
<tr>
<th>编辑</th>
<th>名</th>
<th>姓</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>
<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">名:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">重复密码:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="重复密码">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>
</div>
<script src="myUsers.js"></script>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
명령 분석
| AngularJS 지시어 | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <html> 요소에 대한 애플리케이션(이름 없음)을 정의합니다. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <body> 요소에 대한 컨트롤러를 정의합니다. | <tr ng-repeat | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <button ng-click | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <h3 ng-show | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <h3 ng-hide | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <input ng-model | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <button ng-enabled | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 요소 | Bootstrap 클래스 | definition |
|---|---|---|
| <div> | container | 콘텐츠 컨테이너 |
| <테이블> | table | table |
| <테이블> | table-striped | 줄무늬 배경의 테이블 |
| <button> | btn | button |
| <button> | b tn-suc cess | 성공 버튼 |
| <span> | glyphicon | glyph icon |
| <span> | glyphicon-pencil | 연필 아이콘 |
| <span> | glyphicon-user | 사용자 아이콘 |
| <span> | glyphicon-save | save-icon |
| <form> | form-horizontal | horizontal form |
| <div> | 양식 -그룹 | 양식 그룹 |
| <label> | control-label | controller-label |
| <label> | col-sm-2 | 2개 열에 걸쳐 |
| <div> | col- sm -10 | 10개 열 |
JavaScript 代码
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName: "핌" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName: "Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName: "팬" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.editUser = function(id) {
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].l이름;
}
};
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName ', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
});
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName: "핌" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName: "Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName: "팬" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.editUser = function(id) {
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].l이름;
}
};
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName ', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
});
JavaScript 코드 분석
| 모델 변수(사용자 이름) | |
|---|---|
| 모델 변수(사용자 성) | |
| 모델 변수(사용자 비밀번호 1) | |
| 모델 변수(사용자 비밀번호 2) | |
| 모델 변수(사용자 배열) | |
| 사용자가 클릭하면 true로 설정 사용자를 생성합니다. | |
| passw1이 passw2와 같지 않으면 true로 설정됩니다. | |
| 모든 필드가 비어 있으면 true로 설정됩니다(길이 = 0) | |
| 모델 변수 설정 | |
| 모델 변수 모니터링 | |
| 모델 변수의 오류 및 무결성 확인 | |
