AngularJS_1

[AngularJS] 14. Bootstrap- Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:35
728x90
반응형

AngularJS and Twitter Bootstrap 

 Bootstrap은 유명한 스타일 시트입니다. 


1. Bootstrap
 AngularJS 어플리케이션에 Bootstrap을 포함하기 위해서, <head> 요소에 아래 라인을 추가해 줍니다:




2. HTML Code

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
 
<body ng-controller="userController">
<div class="container">
 
<h3>Users</h3>
 
<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 class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>  Edit
        </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>  Create New User
</button>
<hr>
 
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
 
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">First Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">Last Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Password:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Repeat:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
    </div>
  </div>
</form>
 
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>  Save Changes
</button>
 
</div>
 
<script src= "myUsers.js"></script>
 
</body>
</html>
 
cs




3. Directives (Used Above) Explained


 
AngularJS DirectiveDescription
<html ng-appDefines an (unnamed) application for the <html> element
<body ng-controllerDefines a controller for the <body> element
<tr ng-repeatRepeats the <tr> element for each user in users
<button ng-clickInvoke the function editUser() when the <button> element is clicked
<h3 ng-showShow the <h3>s element if edit = true
<h3 ng-hideHide the <h3> element if edit = true
<input ng-modelBind the <input> element to the application
<button ng-disabledDisables the <button> element if error or incomplete = true
 [ 출처: W3Schools ]



4. Bootstrap Classes Explained


ElementBootstrap ClassDefines
<div>containerA content container
<table>tableA table
<table>table-stripedA striped table
<button>btnA button
<button>btn-successA success button
<span>glyphiconA glyph icon
<span>glyphicon-pencilA pencil icon
<span>glyphicon-userA user icon
<span>glyphicon-saveA save icon
<form>form-horizontalA horizontal form
<div>form-groupA form group
<label>control-labelA control label
<label>col-sm-2A 2 columns span
<div>col-sm-10A 10 columns span
 [ 출처: W3Schools ]



5. JavaScript Code


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
function userController($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',  lName:"Pege" },
{id:2, fName:'Kim',   lName:"Pim" },
{id:3, fName:'Sal',   lName:"Smith" },
{id:4, fName:'Jack',  lName:"Jones" },
{id:5, fName:'John',  lName:"Doe" },
{id:6, fName:'Peter', lName:"Pan" }
];
$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].lName; 
  }
};
 
$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;
  }
};
 
}
cs

 







6. JavaScript Code Explained


Scope PropertiesUsed for
$scope.fNameModel variable (user first name)
$scope.lNameModel variable (user last name)
$scope.passw1Model variable (user password 1)
$scope.passw2Model variable (user password 2)
$scope.usersModel variable (array of users)
$scope.editSet to true when user clicks on create user.
$scope.errorSet to true if passw1 not equal passw2
$scope.incompleteSet to true if any field is empty (length = 0)
$scope.editUserSets model variables
$scope.watchWatches model variables
$scope.testTests model variables for errors and incompleteness
 [ 출처: W3Schools ]


















* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시 (새창열림)