AngularJS Bootstrap

AngularJS의 최선의 스타일 시트는 Twitter Bootstrap로, 현재 가장 인기 있는 프론트엔드 프레임워크입니다.

Bootstrap

당신의 AngularJS 애플리케이션에 Twitter Bootstrap를 추가할 수 있습니다. 당신의 <head> 요소에 다음과 같은 코드를 추가하세요:

<link　rel="stylesheet"　href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

사이트가 국내에 있으면, 베이도우 스타틱 리소스 라이브러리의 Bootstrap를 사용하는 것이 좋습니다. 다음과 같은 코드를 사용하세요:

다음은 완전한 HTML 예제로, AngularJS 지시와 Bootstrap 클래스를 사용하고 있습니다.

HTML 코드

<!DOCTYPE　html>
<html>
<link　rel="stylesheet"
href="http://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>
<body　
　ng-app="myApp"　ng-controller="userCtrl">
　
<div>
<h2>Users</h2>
<table　
class="table　table-striped">
　　<thead><tr
　　　　<th>Edit</th>
　　　　<th>First　
Name</th>
　　　　<th>Last　Name</th>
　　</tr></thead>
　　<tbody><tr　
ng-repeat="user　in　users">
　　　　<td>
　　　　　　<button ng-click="editUser(user.id)">
　　　　　
<span></span>  Edit
　　　　　
</button>
　　　　</td>
　　　　<td>{{　user.fName　}}</td>
　　　　<td>{{　user.lName　}}</td>
　
</tr></tbody>
</table>
<hr>
<button　
ng-click="editUser('new')">
　　<span></span>　Create　New　User
</button>
<hr>
<h2　ng-show="edit">Create　New　User:</h2>
<h2　ng-hide="edit">Edit　
User:</h2>
<form>
<div>
　
<label>First　Name:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="text"　ng-model="fName"　ng-disabled="!edit"　
placeholder="First　Name">
　　</div>
	</div>　
<div>
　
<label>Last　Name:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="text"　ng-model="lName"　ng-disabled="!edit"　
placeholder="Last　Name">
　　</div>
</div>
	<div>
　
<label>Password:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="password"　ng-model="passw1"　
placeholder="Password">
　　</div>
</div>
	<div>
　
<label>Repeat:</label>
　　<div　
class="col-sm-10">
　　　　<input　type="password"　ng-model="passw2"　
placeholder="Repeat　Password">
　　</div>
</div>
</form>
<hr>
<button ng-disabled="error || incomplete">
　　<span></span>저장　
변경
</button>
</div>
<script src="myUsers.js"></script>
</body>
　</html>

JavaScript 코드 해석

스코프 속성	용도
$scope.fName	모델 변수(사용자 이름)
$scope.lName	모델 변수(사용자 성)
$scope.passw1	모델 변수(사용자 비밀번호) 1)
$scope.passw2	모델 변수(사용자 비밀번호) 2)
$scope.users	모델 변수(사용자 배열)
$scope.edit	사용자가 사용자 생성을 클릭할 때 true로 설정
$scope.error	passw가 있을 경우1 passw와 다르지 않음2 true로 설정
$scope.incomplete	필드가 비어 있을 경우(length = 0) true로 설정
$scope.editUser	모델 변수를 설정
$scope.watch	모델 변수를 모니터링
$scope.test	모델 변수의 오류와 전체성을 검증

AngularJS 참조 매뉴얼 AngularJS 국제화

AngularJS 기본 튜토리얼

AngularJS Bootstrap

Bootstrap

HTML 코드

JavaScript 코드 해석