Introduction to Angular JS

What is Angular JS?
*Structural framework for building dynamic web apps. Because HTML is a declarative language for static document by nature, Angular use HTML as the template language and allows extension of HTML’s syntax to deliver dynamic web app. Extending HTML syntax is achieve by:

  1. Creating new HTML constructs call directives. Examples include:
  • Data binding;
  • Support for forms and form validation;
  • Grouping of HTML into reusable components.

2. Using **Library and *Framework

 **Library – A collection of AngularJS functions which are useful when writing web apps.
*Framework – A particular implementation of a web application, where your code fills in the details. More details about Angular JS framework later here

For more information about what is Angular JS, visit https://docs.angularjs.org/guide/introduction

 

What Angular JS is Trying to Solve?
When building large applications with tools like jQuery, what kind of problems does AngularJS aim to help solve?

Problem: Lets say you have a HTML, CSS and JavaScript files in your project solutions. As you add more logic into your JavaScript, the complexity grows. Thus Developer spends a lot of time updating the DOM to manipulate how HTML will visually look. A lot of management!

*DOM – (Document Object Memory) HTML representation that seats inside the global memory cache of the browser.

Solutions: Angular solves this by doing update to one side, e.g. HTML, then JS gets updated automatically or vice versa.


What Framework does Angular JS Use?
Lets recap what existing frameworks are used in other technologies:

  1. .NET uses MVC (Model, View, Controller) framework- Architecture pattern that divides app development into 3 layers.
  • Model – Supply data & business logic e.g. classes, services
  • View – What the end-users sees. Look and feel
  • Controller – Coordinates between model & view

2. KnockOut uses

3. AngularJS does not use neither MVC, but MV* (Model, View, Whatever) framework

  • Model – e.g. Var firstname = ‘Dave’
  • View – e.g. <h1>hello world</h1>

Model and View are bound between each other. So whatever happens to model affects view and vice versa. What binds them together are controller (.net) but AngularJS don’t care what it’s called. Whatever it is. So in reality its MV*

 

HTML Aside
HTML has attributes that the browser knows about, and knows what to do with. However AngularJS take advantage of adding custom attributes, and store whatever information we desire in the HTML. The custom attribute AngularJS uses the prefix ng. Example:

“<h1 ng-xxx=”test”>hello world</h1>”

where xxx – Any variable name you desire (whatever) and Angular doesn’t care what its call

 

Global Namespace
AngularJS uses Global Namespace – Global variable that is store in global memory (DOM) and can be re-used anywhere in the program.

var person = “David” //Declared globally in top of memory
console.log(person);

The problem with global namespace is if another JavaScript file-b (JS-b) had its own global variable with the SAME variable name “Person” as another JavaScript file-a (JS-a), then the value of that global variable in JS-b will be overwritten with the value of the other global variable in JS-a (known as populating global namespace)

So the goal of AngularJS is to prevent populating global namespace, by storing variables in object rather than in global memory.

 

Dependency Injection
AngularJS uses Dependency Injection – Rather than creating on object inside a function, you pass the object into the function.

Disadvantage of creating an object inside a function is that if you need to change the functionality, you have to change the object inside the code BAD! Coz function is dependent on how the object is created inside the function.

Advantage of Dependency injection – Function is no longer dependent on how object is created, because you are passing/injecting the object into the function.
function logPersonNameDJ(person)

    console.log(person);
} //this function is no longer dependent on variable person coz object is passed in as input parameter. //Object person is maintain outside function

var contactperson = new PersonName(‘Sue’, ‘Blog’);
logPersonNameDJ(contactperson);

 

Minification
Shrinking the file size of JS files for faster download and improve performance of web app (Removes spaces/carriage returns and use low memory size variables). Add ‘-min’ to name of file. File.js becomes file-min.js. Best practice is to compress JavaScript file using online JS compressor like http://jscompress.com/

Problem
After minifying AngularJS code, you will get an injector error! Cause by Minify engine replacing function name parameters (break dependency) as AngularJS expects to look list of parameters as a strings into function

Solution
Use JavaScript arrays and pass in quoted string variables into the array

myApp.controller(‘mainController’, [‘$scope’, ‘$log’, function($scope, $log) {
   
    $log.info($scope);
   
}]);

 

Interpolation
AngularJS uses interpolation, which means creating a string by combining strings and placeholders e.g. “My name is ” + firstName is interpolated and results in “My name is Dave”

 

Power slide Presentation
See the Power slide below for more details

Sample code
To download sample code for AngularJS lab, click here. This download code also contains SharePoint project hosted app solution that demonstrates how AngularJS is used to retrieve and display a SharePoint list onto an application page.

NOTE: If you want to deploy the SharePoint solution demo to SharePoint online (Office 365), then some pre-requisite are required:

  1.  Install SP Online Management Tool –  https://www.microsoft.com/en-us/download/details.aspx?id=35588
  2.  Enable App Side Loading feature

 

References:

Advertisements