Understand AngularJS - future of web development

Saturday, October 4, 2014

Reference bootstrap from cdn in head section of the web page

Add a reference to jquery from cdn and the javascript file app.js

Type in this html, a couple of buttons and a couple of panels with information about each of the steps

View the page in the browser

Click step one, the panel with data shows

Click step two, the panel with data shows

View jquery code: two panels are hidden, on click event one panel is shown and other one is hidden, notice that the id's of elements are required to grab a handle on them. Imagine there are 20 steps or complex logic involved. The problem with jquery is spend alot of time updating the document object model

Add an html header to the empty bootstrap framework

Add a style attribute to the element

Refresh browser, view font size of element is thirty pixels, because the guys who wrote the browser implemented this feature from the html specifications

However this custom attribute has no effect on the rendering in the browser, since the browser does not know what to do with it

Write out the value of the attribute in the heading to the console

Refresh browser, open developer tools f12, view the output

HTML5 has the data dash attribute, put whatever you want after data dash, this is considered valid HTML

Angular puts ng dash, it has many custom attributes that can be used, angular uses the fact that the browser memory is available for attributes, angularjs allows data dash ng dash as well for HTML5 compliance

Reference angular javascript file from the cdn in the head section

Declare a variable that references the angular module, function that takes in the name of the app and an array of dependencies, notice there is only one object in the global namespace

With the ng-app directive connect the html to the javascript model

Declare a controller, takes a name and a function

Define a view using the ng-controller directive

In the model pass in the scope and define a property with a value on it, this is example of dependency injection, rather than creating an object inside a function, it is passed to the function

In the view bind to the property using an angular expression, double curly braces

Refresh browser and view the result

Create a person object as a function, remember everything in javascript is a function, create a logperson function, inside create a new person mick, log to the console, then invoke the function

Refresh browser, view log in developer window

Function logperson is dependent on variable mick, something changes inside mick, it would have to be changed inside the function

Create person object and pass it to the function, this is dependency injection, avoids high coupling, the dependency is injected into the function

Refresh browser, view same result in console window

Pass in scope object into controller function, this is an example of baked in dependeny injection in this framework, set properties and function on scope, log it to the console

Refresh web page, open developer window, view the properties on the scope, function is also there

Data bind to the variables and function declared on scope object in controller using double curly braces

Refresh browser view port, view the data displayed on the web page

Pass in the built in log service into the controller function and log it to the console

View in developer window, that it has a debug, error, info, log, warn method on it that can be used in the angular application

Using the log service log a message to the console window

View the message in the developer window

The different log methods in use

Refresh, view the different logs

Pass in the filter service into controller function, again dependency injection in action, filter service can format strings, uppercase in this case then log intial value and formatted value to the console

Refresh web page, in developer window view the string, also in uppercase

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