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="form-inline">
      <div class="row">
        <div class="form-group col-md-6">

          <label for="inputEmail">Email</label>
          <div class="input-group" style="position:initial">
            <span class="input-group-addon" id="basic-addon1">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          </div>

        </div>

        <div class="form-group col-md-6">
          <label for="inputPassword">Password</label>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
      
       <div class="row">
           <div class="form-group col-md-6">
          <label for="inputPassword">Email</label>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>

        <div class="form-group col-md-6">
          <label for="inputPassword">Password</label>
          <input type="password" class="form-control" id="inputPassword"...

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'];

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

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

function testController($timeout, $http, myService) {
  var $ctrl = this;
  $ctrl.message = "Hello from the controller";
};
app.controller('testController', testController);