Saturday, January 25, 2014

AngularJS is a javascript library

MV* Framework, opinionated software with a vision

Build cool apps with angular!


  1. Open source built by the folks at google
  2. Comprehensive, Model, Views, Controller, Partial Templates, 2 Way Data Binding
  3. Testable
  4. Extends HTML Vocabulary
  5. Forward Thinking
  6. Can be used Server Side Node.js

File new project, web application

Select empty template

The addons for development

Navigate to initializr to create a boilerplate, select bootstrap

Click on download it

Press ok

Unzip the folder and copy the files into clipboard

In visual studio, open folder in file explorer

Paste in the initializr boilerplate files

Click on show all files

Select the files, right click and select include in project

Run the project and view the default

Add a new js file to the js folder

Add an anonymous function with this object graph, a collection of data, 2 marathons

Reference the data.js file in the index.html file

Right click on the project node and select manage nuget packages

Search for and install angular

Copy and paste the vendor javascript files into the scripts folder and delete the vendor folder

In the index.html file replace the vendor path with scripts

Remove this boilerplate code

Delete the log in form

Modify the project name

Remove the jumbotron and row divs

Add this hello world div

Right click the file and select view in browser

View the hello world in the browser, fully responsive for mobile devices

Mock the data structure statically

Save the changes, refresh the browser page and view the results

Select 2 corresponding divs and press shift+alt+w

The selection gets wrapped by a p tag, change it to a div, do this for all corresponding divs

Add a button

Copy and paste the contents into the second div to mirror it

Save and view the page in the browser

On possible to purchase themes between 15 and 30 bucks, to avoid having the standard bootstrap look

Add a reference to angular in the index.html file

Add this module to the data javascript file

Add the ng-app directive and give it the name of the module

Add this controller

Copy the data collection and paste it above the module, use as a closure outside

Bind to the controller, iterate over the marathons collection, bind the individual fields

Default Success Warning Important Info Inverse
B S W I ? O