Web application and MVC pattern:
The way the web applications are developed is changing over the time. Most of the changes were revolved around the how the various components in MVC (Model View Controller) pattern is distributed between the Client and Server.
To give a brief history, early pure thin client model revolves around having Model, View and Controller all placed in the server side generating complete HTML pages for all user interactions. The JSP, Struts is an example of this model.
With AJAX widely supported by popular browsers, the web applications slowly moved to more dynamic presentations, with Views components run within the client side and rest of the controller and model resides in the Server side.
With the advancement of tools and javascript libraries, notion of client side computation became very popular. In this the controller is moved to the client side and the server is used only to serve the data based on the client needs. Popular frameworks like GWT, EXTJS are based on this model
All the above design changes led to a very responsive web applications, as more and more logics were moved to client side, the complexity of client side programming increased. Angular JS is a framework lately introduced that uses the MVC pattern on the client side to solve the complexity elegantly.
AngularJS overview:
In recent years, developers are using JavaScript, jQuery, jqlite, etc., for client-side scripting. Ranging from validation to dynamic data manipulation, we need such scripting languages in order to provide rich user experience. Even though we are using jQuery for developing dynamic web applications, we have to manually update the DOM (Document Object Model) components.
By making the view to be dynamic we need to do some DOM manipulation manually in the script. In this case, the developer has to focus on building the functionality based on expected data at runtime. In jQuery, the DOM will update the data. But, in case of AngularJS the data will be updating the DOM. To make the application to be dynamic, building CRUD style application and immediately reflecting the changes in the DOM elements is done with ‘AngularJS’.
By using AngularJS we do not need to specify the event listeners, since they are built in features. Also we can create the single page application and it provides rich user interface and quick response to the user. Instead of the view to be hard coded, the developer can decide how the visual appearance and the content should be before architecting the design.
As a framework, it allows the browser to render the content from the model to the view immediately and vice versa.
Introduction:
It is an open source JavaScript framework released by Google in 2009. Over 97.9% of all websites are using AngularJS under Massachusetts Institute of Technology (MIT) license. We can work on small section of our page instead of controlling the whole page. It avoids boilerplate of code and uses much less code when compared to other languages, it separates the application logic and the DOM manipulation and inject the data directly into the view. It helps to create single page application without reloading the entire page.
How AngularJS works?
The browser will load all the DOM elements and it looks for AngularJS library contained in it. Once it is found, it looks for the directive called ‘ng-app’ to tell the AngularJS Compiler to compile the application and to manage the module of a HTML document. It connects to the server to load additional data for processing the directives and bindings. The ng-app determines the root element of an application from which the browser compiles it.
The above diagram shows the complete overview of AngularJS structure. Once the user requests a page, the browser will load all the DOM elements and constructs the Document tree. The browser will looks for the User interaction, then the changes will be reflected in the model and the controller will be taking care of applying the business logic to the scope element. It will bind the data dynamically to the view and compiles it. Once the changes occurred in the view, the controller will get the data in the form of $scope parameter and updates it with model.
Features of AngularJS
1. Directives 2. Data – binding 3. Filters 4. Event Handling 5. Services 6. Templates
Filters:
Filters are used for filtering the results of a given expression. They are used to transform the data before it is, rendered within directives and expressions in the module. It allows the developers to create their own custom filter and the search results will be populated based on the filter criteria. AngularJS provides the filter attribute to filter the results based on search text.
Let’s say we have an array of elements and we want to filter those elements ordered by name. We can simply use the OrderBy attribute within the tag.
For example
<input type=”text” ng-model=”query”/>
<div ng-repeat="item in items | orderBy:'id'| filter: query">
<span>{{item.id}}</span> | <span>{{item.name}}
</span>
Let’s see how the view should be rendered for the filtered results in Mobile View. In Salesforce we can use wrapper class for returning the data to the model. Before returning the data we should serialize the data using JSON.serialize() method.
E.g . $scope. data = {! dataitem};
Public class wrapperclass1 {
Public string Name;
Public Integer Age;
}
Public static string getdataitem()
{
List<sObject> val = [Select name,age__c from sObject];
for(sObject val:i)
//Iterate the sObject records and assign it to the instance of wrapper class
wrapperclass1 ins = new wrapperclass1();
ins.Name = i.name;
ins.Age = i.age__c;
return JSON.Serialize(ins);
}
It returns the Name, Age, Address, District and Pin code to the scope variable data. The data obtained from the controller will be of JSON format.
<input type=”text” ng-model=”query”/>
<div ng-repeat="i in data| filter: query">
<span>{{i.Name}} {{i.Age}}</span>
<p>{{i.Address}}{{i.District}}<p>
Below is the data obtained in the Mobile View and it shows the search results that dynamically changes based on the user preference keyed in the 'Search' filter without page reload .
Services:
To communicate with RESTful services and access the server side resource using http request and get response in the form of JSON, AngularJS provides some in-built services which will interact consistently.
It allows creating services simply by registering the service using factory method. Once the service is registered the compiler can reference it and load it as a dependency for run time use.
E.g.
app.factory(‘Servicename’,function($http){
return{ dataservice:function(callback)
{$http.get(“url that returns the json data”).success(callback);
}}
});
Directives:
AngularJS gives specific features to the DOM elements and assign some behavior to it. It provides some built-in directives such as ng-app, ng-model, ng-controller, ng-bind etc. ng-app specifies the root scope of an application ng-model specifies the binding of view to the model and vice versa ng-controller specifies the controller class were it gets the value in the form of scope and manage particular part of an application. An application can have many controllers. It is processed like MVC Framework.
Eg: <html ng-app=”modulename”> <body> <div ng-controller=”controllername”> <input type=”text” ng-model=”txtval”/> <p ng-bind=”txtval”/> //binding value </div> </body> </html>
Ng-bind determines binding the data to the view. Developers can create their own directives and can assign template to it. It is case insensitive like HTML.
Templates:
It is the static HTML page that contains the data from the controller and model. The user will see the dynamic view with dynamic data. It comes with routing where the user will be navigated but the changes occur in a single page.
Data binding:
It specifies the data to be bound into the view. Whenever there is a change in the view, changes are reflected into the model and vice versa. It allows us to populate the dynamic data easily from the model without having to manipulate the DOM elements. We can simply specify the double curly braces and inject the data.
E.g data.value or <div ng-bind=”data.value”/>
The above diagram shows the complete flow of data to be populated into the view. Consider we want to communicate with external server and get resource from it. So we have to send a request to the other side and get response from it. Here in AngularJS we can get the data externally using services and http request. First we have to register our service using factory method and make http call to the server and get response from it. Thereby we can pass the data to the controller where we get the data from the service method.
On the other hand we can also implement single page application using routing and templates .We have to call a method called $routeprovider and use ‘when’ for routing. In the above diagram it shows two controllers named as First controller and Welcome controller .Using $route provider we can access two attributes such as template url and controller.
Once the user navigates to the welcome page, it will looks for the template url and assign the controller appropriately. They will then be navigated to the welcome page without page refresh.
Similarly when the user navigates to the first page, they will be navigated to first page and get assigned by first controller where we return the data to the scope variable. The data is populated dynamically without page refresh thereby it produces single page application.
