AngularJS basic concepts and getting started

21/02/2016

תגיות: , , ,
אין תגובות
Today I will be talking about AngularJS, what it is and what is it good for. I will cover the basics for create a simple web application with AngularJS and in later posts we will grow together in order to build better and better applications. Before we start building anything, we should go over some basic concepts.

What is Angular?

AngularJS is an open source web application framework maintained by Google engineers and by the community. It allows the developer to build and maintain S.P.A. (Single Page Applications) easily. It provides the MVC (Model-View-Controller) architecture, thus allowing the application to be testable easily.

The AngularJS framework gives the developer a complete solution for many of the challenges he encounter during its work, starting from binding, templating, dependency validation, form management, localization, and much more. Using AngularJS framework the developer can have an almost end-to-end work process in his project.

I will talk about some of the features of Angular via code samples, and for this I will first show how start building an Angular web app.

The basics

You can download the Angular.js file from the home site of Angular at the address of https://angularjs.org/. You can also configure your site to use a CDN service in order to download the Angular.js file to the web client. The Angular CDN officially can be found at the Google CDN service here.

Let us start by opening our favorite code editor. Web applications can be written easily with nothing special needed, just by using a simple text editor. I will use notepad++ for simplicity.

Create an index.html file and add the following code:

There are 4 things to give out attention in this app.

All Angular application start with a declaration where the app begins. This is done using the ng-app directive. The ng-app directive signs the Angular script where the root of the application is, so there can be only one ng-app directive per html page.

The script tag I entered above shows I decided to use the google CDN network in order to get the script. There are several CDN services around the internet, and since this is the official CDN for Angular I will use this with all my samples.

Data Binding

The Angular framework allows two-way data binding, thus allowing to set the foundations for an MVC application in the web project on the client side. Building this using only JavaScript would be much harder done.

The code above shows how easy it can be done using one directive and one usage. The ng-model directive tells Angular to set up a new two-way binding between the view and the model. The view is of course the index.html file, and the model as we named it is “myModel”.

Once we run this application we can see the magic of the binding simply by starting to type in the input text and seeing the text automatically typed below it as well. So in this example we see how the view updates the model on the scope. This is also valid the other way around from the model to the view, thus the title two-way binding.

Scope (The model)

The scope is an object that refers to the application model. When we used the directive ng-model above in our code sample, we registered “myModel” object in the scope allowing it to be translated as an expression in the view and to propagate events (which is the binding) from and to the model. So the scope is what connects the view and the model.

Module

The Angular application is usually linked under one module. The module holds together the different parts of the application such as controllers, services, filter, other modules, etc. We can bundle reusable code under a module for use in other modules and app. Some of the higher level configuration which is related to all controller under the same module, will be done at the module level, thus making it easier to understand.

Controllers

So we know about the view (our html page) and we know about the model (the scope). But what is the controller? The controller is the brains of the party. It is used for business logic for setting up and updating the scope. The controller is where we address services for getting data to our application.

Unlike the ng-app directive, the controllers can be nested, and each controller has a scope of its own. This means that the scopes are also nested, allowing them to inherit data from their parents.

Before we continue with some more concepts from the Angular world, let us see an example that connects everything we talked about till now. I will write all Angular code in a script tag but of course it should be extracted to a separate file.

I`ll first talk about what is inside the script tag holding the Angular script.

On the first line we define the module that will hold all relevant features to our app. In this module we only have now a controller, but we can load it with services, filters, etc. I named our module “mainModuleName” but you can gives it any name you want. I always recommend it to be a clear name that explains what this module is all about. In the creation of the module we have a place-holder in the form of square braces. These square braces allow to inject dependencies to our application like external modules, or modules we created on our own. Once we created the module, I saved it in a local variable but, you can fetch simply by calling the module function without the dependencies place-holder like this: angular.module(“mainModuleName”).
This will bring you the module instance just like the variable I used.

On the second line I`ve defined a controller and gave it the name “mainControllerName”. Same as above, you can name it as you like with recommendation to give it a meaningful name.

The second argument of the controller definition is an array of arguments. The first parameter in the array is the controller`s scope. I will explain later why it is written like this.
The second parameter in the array is a function that accepts the scope object, starting with a dollar sign (‘$’). This dollar sign lets us know that this is an Angular module. When we create our own modules we will address them without the dollar sign.

Inside the controller I`ve added two line, both relate to the scope. In these lines I`m creating properties, one named “ApplicationHeader” and one named “ApplicationData”, these are just properties I`ve created right now and named them likes this so it will be clear what they are for. This is just like regular JavaScript object building. These properties can be arrays, objects, simple variables, anything you need for your app. I placed inside them simple text.

In the previous code sample I just used ng-app directive in order to tell the Angular framework where the root application starts. Now I`ve advised the Angular framework that this application root relates to our module by giving the ng-app directive a value with the name our module “mainModuleName”.

I also need to connect it to our controller by using the ng-controller directive and giving it the value of the name of our controller “mainControllerName”. There can be several controllers, even nested, in our page.

Last, I approached the scope in order to set the values I entered earlier, inside DOM elements.

Conclusion

In this post I`ve talked about what AngularJS framework really is and why is it good for. I`ve titled the main most easily used features of the framework, mostly its two-way binding feature. I`ve demonstrated two very basic apps using Angular showing just how very little code is needed to make our app works.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *