Tuesday, July 28, 2015

Inject Angular Service to Controller

In AngularJS Dependency Injection is achieved by injecting objects to the controller, in normal implementations we use the $scope object in the controller to set values and pass it to the view for display.

In the following example we shall create a service and inject the service to the controller, this way all the data used in the controller are fed from the service, the service can be changes or pass different service objects to test the controller and the view.

Dependency Injection in Angular?

In AngularJS dependency injection is achieved by injecting objects to the controller, in normal implementations we use the $scope object in the controller to set values and pass it to the view for display. The following is an example of normal controller implementation without using Dependency injection.

What is Dependency Injection?

Dependency Injection is a software design pattern which is used to improve testability of applications. Dependency Injection loosely couples the various components of the application thereby improve testability of the various components independently.

If the objects to be used in a class are initialized locally in the class, then it creates a dependency and makes the objects tightly bound to the class. The below class is an example without using Dependency Injection, notice that the objEmpRepository object is initialized within the class, hence it is tightly bound to the class.

Saturday, July 25, 2015

AngularJS Ajax Overview

AngularJS $http.delete Ajax calls

In the post AngularJS Ajax using $http we saw that we can perform Ajax calls to the server in AngularJS using $http service, and we saw that $http supports Get, Post, Put and Delete operations. In this post we shall see on how to make a $http.delete Ajax call in AngularJS

The following example shows how to make a $http.delete call to an Asp.Net Web API Controller method.

AngularJS $http.post Ajax calls

In the post AngularJS Ajax using $http we saw that we can perform Ajax calls to the server in AngularJS using $http service, and we saw that $http supports Get, Post, Put and Delete operations. In this post we shall see on how to make a $http.post Ajax call in AngularJS

The following example shows how to make a $http.post call to an Asp.Net Web API Controller method.

AngularJS $http.get Ajax calls

In the post AngularJS Ajax using $http we saw that we can perform Ajax calls to the server in AngularJS using $http service, and we saw that $http supports Get, Post, Put and Delete operations. In this post we shall see on how to make a $http.get Ajax call in AngularJS

The following example shows how to make a $http.get call to an Asp.Net Web API Controller method.

$http vs JSONP for cross-site request

In the previous posts we saw on how to make Ajax requests using $http and JSONP, we also saw that $http does not support cross-site server requests, and JSONP supports it. In this post we shall see an example of making cross-site service requests using $http and JSONP and observer the responses in both the cases.

The following example makes the same Ajax calls using JSONP and $http, let us observe the response from both the requests.

Monday, July 20, 2015

How JSONP enables cross-site request

In the previous post AngularJS Ajax using$http JSONP we saw on using JSONP to make cross-site requests, i.e the AnjularJS client and the service/API are located in different domains, by default browsers do not allow cross-site Ajax requests.

JSONP stands for JSON with padding, JSONP enables cross-site requests using the <script> tag, normal $http requests are sends server request URL as plain text, hence browsers reject the requests made to different domains, JSONP pads the requests within <script> tags and sends it to the server, browsers do not enforce same-origin validation for content in the <script> tag hence JSONP requests by-pass the validations and thereby enable us to make cross-site requests from the client to the server.

AngularJS Ajax using $http JSONP

In the previous post AngularJS Ajax using $http, we saw on how to make Ajax calls in AngularJS using $http, we also saw that we cannot make cross site calls using the $http service, but in practical situations we might have to call services/APIs deployed in a different server/domain, example could be making service / API calls to 3rd part services which are deployed in the Vendor’s server.

To overcome this, the $http service supports making Ajax calls using JSONP, the normal Ajax calls made using $http use the XMLHttpRequest object which does not support cross site referencing, however we can modify the request a bit to make JSONP calls to support cross domain.

The syntax for making JSONP Ajax calls using $http is as follows

AngularJS Ajax using $http

In the previous post Ajax using AngularJS, we saw on what Ajax is and its need in modern web development tools, in this post we shall see on Ajax is supported in AngularJS using the $http service.


$http is an important service in AngularJS which helps in making Ajax calls to the server, $http takes the service URL to be invoked as a parameter, makes calls to the server gets the response and service and passes it back to Angular

The syntax for making Ajax calls using $http is as follows

Ajax using AngularJS

Ajax stands for Asynchronous JavaScript and XML, as the name suggests Ajax is used for asynchronous operations between the client and the server. Here by client we refer to the AngularJS layer and by server we refer to the API Server/Service.

Thursday, July 16, 2015

AngularJS MVVM Pattern Overview

Implement ViewModel Pattern using AngularJS

In the previous posts we saw in detail about MVVM pattern and its support in AngularJS


