AngularJS

Saturday, January 25, 2014

AngularJS is a javascript library

MV* Framework, opinionated software with a vision

Build cool apps with angular!

Characteristics:

  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, asp.net 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 wrapbootstrap.com 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