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.

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:

2. Expressions

Expression example

AngularJs Expression
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. <html ng-app>
  2. <head>
  3. <script src="script/angular.min.js"></script>
  4. </head>
  5. <body>
  6. <div>
  7. <input type="text" ng-model="uservalue" placeholder="enter text here">
  8. <h1>
  9. Hello, {{ uservalue }}</h1>
  10. </div>
  11. </body>
  12. </html>
From the code above we can try to understand the following terms:
  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
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">

5. Controllers


In Angular, a Controller is a JavaScript constructor function that augments the Angular Scope.

We have code below in the table, the left column contains HTML code and the right column contains Sample.js. Here we are defining MyUserController in Sample.js. We can define a controller in HTML form using the "ng-controller" directive.

HTML file
  1. <html ng-app>
  2. <head>
  3. <script src="angular.min.js"></script>
  4. <script src="sample.js"></script>
  5. </head>
  6. <body>
  7. <div ng-controller="MyUserController">
  8. Your name:
  9. <input type="text" ng-model="name">
  10. <button ng-click='sayHello()'>
  11. greet</button>
  12. <hr>
  13. {{greeting}}
  14. </div>
  15. </body>
  16. </html>
Sample.js
  1. function MyUserController ($scope) {
  2. $scope.name = 'World';
  3. $scope.sayHello = function() {
  4. $scope.greeting = 'Hello ' + $scope.name + '!';
  5. };
  6. }
Here, in the example above, MyUserController is a function defined in sample.js and this function has an input parameters $scope. First we will learn about $ scope and then try to understand the example above.

6. $scope object

scope object

7. Returning to point 5

The following is the screen that will be rendered on the DOM.

DOM

The following is the description of the example above:

  1. From the left column we are getting "World" in the text box, only due to the $scope binding done by the controller $scope.name = 'World' of the controller and ng-model="name" of the DOM.
    (This is what we can say one way binding)
  2. From the right column, here I typed in some text and then clicked on the greet button and I get "Hello World....Binding test!" by the DOM. It is due to declaring {{ greeting }} by the DOM (it is an expression) and the $scope.greeting = 'Hello ' + $scope.name + '!' at MyUserController function.
  3. Here we have two-way binding using $scope.name and ng-model="name" defined in the DOM and the Controller as well. We got a default value in the text box when the DOM is loaded and are getting the updated value of username when we click on the button.

8. Filters in Angular


Filters allow formatting the data to be displayed on the DOM. Filters are invoked in the HTML with the | (pipe) character inside expressions {{ }}.

Few examples

Filter

Filter with Expression

Output at DOM
Currency {{ 123 | currency }} $123.00
Currency {{ 456 | currency:'USD $' }} USD $456.00
Date {{ today | date:'MMM d, y' }} Nov 20, 2013
Number {{ 1234567890 | number }} 1,234,567,890
Uppercase {{ "csharp" | uppercase }} CSHARP
String {{ ['Ari', 'Likes', 'To'] | filter:'e' }} Likes

References