ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [AngularJS] 14. Bootstrap- Angular JS 강좌
    Web/AngularJS 2015. 6. 12. 14:24
    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 를 참고하여 작성하였습니다.




      



    댓글

Designed by Tistory.