In this post we shall see a practical implementation of MVVM pattern in AngularJS, we will have an Asp.Net Web API service activing as the model (Server Side) and 2 different views in AngularJS consuming the same model, each view will have its own ViewModel ($scope and controller) and display the data from the same model (Asp.Net Web API) in different formats.

Model-View-ViewModel Pattern in AngularJS

In the previous post What is Model-View-ViewModel Pattern? we have seen in detail on the MVVM pattern its architecture and its use, in this post we shall see on how to implement MVVM pattern using AngularJS.

AngularJS implements its own client side MVC pattern, this makes it so flexible to adopt to the MVVM pattern, the objective of MVVM pattern is to provide a ViewModel which binds with the view thereby isolating the binding between the View and the Model layers, this approach supports having multiple views for the same model.

What is Model-View-ViewModel Pattern?

MVVM (Model-View-ViewModel) pattern is an extension of the MVC pattern, the MVVM pattern adds another layer called ViewModel which is a model representation more in sync with the view, the controls in the view are bound to the properties in the ViewModel and any event which is raised from the View are handled by commands in the view model.

The properties in the ViewModel are bound to the view objects, any changes made to the properties in the ViewModel will get automatically reflected in the View.

The View layer is totally isolated from the Model, the ViewModel interacts with the model and transforms the model objects in such a way that is binds with the view.

Thursday, July 9, 2015

MVC using AngularJS Overview

AngularJS Controllers

In the post What is MVC Architecture? We saw the various layers of MVC architecture and we saw that that model is the representation of data in the MVC architecture. In this post we shall see more in detail about controllers in AngularJS MVC architecture

Controllers are the main components in the MVC architecture which controls the data and event flow in the application. Defining a controller is done in 2 parts, first we need to create a JavaScript controller function which accepts $scope as parameter, remember $scope is the representation of model in AngularJS MVC framework, next we need to reference the controller function in the view using the ng-controller directive. Once this is done any property/data defined in in the $scope in the controller function is made available in the view layer.

The below example defines a controller function nameController sets properties FName & LName to $scope in the controller function, the controller is tied to the view using ng-controller and the properties FName & LName are bound to the controls in the view.

AngularJS Views

In the post What is MVC Architecture? we saw the various layers of MVC architecture and we saw that that model is the representation of data in the MVC architecture. In this post we shall see more in detail about views in AngularJS MVC architecture.

In a simple application the HTML page is the view layer, data from the model object is bound to the view layer using ding directives and functions from the controller, AngularJS also supports single page applications which can support multiple views, in these cases we will just have a single HTML page which can display multiple views dynamically, this is made possible using the ng-view and ng-template directives.

The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.

Below is the syntax for using ng-view directive.

AngularJS Models

In the previous post What is MVC Architecture? we saw the various layers of MVC architecture and we saw that that model is the representation of data in the MVC architecture. In this post we shall see more in detail about models in AngularJS MVC architecture.

In AngularJS MVC architecture the $scope object represents the model, the $scope is accessible in both the controller and view and is used to bind data between controller and the view, AngularJS supports two-way data binding, this makes sure that any changes in the model object properties are reflected in the view and any change made by the user in the view layer gets reflected in the model ($scope) automatically.

The below example demonstrated the use of $scope object to bind between the model and the view.


What is MVC Architecture?


MVC – Model View Controller
is an architecture used commonly for web application development, the MVC architecture is supported by server side web development frameworks like Asp.Net, Java etc. AngularJS extends the MVC architecture to client side java script based applications.

As the name suggests the MVC framework consists the following 3 parts components

Wednesday, July 8, 2015

AngularJS Built-in Services Overview

$sce service in AngularJS

sce stands for Strict Contextual Escaping, and is used in places where we need to explicitly need to mark certain content as safe and display them in the view. One common example is parsing and rendering HTML content in the view.

The ng-bind-html directive is used in places where we need to parse HTML content and render the output instead of just displaying the HTML tags in the view, by default any value bound to this directive will be passed through $sanitize to validate and clean so that no unsafe inputs are rendered to the view, this validation process might filter out some of the HTML tags from the source which are deemed to be un-safe. The $sce can be used to skip the validation process and render the content as it is in the view. $sce.trustAsHtml instructs Angular that the content is valid and can skip the validation done by $sanitize, this makes sure that the full HTML is parsed and rendered as output in the View.

The following example uses $sce.trustAsHtml to display HTML content to the view using ng-bind-html directive.

$window in AngularJS

$window provides a shortcut to access the browsers window object’s in AngularJS, using $window we can access the properties and events of the browser’s window object.

