Wednesday, September 2, 2015

AngularJS Dependency Injection Overview

Inject Controller to Application

In AngularJS Dependency Injection is achieved by injecting objects to the controller, also we can create different controller objects and inject them to the application. 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 controller and inject the controller to the application, this way all the data used in the application are fed from the injected controller, the injected controller can be changes or pass different controller objects to test the view.

Inject Angular Factory 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 factory and inject the factory to the controller, this way all the data used in the controller are fed from the factory, the factory can be changes or pass different factory objects to test the controller and the view.

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.

Tuesday, June 30, 2015

Dynamic filter using AngularJS filter

In the post AngularJS filter, we saw on how to use filters to define a static filter in an array of elements, we can further enhance this by binding the filter text to a textbox control to create a dynamic filter.

In the following example a ng-repeat directive is used to display a list of employees, txtSearch is a textbox which is bound as the filter condition for the list, now as the user types some text in the textbox, the list will get filtered based on the text entered.

AngularJS filter

AngularJS filter, is a special type of filter which can be used to filter out the contents of an array/collection bound to an ng-repeat directive, this comes in handy when we need to implement dynamic search/filtering capability on an array/collection of elements

The following is the syntax for using AngularJS filter
ng-repeat="<array/collection> | filter:<filter text>"

The following is an example of using filter, filter out specific elements from an array of objects.

AngularJS date 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 date filter is used to format date values.

The following is the syntax for using date filters
{{ <date variable> | date: '<date format>' }}

The following is an example of using date filters.

Monday, June 29, 2015

AngularJS orderby 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 orderby filter is used to sort a list of elements in an array / collection, this comes in handy when we want to implement sorting feature in a table/list in the view.

The following is the syntax for using orderby filters
<li ng-repeat="<collection> | orderBy:'<column>'">

The following is an example of using orderby filters.

AngularJS currency 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 currency filter is used to format currency format display in the view

The following is the syntax for using currency filters
{{ 
<variable> | currency }}

The following is an example of using currency filters.

What are AngularJS Filters?

Filters in AngularJS are used to format/modify/transform the data displayed in the view, filters are used with expressions and directives like ng-bind, ng-repeat etc which are used to display model data in the view.  Filters are come in handy and can help us reduce lot of string manipulation when used in the right places.

Filters are prefixed by a | symbol, after the model object/variable, the following is the syntax to use filters with expressions.

Saturday, June 27, 2015

AngularJS Expressions Overview

AngularJS Expressions using Arrays

In the previous posts we saw AngularJS expressions with string, numbers and Objects, in this post we shall see on how to use AngularJS expressions involving arrays.

AngularJS Expressions using String and Numbers


AngularJS Expressions using Objects


This comes in handy when we want to display a list of values, especially while using MVC pattern if we want to display a list/table of values we can get them in an array and use the array in ng-repeat to iterate through each element in the array.

In the following example we shall see on how to use arrays and display the content of the arrays using expressions in the view.

Friday, June 26, 2015

AngularJS Expressions using Objects

In the post AngularJS Expressions using String and Numbers, we saw on how to use simple string and numbers in expressions, we can also create complex objects and use them in expressions, this becomes more handy when we want to implement MVC pattern using AngularJS, we can define model objects and use them in the View layer to display model object properties.

The following example shows how to use Objects in Expressions

AngularJS Expressions using String and Numbers

Expressions in AngularJS can operate on different types of variables / model properties, the evaluation of expressions vary based on the type of variable / property on which the expressions is evaluated.

For example an expression with 2 numbers and a + operator adds the values of the 2 numbers while evaluating the expressions. The same + operator when used with 2 string will do a string concatenation.

The following example shows how to use expressions with numbers and strings

What are AngularJS Expressions?

Expressions in AngularJS are a quick way to add dynamic content from the model objects / variables to the HTML view, expressions can evaluate multiple variables / model properties using operators and display the evaluated result in the view.

Expressions are a short form of ng-bind, they provide the ability to do one-way data binding between the model and the view.

Expressions are enclosed within a couple of flower braces in the HTML view. Following is the Syntax for Expressions

Thursday, June 25, 2015

AngularJS Binding Overview

Binding model object to Dropdown list

In the post ng-bind directive we saw on how to bind values to simple textbox elements, in this example we shall see on how to bind a list of values to a drop down control.

ng-non-bindable directive

