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