Commit f66093b

Angular, Part 1: Why Choose Angular?

Angular has a lot of advantages over other client side Javascript frameworks.

Here are a handful of reasons that when building an app I turn to Angular first.

Flexibility

It's possible to take almost any portion of Angular and use it on its own.

For instance, my front end may not need a full router with the ability to access

a REST api. Maybe I just need a single two way data binding on a single view

and don't want the overhead of a full framework. This is a possiblity with

Angular but not with frameworks like Ember.

Testability

Angular was built from the ground with testing in mind. Angular's use of

dependency injection makes it easy to replace any functionality with a mock

or stub. This makes it easier to test a very specific piece of the application

and not the entire framework or app.

Customizability

The other advantage of Angular's dependecy injection is the ability to

replace any piece of the framework. Any moving piece of Angular can be

replaced simply by dependency injecting a custom peice of code or a third

party piece of code instead of the pieces that ship with Angular.

Easy-to-Learnability

The learning curve on Angular is very gentle. A programmer can start out

with just a handful of built in directives and some simple controller functions

and add on the more advanced bits as needed. Unlike frameworks that require conventions

in order to operate, Angular lets a developer pick his or her own conventions.

This can potentially be both a curse and a blessing but it jives well with

my particular learning and coding style. Also, Angular does not require a seperate

data model but can use plain old Javascript objects. This means that data

retrieved from an external source (such as a server) does not have to be converted

to an Angular only model structure before Angular can start using it

and there are no new data models and functionality to learn.

It-Stil-Just-Worksability

Despite Angular's flixible and customizable nature, all of the pieces work

well with each other. A controller can easily access the view, a view can

easily save new data to the model through the controller and routing is as simple as specifying

a view, a controller and a url. The only part that has to be explicitly defined

by the programmer is the interaction with the server/REST api. I actually

view this as an advantage because not all problems lend themselves well to the

GET/POST/PUT/DELETE pattern for a single resource. I often find myself needing

just a single end point for a resource and Angular allows me to make that

decision.

For me, Angular is a framework that places an emphasis on modularity, an

iterative learning approach and fine grain testing. As a Node developer I feel

at home while working with Angular. That said, there are always trade offs and

the Rails developer in me wants conventions and structure but I prefer being

able to establish them for myself rather than have someone else decide for me.

Angular Part 2, Getting Started With Angular

The easiest way to get started with Angular is to use a <a href="http://yeoman.io/">Yeoman generator</a>. The

code and doccumentation for the Angular generator can be found <a href="https://github.com/yeoman/generator-angular">Here</a>.

While I usually don't reccommend using generators it is a good way to see how the

moving pieces of Angular interact without having to worry about the file structure

or naming conventions of the app. If you don't have npm and node installed look for

instructions for your operating system <a href="http://nodejs.org/">on their website</a>

The first step is to install Yeoman and the angular generator globally, along with

bower and the grunt cli which are used for front end dependencies and build tools respectively:

`npm install -g yo generator-angular bower grunt-cli`. Next create an empty directory and

change into it. Then run `yo angular`, which will ask you a series of questions.

When first starting out I would answer no to using sass/compass unless you already

have it installed and have used it before. Answer no the bootstrap, primarily because

Angular already adds a lot of classes and html bits and having the bootstrap classes

in there as well will only make it more difficult to learn. The last question

asks what other angular parts should be installed, get rid of everything except routes.

The generator will then create a full working Angular app. To run the app, use the command

`grunt serve` which will build all of the assets, start the app and if possible will open the

index page in your browser.

There are three major moving parts to pay attention to in this generated app. First,

there's the app, located in app/scripts/app.js. This file contains the base level app

and the routing information using $routeProvider. Each .when statement contains the

url to watch for, and the view and controller to render when a user navigates to that

url. The next parts to look for are the views and controllers. The view are located

app/views and the controllers are located in app/controllers. To create a new view use the

command `yo angular:view <name of your view>` this will create a .html file in app/views

with the specified name. To create a new controller just use `yo angular:controller <name of controller>`.

This will create a basic controller in app/controllers with the specified name.

These are the minimum three pieces needed to create a single page web application. A router, some views

and some controllers. Angular doesn't have a specific model construct as it just uses

plain old javascript objects. Beyond these basics Anuglar has a host of features

designed to increase the modularity and reusability of your code. The most important

of these features include filters for transforming data or information in views (such as displaying 5.2 as $5.20).

There are services for performing tasks across controllers, views and any other place that

needs some reusable code. Finally, there are directives, which allow programmers to write portable

code that interacts directly with the DOM. Documentation on each of these mentioned

pieces of code can be found at the <a href="https://angularjs.org/">official Angular website</a>

and there are Yeoman generators for each.

That should get you started with Angular, obviously this doesn't inlcude everything or how

to actually build full web application. Part 3 will be on how to find more information about

Angular and how to stay up to date on the latest Angular trends and developments.

10 resources for learning more and keeping up to date

* <a href="https://docs.angularjs.org/tutorial">Official Angular Tutorial</a> While not especially easy to follow this tutorial

has a ton of great information in it.

* <a href="https://www.ng-book.com/">The ng-book</a> This book isn't cheap but it is the most

comprehensive book on Angular that I've found.

* <a href="http://pluralsight.com/training/Courses/TableOfContents/angularjs-fundamentals">Plural Sight: Angular Fundamentals</a>

A plural sight subscription also isn't cheap but this video series is great and they do have a free trial that will get you through most of it.

* <a href="https://www.codeschool.com/courses/shaping-up-with-angular-js">Code School: Shaping up with Angular</a>

Another subscription service with a free trial. This is a great interactive introduction to Angular.

* <a href="http://todomvc.com/architecture-examples/angularjs/#/"Angular TODO MVC<a>

TODO MVC is amazing, a great resource to learn any client side javascript framework.

* <a href="http://www.thinkster.io/angularjs/GtaQ0oMGIl">A Better Way to Learn Angularjs</a>

A great easy introduction to Angular with links to more in depth resources.

* <a href="https://docs.angularjs.org/guide/di">Dependency Injection<a> One of the fundamental pieces of Angular is

Dependency Injection and understanding how it works is a necessity for any serious Angular Developer

* <a href="http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/">Javascript Jabber: Dependency Injection</a>

An episode of the Javascript Jabber podcast with Misko Hevery, one of the original developers of Angular. This episode focuses on Dependency Injection both

in Angular and as a general pattern.

* <a href="https://egghead.io/">Egghead.io</a> Contains both free and subscription based "pro" videos on Angular and many other

web development tools.

* < href="https://github.com/jmcunningham/AngularJS-Learning">A Link to More Links</a>A github repository full of

links to great Angular.js resources.

var express = require('express');

var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(process.env.PORT || 3000);