The ng-non-bindable directive is used to remove binding for a specific portion of the page, the div/panel which is marked with this directive will not bind any values from the model.
The following example shows the usage of ng-non-bindable directive

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'" ng-non-bindable>
                   Your Name is: {{Name}}
          </div>
</body>
</html>

Output without the ng-non-bindable directive in the div tag


Output with the ng-non-bindable directive in the div tag


ng-bind-template directive

The ng-bind-template directive is similar to the ng-bind directive, the ng-bind directive supports binding for only one variable / property from the model, while the ng-bind-template directive can bind more than one model variable / property in a single template.

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind-template achieves the same in addition supports binding multiple value at once.

The below example shows a simple implementation of ng-bind-template to achieve one way data binding between the model and the view using multiple values.

Wednesday, June 24, 2015

Two way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests two-way data binding is bidirectional, the data from the model is bound to the view and any changes made in the view are reflected back in the model. The ng-model directive enables two-way data binding

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'">
                   Enter Name: <input type="text" ng-model="Name"><br/><br/>
                   Your Name is :{{Name}}
          </div>
</body>
</html>

Output



When the user changes the text in the text box, it automatically reflects in the label.


One way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests one-way data binding is unidirectional the data from the model is bound to the view and not vice versa. The ng-bind directive enables one-way data binding

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind directive is similar to using expressions {{ expression }} in AngularJS.

The below example shows a simple implementation of ng-bind to achieve one way data binding between the model and the view.

Role of $scope in Data Binding

The $scope object is the default model object provided by AngularJS, the $scope acts as the model between the controller and the view layers.

The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

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

What is Data Binding in AngularJS?

Data binding is the feature by which the data from the model is bound to the View in an MVC (Model View Controller) representation, the Controller controls the way the model is bound to the view. AngularJS supports MVC pattern and allows binding model data to the view layer.

AngularJS Service Overview

Tuesday, June 23, 2015

AngularJS Service vs Factory

Form a normal usage perspective both the Service and Factory provide the same functionality, both Service and Factory are Singleton, however there are few differences between the two, let us see on how they differ.

When we invoke a service it returns an instance (object representation) of the function, which is more like initializing the object with new and returning the instance.

When we invoke a factory it returns a class representation of the function, the calling Function/Controller can initiate the response (new). Following is the Syntax for Service and Factory

AngularJS Factory

The Factory implementation in AngularJS is similar to Service, the difference is that factory allows us to define our own objects and return them to the calling controller through the factory methods.

The following example shows how to define and use a factory services in AngularJS

AngularJS Service

AngularJS services can be considered as re-usable utility classes / functions which are defined once and can be accessed anywhere in the application. Services enable modular and re-usability while designing complex applications in AngularJS.

The following example shows how to define and use a service in AngularJS

Tuesday, June 16, 2015

Types of AngularJS Services

As we saw in the previous posts AngularJS services are singleton objects / functions which are defined once and re-used throughout the application.

AngularJS provides a pre-defined set of services which we can reference in our controller and use the methods in the services, the pre-defined services are always pre-fixed with a $ symbol.  $http, $window, $routeProvider etc are some of the pre-defined services provided by AngularJS.

AngularJS also allows us to define our own services and use them in the controllers and views, we can create the following 3 types of custom services in AngularJS

AngularJS pre-defined services

AngularJS provides a set of pre-defined services, which can be used in any controller by referencing the services. All predefined services are pre-fixed with a $ symbol.

$http, $window, $routeProvider etc are some of the pre-defined services provided by AngularJS. To use these services in a controller we should refer to them while defining the controller, in the following controller example we shall use the $scope and $http service.

Advantages of AngularJS Services

AngularJS Services are re-usable unit for code/functions which can use used across the application, the following are the advantages of using services.

What are AngularJS Services?

AngularJS services can be considered as re-usable utility classes / functions which are defined once and can be accessed anywhere in the application. Services enable modular and re-usability while designing complex applications in AngularJS.

While designing complex AngularJS applications, re-usable code which can be used in more than one view/controller should be placed in the services this way we can avoid redundancy of the same code across different controllers and views.

Services are singleton objects or methods which perform a unit of task.

In the following posts we shall see in details about the advantages and types of services provided by AngularJS.

Tuesday, May 26, 2015

AngularJS Routing Overview

$routeProvider with Static HTML template content

