Getting started with Angular JS

Why Angular JS?

Angular JS is an MVC framework that defines numerous concepts to properly organize your web application. It is created by Google to build properly architectured and maintainable web applications. It enhances HTML and encapsulates the behavior of your application in controllers which are instantiated due to dependency injection. Now let’s have a closer look at all those features.

 

Expressions

Angular JS contains several concepts to separate the different parts of your application. In order to create the views of your application, Angular JS let you execute expressions directly within your HTML pages. In those expressions, you have access to Javascript code which gives you the ability to realize some computation to display what you want.

image

 

Directives

Directives allow you to extend HTML and specify how your page should be structured for the data available in a given scope. The first directive is ‘ngRepeat’. This directive let Angular JS create a new set of elements in the DOM for each element in a collection. In the following example, we ask Angular JS to create a new div containing a small title and a paragraph for each element of the array. Each of these elements will be affected by a variable named user which let us access the individual elements of the array.

image

Angular JS also lets you determine if an element should be displayed or not with the directive ‘ngShow’. This directive uses an expression which returns a boolean to determine if the element should be displayed or not.

image

Angular JS also contains more complex directives like ‘ngSwitch’.

image
Data Binding

Angular allows you to the ability to define the binding between the data in your scope and the content of your views. You could also use operations in those expressions {{object.operation}}.

image

 

Filters

Angular JS provides filter mechanism. You can see how we can put the name in upper case with {{user.name | uppercase}} as follows:

image

 

Modules

In Angular JS, applications are structured in modules. A module can depend on other modules and a module can contain controllers, services, directives and filters.

image

The empty array, visible above, is where you declare the modules needed by your module. You can configure some services thanks to the operation ‘config’. Angular JS helps you to separate your application in small, easily testable, components.

 

Dependency Injection

The operation ‘config’ is using dependency injection in order to retrieve some elements of the application that should be configured when the module was loaded. Here, we will use the service provider “$routeProvider”. You can pass a function to the operation with the parameters named after the elements you want to retrieve.

image

If you want to use a more robust solution, you should use an array with the name of the elements that you want to see injected and a function naming those elements.

image

 

Routes

Using the route provider, we can configure the routes available in our application. For our example, we will create two routes, one for the users ‘/users’ and for any other routes, a redirection page.

image

You can see that, if we go to the url ‘http://domain/#/users’, Angular JS will load the partial view ‘views/users.html’ and use the controller ‘UsersCtrl’. For any other url, the error view will be used instead.

 

Controllers

The controller is where the behavior of your a

pplication is located. Controllers are used to populate the scope with all the necessary data for the view. Controllers communicate with the view using a specific service named ‘$scope’. This service let the controller give objects and functions to the views that can later be manipulated with the expressions and directives.

image

 

Scope

The scope is used to link the controllers and the views to which they are binded. A controller can add data and function in its scope and then they will be accessible in the view.

image

 

Hope this will be enough to get you started on Angular JS.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s