Starting AngularJS Development with Yeoman, Grunt and Bower Part 1

Pada blog ini saya akan membahas tentang AngularJS. Salah satunya adalah membuat skeleton struktur AngularJS app dengan menggunakan Yeoman, kemudian menggunakan Grunt untuk mempercepat proses development.
Pertama-tama yang harus kita lakukan adalah menginstall Yeoman, Grunt dan Bower. Untuk mempermudah kita akan memakai Node Package Manager untuk melakukan nya sekaligus. Jalankan code berikut di dalam terminal.

 npm install -g yo grunt-cli bower  

Sambil menunggu instalasi, saya akan menjelaskan sedikit apa saja yang akan kita pakai. Yeoman digunakan untuk mengenerate skeleton app. Yeoman akan membuat basic folder, files, dan konfigurasi untuk mempermudah pekerjaan kita. Salah satu fitur terbaik dari Yeoman adalah kemampuan untuk menggunakan custom generator. Salah satu generator yang akan dipakai adalah AngularJS generator.
Jika proses instalasi di atas sudah selesai. Jalankan code berikut untuk menginstall AngularJS generator.

 npm install -g generator-angular  

Jika sudah, kita sudah bisa mengenerate AngularJS Application. Untuk mengenerate jalankan code berikut.

 yo angular  

Pada saat menjalankan generator, generator tersebut akan menanyakan beberapa pertanyaan tentang apa saja yang akan di include pada aplikasi Angular yang akan di generate.

Pada gambar di atas saya membuat aplikasi angular pada folder SimpleAngular. Setelah menjawab beberapa pertanyaan tersebut, Yeoman akan mengenerate semua file dan konfigurasi yang kita butuhkan. 
Berikut adalah yang digenerate oleh Yeoman.

app/directory
app directory berisi angular app. Di dalam nya terdapat html, css dan javascript. Disinilah kalian akan menghabiskan banyak waktu saat proses development.

package.json
File package.json membantu npm untuk mengindentifikasi project kita dan juga menghandle semua dependencies nya.

node_modules
Di folder ini terdapat semua node module yang kalian butuhkan oleh angular.

Gruntfile.js
File ini merupakan file javascript untuk menkonfigurasi project yang dilakukan oleh task apapun atau plugin apapun yang dibutuhkan di dalam project. Di file inilah kita akan mengkonfig spesifik direktori ketika akan membuild.

component.json
File ini digunakan untuk memberitahu dependencies kepada Bower package manager.
File ini dipakai untuk mendistribusi config options ke bower.

Karma files
Karma adalah sebuah framework untuk testing. Kita akan menggunakannya untuk menjalankan test pada Angular app.
Bower - Package Manager untuk Web
Sebelum kita menggunakan bower, ada sedikit configurasi yang harus kita tambahkan sendiri. Buka file .bowerrc

Pada gambar di atas adalah isi dari file .bowerrc yang belum di edit. Tambahkan code berikut.

 ,"json":"bower.json"  

Sehingga isi file tersebut menjadi :

Yang dilakukan pada code tersebut adalah memberitahu Bower untuk menggunakan package bower.json bagaimana menginstall package itu. Jika sudah jalankan code berikut untuk meng-fetch dependencies.

 npm install  

 bower install  

Bower  adalah package manager. Bower akan membantu kita untuk menemukan dan menginstall favorite CSS Frameworks, javascript libraries dan plugins hanya dengan menggunakan beberapa command yang mudah.
Sekarang kita akan menginstall Angular Boostrap. Jalankan code berikut untuk menambahkan library angular boostrap menggunakan Bower.

 bower install angular-bootstrap --save

--save berarti memberitahu bower untuk menambahkan angular-bootstrap ke file bower.json sebagai dependency.
Content pada app/directory

index.html
Ini merupakan core HTML page dari app kalian.

scripts/ directory
Disini adalah tempat javascript apps kalian berada.

styles/ directory
Disini adalah tempat css/sass kalian berada.

Views
Disini adalah tempat halaman template kalian berada.

Modul: /app/scripts/app.js

'use strict';

/**
* @ngdoc overview
* @name simpleAngularApp
* @description
* Main module of the application.
* # simpleAngularApp
**/

//Disini kita mengeset angular module
angular.module('simpleAngularApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize'
  ])
  .config(function ($routeProvider) {

//Disini kita mengconfig routerProvider
//route provider dipakai untuk meng-config app routes kita.
//views/main.html template menggunakan MainCtrl sebagai controllernya.
//config dibawah simpelnya jika kita membuka '/' itu akan membuka
//Method lain yang tidak terdaftar akan teridirect ke home.

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }); 

Controller: /app/scripts/controllers/main.js

 'use strict';

/**
 * @ngdoc function
 * @name simpleAngularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the simpleAngularApp
 */

angular.module('simpleAngularApp') //ini cara memasukkan controller ke dalam module
//Kita menginject $scope ke dalam dependency Angular

.controller('MainCtrl', ['$scope',function ($scope) {
//Pada kasus ini kita menambahkan collection awesomeThings untuk di display di view.
//Apapun yang kita masukkan ke dalam scope akan bisa ditampilkan di view.

 $scope.items = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma',
        'SitePoint'
      ];
}]);

View: app/views/main.html

  <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p>  
   <ul>  
     <!-- Disini kita menggunakan AngularJS Directive  
     untuk menghitung jumlah item yang di declare di items   
     dan menampilkan mereka sebagai list item menggunakan tag {{}} -->  
     <li ng-repeat="thing in items">{{thing}}</li>  
   </ul>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
  </div>  

View: app/index.html

 [html] <!doctype html>  
  <html>  
   <head>...</head>  
   <!-- ng-app directive memberitahu angular module mana yang kita pakai.  
   Pada kasus ini yang kita define di scripts/app.js -->  
   <body ng-app="simpleAngularApp">   
    <!-- ng-view directive menspesifik template view yang akan di load di div ini-->  
    <div class="container" ng-view></div>  
    <!-- Disini kita load AngularJS dan AngularJS resource komponen -->  
     <script src="bower_components/jquery/dist/jquery.js"></script>  
     <script src="bower_components/angular/angular.js"></script>  
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>  
     <script src="bower_components/angular-animate/angular-animate.js"></script>  
     <script src="bower_components/angular-aria/angular-aria.js"></script>  
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>  
     <script src="bower_components/angular-resource/angular-resource.js"></script>  
     <script src="bower_components/angular-route/angular-route.js"></script>  
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>  
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>   
    <!-- Disini kita memasukan script yang kita gunakan -->  
    <!-- build:js scripts/scripts.js -->  
    <script src="scripts/app.js"></script>  
    <script src="scripts/controllers/main.js"></script>  
    <!-- endbuild -->  
   </body>  
  </html>  

Sampai disini kita sudah membuat Angular App dan sudah sedikit tahu tentang komponen komponen yang di generate. Berikut tampilan nya jika dijalankan.

Pada kesempatan berikut nya kita akan sedikit mengedit dari apa yang sudah di generate. Bersambung ke part 2...