❮ Angularjs Dependency Injection Angularjs Model ❯

AngularJS `Bootstrap`

The preferred stylesheet for AngularJS is Twitter Bootstrap, which is currently the most popular front-end framework.

Bootstrap

You can include Twitter Bootstrap in your AngularJS application by adding the following code in your <head> element:

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

For sites within China, it is recommended to use Bootstrap from Baidu's static resource library, with the following code:

Below is a complete HTML example that uses AngularJS directives and Bootstrap classes.

HTML Code

<!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 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>&nbsp;&nbsp;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>

Directive Analysis

AngularJS Directive	Description
`<html ng-app`	Defines an application for the `<html>` element (unnamed)
`<body ng-controller`	Defines a controller for the `<body>` element
`<tr ng-repeat`	Loops through the users object array, placing each user object in a `<tr>` element
`<button ng-click`	Calls the function `editUser()` when the `<button>` element is clicked
`<h3 ng-show`	Displays the `<h3>` element if `edit = true`
`<h3 ng-hide`	Hides the `<h3>` element if `edit = true`
`<input ng-model`	Binds the `<input>` element to the application
`<button ng-disabled`	Disables the `<button>` element if an error occurs or `incomplete = true`

Bootstrap Class Analysis

Element	Bootstrap Class	Definition
`<div>`	container	Content container
`<table>`	table	Table
`<table>`	table-striped	Table with striped background
`<button>`	btn	Button
`<button>`	btn-success	Success button
`<span>`	glyphicon	Glyph icon
`<span>`	glyphicon-pencil	Pencil icon
`<span>`	glyphicon-user	User icon
`<span>`	glyphicon-save	Save icon
`<form>`	form-horizontal	Horizontal form
`<div>`	form-group	Form group
`<label>`	control-label	Control label
`<label>`	col-sm-2	Span 2 columns
`<div>`	col-sm-10	Span 10 columns

JavaScript Code

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: "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;
    }
  };
});

JavaScript Code Analysis

Scope Property	Purpose
`$scope.fName`	Model variable (user first name)
`$scope.lName`	Model variable (user last name)
`$scope.passw1`	Model variable (user password 1)
`$scope.passw2`	Model variable (user password 2)
`$scope.users`	Model variable (array of users)
`$scope.edit`	Set to true when the user clicks to create a new user
`$scope.error`	Set to true if `passw1` does not equal `passw2`
`$scope.incomplete`	Set to true if any field is empty (length = 0)
`$scope.editUser`	Sets model variables
`$scope.watch`	Watches model variables

Validate model variable errors and integrity.