Angular js getting started – To do app

Developing applications using Javascript is always a challenge.

Javascripts use for

  • UI manipulation
  • Client server interaction
  • business processing and validation

Libraries such as Jquery is doing great job of developing javascript applications. But these libraries lack any structural guidance. We are going to have large co debase which difficult to maintain.

We know to do some data binding we have to write several lines of codes. So it is difficult to maintain.

This is where architectural patterns such as Model View Controller (MVC) and frameworks such as AngularJS come into the picture.

Building to do app with Angular JS

I am going to create to do app in angularjs using Plunker.

  1. Reference angular js

capture

      2. Create angular app in script.js 

app

So we are creating a angular module . Modules in Angularjs are containers that hold various artifacts that we create or are part of the framework.

The first parameter is name of the module and second is there to provide module dependencies.

  3. define angular js application using ng-app directive 

ngapp

The ng-app directive tells Angular to treat everything defined inside the html tag as an angular app and process it accordingly. The app value of the ng-app attribute tells angular to search for a module named app and load it. in previous step we created a angular module named app. so it is loaded now.

So now our angular module linked with html view. So now we want a controller to create link between Model and View.

   4. Create controller 

ctrl

angular.module function creates a module and returns a module object. This module object has a function controller that allows us to register a controller. The first parameter is name of the controller and second is the controller implementation.

We have pass $scope object to controller function. Who is passing this $scope object. Angular Dependency Injection framework responsible for passing this object.

What is scope object?

The scope is the binding part between the HTML and the controller. It is available with properties and methods.. It is available for both view and controller.

Now we have to registered our Controller with view. So we use ng-controller attribute

 5. Link controller to the view 

registerctrl

So Now we are going to create our model and bind it View.

So our to app’s model should contains newTodo property.

So we add it to our controller

newtodo

we add it as property of scope object. So it is available on view. So when user enter new to do it shold be bind to newTodo variable. So how it is happen. We want to bind model to the input field.

we can do it using ng-model directive.

ngmodel

ng-model directive bind the value of html controls to application data.

Add required features to model

ctrlupdated

After entering value in text box then user press add button . Then AddToList function is fired. AddToList function is link to the view using ng-click directives. So when button is clicked AddToList is called. It will push new entry to List array.

viewhtml

I have used ng-repeat directive to show list of to do item in a list.

todoview

The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.

So we have created a part of to do app using angularjs. We want to improve it. More features should be added. I will continue it to another post.

Plunker code

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