Starting AngularJS Development with Yeoman, Grunt and Bower Part 2

Sebelumnya pada part 1 kita sudah mengenerate project menggunakan angular generator dan sudah menambahkan library angular-bootstrap. Maka pada kesempatan kali ini kita akan menambahkan beberapa perubahan.
Mari kita tambahkan library AngularUI Boostrap yang sudah kita include di part 1. Dikarenakan Bower hanya package manager, dia tidak bertanggung jawab untuk menambahkan file ke index.html. Kita harus menambahkan itu sendiri.
Jadi buka app/index.htmldan tambahkan line code berikut.

 <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>  

Setelah itu kita harus menambahkan ui-boostrap dependency ke Angular module kita. Buka app/scripts/app.js dan tambahkan ui.bootstrap module sebagai dependency.
/app/scripts/app.js

 'use strict';  
 /**  
  * @ngdoc overview  
  * @name simpleAngularApp  
  * @description  
  * # simpleAngularApp  
  *  
  * Main module of the application.  
  */  
 angular  
  .module('simpleAngularApp', [  
   'ngAnimate',  
   'ngAria',  
   'ngCookies',  
   'ngResource',  
   'ngRoute',  
   'ngSanitize',  
   'ui.bootstrap'  
  ])  
  .config(function ($routeProvider) {  
   $routeProvider  
    .when('/', {  
     templateUrl: 'views/main.html',  
     controller: 'MainCtrl'  
    })  
    .otherwise({  
     redirectTo: '/'  
    });  
  });  

Kita harus melakukan beberapa perubahan pada view kita.
View: app/views/main.html

 <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p> <!-- kita memindahkan ng-repeat kedalam directive   
   modal yang dibawa oleh angular bootstrap-->  
   <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>  
   <!--ng-click sejenis event onClick dia akan melakukan sesuatu,   
   pada kasus ini ketika di klik angular akan membuka method open-->  
   </div>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
   <!-- script disini digunakan untuk mengenerate template modal -->  
   <script type="text/ng-template" id="myModalContent.html">  
     <div class="modal-header">  
       <h3 class="modal-title">I'm a modal!</h3>  
     </div>  
     <div class="modal-body">  
       <ul>  
     <!-- ng-repeat dipindahkan kedalam sini -->  
         <li ng-repeat="item in items">  
           <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>  
         </li>  
       </ul>  
       Selected: <b>{{ selected.item }}</b>  
     </div>  
     <div class="modal-footer">  
       <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>  
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>  
     </div>  
   </script>  
  </div>  

Controller : app/script/controller/main.js

 'use strict';  
 /**  
  * @ngdoc function  
  * @name simpleAngularApp.controller:MainCtrl  
  * @description  
  * # MainCtrl  
  * Controller of the simpleAngularApp  
  */  
 angular.module('simpleAngularApp')  
  .controller('MainCtrl', ['$scope','$uibModal','$log',function ($scope,$uibModal,$log) {  
  $scope.items = [  
     'HTML5 Boilerplate',  
     'AngularJS',  
     'Karma',  
     'SitePoint'  
    ];  
   $scope.animationsEnabled = true;  
  $scope.open = function (size) {  
   var modalInstance = $uibModal.open({  
    animation: $scope.animationsEnabled,  
    templateUrl: 'myModalContent.html',  
    controller: 'ModalInstanceCtrl',  
    size: size,  
    resolve: {  
     items: function () {  
      return $scope.items;  
     }  
    }  
   });  
   modalInstance.result.then(function (selectedItem) {  
    $scope.selected = selectedItem;  
   }, function () {  
    $log.info('Modal dismissed at: ' + new Date());  
   });  
  };  
  $scope.toggleAnimation = function () {  
   $scope.animationsEnabled = !$scope.animationsEnabled;  
  };  
 }]);  
 angular.module('simpleAngularApp').controller('ModalInstanceCtrl',['$scope','$uibModalInstance','items', function ($scope, $uibModalInstance, items) {  
  $scope.items = items;  
  $scope.selected = {  
   item: $scope.items[0]  
  };  
  $scope.ok = function () {  
   $uibModalInstance.close($scope.selected.item);  
  };  
  $scope.cancel = function () {  
   $uibModalInstance.dismiss('cancel');  
  };  
 }  
  ]);  

Kita sudah menggunakan beberapa bootstrap css class, membuat modal dialog menggunakan bawaan dari angular-bootstrap dan memindahkan ng-repeat ke dalam modal dialog.
Setelah ini jalankan code dibawah untuk menjalankan angular apps. Jangan lupa jalankan ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt serve  

Berikut tampilan nya jika dijalankan.

Sedangkan jika kita akan meminified nya jalankan code dibawah, hasilnya akan berada di dalam folder dist dan jalankan kode ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt clean build  

Sekian dahulu dari saya.
Semoga Bermanfaat !