Bootstrap + AngularJS 1.6.8

Bootstrap + AngularJS 1.6.8 BoilerPlate

by militellovincenzo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body ng-app="myApp">

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div ng-controller="testController as $ctrl">
          <div uib-alert ng-class="'alert-warning'">{{$ctrl.message}}</div>
          
          <div uib-alert ng-class="'alert-warning'">{{$ctrl.firstPromiseResult}}</div>
          
          <div uib-alert ng-class="'alert-warning'">{{$ctrl.firstFinally}}</div>
          
           <div uib-alert ng-class="'alert-warning'">{{$ctrl.secondPromiseResult}}</div>
          
          <div uib-alert ng-class="'alert-warning'">{{$ctrl.secondFinally}}</div>
          
        </div>
      </div>
    </div>


  </div>

</body>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var app = angular.module('myApp', []);

/*component*/
myComponentCtr.$inject = ['$timeout'];

function myComponentCtr($timeout) {
  var $ctrl = this;

  $ctrl.$onInit = function() {

  };
}
app.component('myComponent', {
  bindings: {
    value: '<'
  },
  controller: myComponentCtr,
  template: 'test-component: {{$ctrl.value}}'
})

/*filter*/
myFilter.$inject = [];

function myFilter() {
  return function(v) {
    return v.toUpperCase();
  };
}
app.filter('myFilter', myFilter);

/*Service*/
myService.$inject = ['$timeout','$q'];

function myService($timeout, $q) {
  this.testMethod = function() {
    return 'service value';
  }

  this.promiseMethod = function(message, time) {
    time = time || 5000;
    var def = $q.defer();
    //10 seconds delay
    $timeout(function() {
      def.resolve(message);
    }, time);

    return def.promise;

  }
}
app.service('myService', myService);

/*Controller*/
testController.$inject = ['$timeout', '$http', 'myService'];

function testController($timeout, $http, myService) {
  var $ctrl = this;
  $ctrl.firstFinally = null;
  $ctrl.secondFinally = null;
  $ctrl.firstPromiseResult = null;
  $ctrl.secondPromiseResult = null;
  $ctrl.message = "Hello from the controller";
	firstPromise();
  
  function firstPromise() {

    return myService.promiseMethod("First Promise", 5000)
      .then(secondPromise)
      .finally(function() {
        $ctrl.firstFinally = "Finished";
      });

  }

  function secondPromise(val) {
    $ctrl.firstPromiseResult = val;
    return myService.promiseMethod("Second Promise", 5000)
      .then(function(result) {
        $ctrl.secondPromiseResult = result;
      })
      .finally(function() {
        $ctrl.secondFinally = "Finished second";
      });

  }
};
app.controller('testController', testController);