In the previous post Defining routes using$routeProvider we saw on how to use the $routeProvider to define routes and assign each route to a .html page, this works when the views are complex and has more content, but if the views are simple we need not have separate .html pages to define the views instead we can embed the static HTML content for the view in the $routeProvider configuration itself.

In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.

Defining routes using $routeProvider

In the previous post Routing in AngularJS we saw the benefits of routing in AngularJS, here we shall see an example of implementing Routing using AngularJS.

Main HTML Page with ng-view

The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.

Routing in AngularJS

Routing in AngularJS enables embedding different html views to the main page based on the URL requested by the user. Routing in AngularJS behaves similar to Routing in Asp.Net MVC, AngularJS allows us to define the various routes possible and the templates to be loaded for each of the routes. At runtime based on the URL request from the end user the appropriate template is embedded in the main page.

Embedding templates in the main page is enabled used in the ng-view directive, the templates are embedded in the main page in the location where the ng-view directive tag is placed.

<ng-view></ng-view>

In the controller, the $routeProvider object is used define the various routes and the templates to be associated with each of the routes. The object also allows us to define the controller to be associated with each of the view templates. This way each of the embedded templates will be fully functional with each one having its own controller. This comes in handy when we want to develop complex Single Page Applications.

Friday, May 22, 2015

AngularJS Events Overview

ng-dblclick event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the dblclick event using AngularJS

AngularJS provides ng-dblclick directive to handle mouse dblclick events raised by the user, dblclick event can be handled by associating the ng-dblclick directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-dblclick directive to handle dblclick events raised by the user.

ng-click event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the click event using AngularJS

AngularJS provides ng-click directive to handle mouse click events raised by the user, click event can be handled by associating the ng-click directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-click directive to handle click events raised by the user.

Sunday, April 26, 2015

ng-mouseover event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the mouseover event using AngularJS

AngularJS provides ng-mouseover directive to handle mouse down events raised by the user, mouseover event can be handled by associating the ng-mouseover directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mouseover directive to handle mouseover events raised by the user.

ng-mousemove event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mousemove, mouseover etc, in this post we shall see on how to handle the mousemove event using AngularJS

AngularJS provides ng-mousemove directive to handle mouse down events raised by the user, mousemove event can be handled by associating the ng-mousemove directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mousemove directive to handle mousemove events raised by the user.

ng-mouseleave event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseleave, mouseover etc, in this post we shall see on how to handle the mouseleave event using AngularJS

AngularJS provides ng-mouseleave directive to handle mouse down events raised by the user, mouseleave event can be handled by associating the ng-mouseleave directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mouseleave directive to handle mouseleave events raised by the user.

ng-mouseenter event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseenter, mouseover etc, in this post we shall see on how to handle the mouseenter event using AngularJS

AngularJS provides ng-mouseenter directive to handle mouse down events raised by the user, mouseenter event can be handled by associating the ng-mouseenter directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mouseenter directive to handle mouseenter events raised by the user.

Wednesday, April 1, 2015

ng-mouseup event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseup, mouseover etc, in this post we shall see on how to handle the mouseup event using AngularJS

AngularJS provides ng-mouseup directive to handle mouse down events raised by the user, mouseup event can be handled by associating the ng-mouseup directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mouseup directive to handle mouseup events raised by the user.

ng-mousedown event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mouseup, mousedown, mouseover etc, in this post we shall see on how to handle the mousedown event using AngularJS

AngularJS provides ng-mousedown directive to handle mouse down events raised by the user, mousedown event can be handled by associating the ng-mousedown directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mousedown directive to handle mousedown events raised by the user.

AngularJS Mouse Events

AngularJS provides a set of events to handle user interactions in the UI layer, AngularJS events can be broadly classified into the following 3 categories.

Change Events – To handle triggered from controls like TextBox, Dropdown, checkbox etc.
Keyboard Events – To handle events triggered by user typing keys in the keyboard.
Mouse Events – To handle mouse events like mouse_up, mouse_down, etc

In this post we shall see on the various possible mouse events provided by AngularJS.

Sunday, March 29, 2015

ng-keypress event

AngularJS provides various keyboard events to track events raised by user interaction with the keyboard like Keypress, Keypress, KeyPress etc, in this post we shall see on how to handle the keypress event using AngularJS

AngularJS provides ng-keypress directive to handle keypress events raised by the user, keypress event can be handled by associating the ng-keypress directive to an event handler function which passes the key event as a parameter.

The following example shows on how to use the ng-keypress directive to handle keypress events raised by the user.