The following is the syntax to access $window property using AngularJS
$window.<windows property/event>

The following example shows how to get the browser window’s  width and height properties using $window

Tuesday, July 7, 2015

$document service in AngularJS

$document service provides a shortcut to access document properties in AngularJS, however this is not a direct reference to the document object, it is a reference to jQuery document property collection. The properties of the collection can be accessed using prop.

The following is the syntax to access document property collection using AngularJS
$document.prop( "<document property to access>" )

The following example shows how to access the page title of the page using $document

$routeProvider service in AngularJS

The $routeProvider service plays an important role in enabling MVC framework in AngularJS, the $routeProvider allows us to define various routes and the view template to be bound to each of the route, additionally it also allows us to define the controller to be associated with each of the route/view. This way each of the embedded templates will be fully functional with each one having its own controller.

In the following example we shall see on how to implement Routing in AngularJS using $routeProvider

$resource service in AngularJS

The $resource service is a factory built on top of the $http service, $resource make is easy for us to perform CRUD operations calls to the service side APIs, it is not part of the main angular.js file, to use it we need to include the angular-resource.js file.

$resource works with a Restful API service at the server end, it supports GET, POST, PUT and DELETE operations. It is recommended that we wrap the API calls to the server in a factory while using $resource.

The following example shows how to make a HTTP Get API call using $resource and populate the view with the response from the API call.

$http service in AngularJS

$http is an important service in AngularJS which helps in making Ajax calls to the server, $http takes the service URL to be invoked as a parameter, makes calls to the server gets the response and service and passes it back to Angular

The syntax for making Ajax calls using $http is as follows

$http.get('serviceURL').
  success(function(data, status, headers, config) {
          // Process response for Success here
  }).
  error(function(data, status, headers, config) {
          // Process response for Failure here
  });

$http supports Get, Post and Delete operations, all these take the service URL as parameters, the Post variant in addition takes the Post data which is to be submitted to the service.

The following example shows how to make an API call using $http and display the results in the view using ng-repeat directive.

Monday, July 6, 2015

$rootScope service in AngularJS

$rootScope is the global scope which acts as the parent for all the controllers $scope, values set in one controller’s $scope can be accessed in other controllers $scope across the application.

The following example defines 2 controllers, the 1st controller sets value for the variable rootValue and the 2nd controller accesses the value from the rootScope and displays it in the view.

$scope service in AngularJS

$scope is the most commonly used built-in service in AngularJS, $scope acts as the model object, it glues the controller with the view, $scope holds the objects/properties. $scope enables 2-way binding between the view and the model, properties of $scope can be set in the controller and bound to the object, any changes made in the view will get automatically reflected in the $scope.

The below example demonstrated the use of $scope object to bind between the model and the view.

What are Built-in services in AngularJS?

Services in AngularJS are singleton functions/objects which can be used across the application, there are a set of build-in services which Angular provides which can be used for various functionalities, and apart from the pre-defined we can also define custom services and use them across the application.

The following are some of the commonly used built-in services in AngularJS

Thursday, July 2, 2015

AngularJS Filters Overview

Invoke AngularJS Custom Filters from JavaScript

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. In the previous posts we have seen on how to create and invoke custom filters from the view, in this post we shall see on how to create custom filters and invoke them from the controller functions in JavaScript.

AngularJS Custom Filters

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. In the previous posts we have seen some of the key pre-defined filters, we can also create our own custom filter and use them as appropriate. In this post we shall see on how to create and use a custom filter.

Custom filters can be defined by configuring them in the application module, we will have to define a filter function, the function implementation should script the expected functionality from the filter.

The following is an example of a simple custom filter which prefix the word ‘Hello’ to any text which is annotated with the custom filter.

AngularJS limitTo Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The limitTo filter is used to control the number of items that are displayed in an ng-repeat directive. The model array/collection which feeds can have any number of items, but the limitTo filter can control the number of items displayed in the view.

The following is the syntax for using limitTo filter
<li ng-repeat="<array/collection> | limitTo:<number of items to limit>">

The following is an example of using limitTo filter.

Wednesday, July 1, 2015

AngularJS number Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The number filter is used to format numbers in the view

The following is the syntax for using number filter
{{ <value/property> | number:<# decimal places> }}

The following is an example of using number filter.

AngularJS JSON Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The JSON filter is used to format JSON data in the view

The following is the syntax for using json filter
{{ <string > | json }}

The following is an example of using json filter.

AngularJS uppercase Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The case filters are used to format cast strings between Upper/Lower cases.

The following is the syntax for using uppercase filters
{{<string/variable> | uppercase}}

The following is an example of using uppercase filter.