AngularJS Foundation - Build a strong foundation

Wednesday, September 24, 2014

Angularjs is an intuitive framework that makes it easy to organize your code.

Testable code makes it easier for you to to sleep at night.

Two way data binding saves you hundreds of lines of code.

AngularJS is superheroic Javascript Framework! Superpowers with AngularJS!!!

Templates that are HTML means you already know how to write them.

Data structures that are just JavaScript make integration really easy.

Turn the HTML page into an angular application, include the angular javascript file

Add the ng-app directive, this informs angular that this is an angular application and the html will be parsed

In the ng-init directive set a variable, bind to the variable in the double curly braces

View the page in the browser, this is the basic mechanism of an angular application

Insert the ng-repeat directive, iterate over a list of items and display them in the angular expression, the double curly braces

An array with six items added to the ng-init directive

Refresh the web page, view the 6 items displayed

In ng-click directive set array length value equal to array length

Click button, view a new item incremented is added to the web page

Add a button with ng-click set to hide unequal hide and add the ng-hide directive to the list

Refresh the web page, add some items and click on the toggle button, the list is hidden

Click toggle button, the list is displayed

Search box filter list of items, add ng-model directive to text box, insert filter into list

Key in value in text box, the list is filtered

New HTML page references javascript file and ng-app directive references myapp module, this module will be instantiated when the web page loads

In the app.js file create the module, the second argument is an array where dependencies can be injected

In the html file don't forget to add a reference to the angular javascript file

The version constant ist part of myapp module, can be used in other parts of the module executes when all modules have been loaded once, here version is extracted from constant, injected into function, then displayed in message box

Refresh the web page and view the alert with version number

Use explicit array syntax format to avoid problems when minifying, this explicitly defines which parameters are going to be injected

In app.js create a controller, use dot controller, name it and inject the properties, in this case scope

Reference controller in HTML code with directive ng-controller

Create a property on the scope and give it a value, the scope is the glue between the controller and the view or template or html

In the scope of the controller, that is the body tag, insert the property defined on the scope in the controller in between two curly braces

Refresh the web page and view the data binding in action

Add a heading, now we are defining styling around our data

Define a function on the scope named description, this returns data as a function

In the HTML page, bind to the function on the scope using the method brace syntax

Refresh the web page, view data binding to a property and method on the scope

Remove HTML code on the template, add ng-view directive in a div, ng-view will load the template code for the page referenced by the url, this means when route changes, url will change and the content on the page will also change

Include the ngroute module in the application

In the HTML page include the javascript file to angular route

In config block inject route provider, config block runs only once, on application start up, perfect place to define the routes

Routeprovider says when root url hit, use the home controller and the template

The home template references the title and description

Refresh web page view home page hasn't changed

Add a smiley to the home template title

Refresh the web page view the real file is loaded

AngularJS provides two ways for defining routes, hash bang route as seen here or HTML5 route

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