AngularJS + NodeJS + Yoeman + Bower + Grunt

Here comes to new experience with frontend development! AngularJS provide very detail tutorial in setup but I still having error in running npm install. The first step is always difficult as we are fresh and know nothing of it.

But no worry, let's get it clear what is AngularJS before we start to use it!

What is AngularJS?

1. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.

Then get a basic idea from http://www.w3schools.com/angular where they show you AJS directive is are HTML attribute with an ng prefix and some example of AJS expression and AJS controller. Trust me that http://www.w3schools.com/ really provide good tutorial for beginner. After understand the basic syntax, we won't feel like looking at alien code anymore. :D

What is NodeJS and npm?

1. Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
2. npm is a package manager for JavaScript, and is the default for Node.js. As of Node.js version 0.6.3, npm is bundled and installed automatically with the environment. npm runs through the command line and manages dependencies for an application.

Step by step setup AngularJS workplace:

1. Get your workplace ready with git, and node installed.
1. Install GIT to your workplace if you haven't install.
2. Open Git Shell and check availability of node, npm via the following command:
• node --version
• npm --version
2. Click HERE to redirect you to to node installer website, download and run the application.
3. Now you're able to start with the AngularJS tutorial from https://docs.angularjs.org/tutorial.

Who is Yeoman?

He is your computer man who live in npm package repository, sound lovely yea. Yeoman actually is web's scaffolding tools for modern webapps. The lovely part is with one or two command, Yeoman can write entire boilerplate code for your entire web application.

How to install Yeoman?
npm install -g yo


Yeoman also work with other tools -> grunt, gulp, bower for improving your productivity.
Next, go thru this tutorial to learn how to instruct your yeoman to work for you. ^^ VOla!

p/s: There might be blocker while install you run grunt serve, here is some helpful guideline:

1. npm install -g generator-angular 
2. yo angular 
3. bower install angular-ui 
4. npm install grunt-contrib-compass 
5. reinstall ruby gem installer (http://rubyinstaller.org/downloads/) with checked all checkbox 
6. on ruby console - gem install sass 
7. on ruby console - gem install compass 
8. grunt test 
9. grunt serve 
10. grunt 

Other Good Reference Website:
https://docs.angularjs.org/tutorial
http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
http://www.ng-newsletter.com/posts/directives.html