- UI manipulation
- Client server interaction
- business processing and validation
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.
- Reference angular js
2. Create angular app in script.js
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
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
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
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
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.
ng-model directive bind the value of html controls to application data.
Add required features to model
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.
I have used ng-repeat directive to show list of to do item in a list.
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.