Basics of AngularJS

This article introduces the basics of Angularjs. I collected the following information from various web resources and have attempted to explain them in an easy way.

• Angularjs is a JavaScript MVC framework created by Google to build properly architectured and maintainable web applications
• It decreases emphasis on directly handling DOM manipulation from the application logic
• It employs efficient two-way data binding and sensible MVC implementation
• We can create our own HTML custom tags and attributes
• We need to download the Angularjs from the following link.
  
  Angularjs
  
• Angularjs revolves around Model, View and Controller
• Using Angularjs we can eliminate the use of document.getelemetbyid('..') and so on.

Before proceeding I am assuming we are familair with the MVC framework.

To understand MVC we can go to the following:

ASP.NET MVC Overview

We will learn the following things in AngularJs:

1. Directives
2. Expressions
3. $scope object
4. Controllers
5. Model
6. Module
7. Filters
8. Data binding

The following is an explanation of the things listed above.

1. Directives

Directives can be used to create custom HTML tags that serve new, custom widgets. They can also be used to "decorate" elements with behavior and manipulate DOM attributes in interesting ways. HTML consists of static pages but we can now use extended HTML that provides dynamic features by adding attributes, element and comments.

We generally have directives starting with "ng-".

We need to add a directive to an existing HTML form using "np-app" as in the following:

<html ng-app>

We have the following directives:

• ng-app
  
  This will activate the AngularJS to the entire document
  
  We need to add to a HTML form like this: <html ng-app>
  
• ng-model
  
  This links the model and the form. This means that any changes to the control update the data in our model and when we update the model it updates the control. We can define the model as in the following:
  
  <input ng-model="modeltest">
  
• ng-controllers
  
  In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope as in the following:
  
  <div ng-controller="modeltest">
  
  Here we need to define the controller with the name "modeltest" in a separate JavaScript file. Other directives are the following:
  
• ng-click
• ng-repeat
• ng-view
• ng-bind
  
  We have various ways to define a directive and all of the following have the same meaning:
  
• <input ng-model="modeltest">
• <input data-ng:model=" modeltest ">
• <input ng:model=" modeltest ">
• <input ng_model=" modeltest ">

2. Expressions

• The {{ }} are a declarative way of specifying a data binding location in HTML. AngularJS will automatically update this text.
• Using an expression we can do data binding, as in {{ }}.

Expression example

Output of the above HTML

The following output will be will be rendered in the DOM:

1+2=3

3. Let's start with a sample example.

HTML file

1. ng-model: is a model directive that can be bi-directional. Here the model name is the uservalue
2. {{ uservalue }} : {{ }} are expressions in Angularjs and the uservalue inside the {{ }} is to be displayed on the HTML form.
3. The following is the output of the HTML code above.

HTML output

4. Angular Module

An Angular module is simply a collection of functions defined in a JavaScript file.

How to define a module in angularjs:

1. First create sample.js
2. Inside the sample.js file we need to add the following line:
   
   var app = angular.module('myApp', []);
   
   This line creates the Angular module named "myApp".
   
3. We need to define this module in our DOM, the module name is "myApp"
4. <html ng-app="myApp">