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


Module.run 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