Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Getting Started with AngularJS

, 9 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
One of the cool things i recently started learning was AngularJS. It is a JavaScript framework for building client side JavaScript applications which follows the Model-View-Controller pattern and ensures that your application is property architectured, easy to maintain and test. Some of the great fe

One of the cool things i recently started learning was AngularJS. It is a JavaScript framework for building client side JavaScript applications which follows the Model-View-Controller pattern and ensures that your application is property architectured, easy to maintain and test. Some of the great features that it offers include two way data binding, client side templates, directives, routing, promises, dependency injection etc. All these features helps to reduce the complexity of the web application. If you have previous experience using Jquery, you will immediately notice how you can manipulate the DOM easily without writing any JavaScript code.

In this tutorial, we will start by developing a simple application using Angular which will highlight some of the key features of the framework.

You can create an Angular application by simple using a text editor and downloading Angular from the official site. However, in this example i will be using Visual Studio for the same. But it is not a necessity, you can simple use any text editor that you like.

Open Visual Studio 2013 and create a new ASP.Net application. From the templates, select the “Empty” option.

We will use Nuget to add AngularJS into our project. Right click the solution and select “Manage Nuget packages”. Search for “AngularJS” and from the result, select the AngularJS Core as shown below.

Add a new Html page to your project and call it Index.html. There are two basic requirements for using Angular in your application.

1) Add the following to your html page

<script src="scripts/angular.js"></script>

This is the only file that you need to get all the core Angular features.

2) The “ng-app” directive.

Directives are one of the core components of Angular and they are used to extend the capabilities of HTML. The “ng-app” is the application directive and it is a special directive that Angular looks for in the application. if it finds it, Angular will initialize itself and start managing the page. Angular will only take care of the DOM sections where the directive is applied. We will add it to the <html> element so that it applies to the whole page

<html ng-app>

Lets add a simple binding expression to check whether Angular is working properly. Out html will look as shown below

<html ng-app> 
<head>
    <script src="scripts/angular.js"></script> 
    <title></title> 
</head> 
<body>
    <h3>Hi Angular</h3> 
The result of 10 + 2 is   {{ 10 + 2}} 
</body> 
</html>

The {{ 10 + 2 }} that we use is a Binding expression. Angular looks for these in our pages and evaluates the expression inside them. On running the page, you will see the following output.

If you remove the ng-app attribute, angular will not work and it will behave like a normal page.

Data Binding

To demonstrate simple data binding, lets add a simple input tag to our page as shown below

<div> 
    <input type="text" placeholder="Enter Name" ng-model="name" /> 
    {{name}} 
</div>

The ng-model=”name” directive creates a two way data binding between the value of the textbox and the “name” model variable within the scope of the application. Run the application and as you type something into the textbox, it will be immediately displayed in the page thanks to data binding.

Now that we have some basic directives and data binding, lets create something more meaningful. We will create a simple applications that will display the List of books user has read or is yet to read.

Add a new JavaScript file to the application and call it “controller.js”. Also add “Bootstrap” to the project via nuget.

Here is how our index.html code will look like

<html ng-app> 
<head> 
    <script src="scripts/angular.js"></script> 
    <script src="scripts/controller.js"></script> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
    <title></title> 
</head> 
<body> 
    <div ng-controller="MainController"> 
        <div> 
            <h1>{{readingList.Name}}'s Reading List</h1> 
        </div> 
        <br /> 
        <div> 
            <table class="table table-bordered table-condensed" > 
                <thead> 
                    <tr> 
                        <th>Title</th> 
                        <th>IsComplete</th> 
                        <th></th> 
                    </tr> 
                </thead> 
                <tbody> 
                    <tr ng-repeat="book in readingList.Books"> 
                        <td>{{book.Title}}</td> 
                        <td>{{book.isComplete}}</td> 
                        <td><input type="checkbox" ng-model="book.isComplete" /></td> 
                    </tr> 
                </tbody> 
            </table> 
        </div> 
    </div> 
</body> 
</html>

In our <div> we use the ng-controller directive to specify a controller. The controller controls the information that is displayed in a page. Controllers are functions that angular invokes. The ng-controller=”MainController” tells Angular to look for a MainController function that will manage the contents of the div. We can have multiple controllers inside our app and we can also nest controllers inside one another.

We define our MainController function inside the Controller.js file. The code will look as shown below

var MainController = function ($scope) {

    var model = { 
        Name: "Madhur Kapoor", 
        Books: [{ Title: "The Hunger Games", isComplete: false }, 
                { Title: "The Alchemist", isComplete: true }, 
                { Title: "Angel & Demons", isComplete: false }, 
                { Title: "Da Vinci Code", isComplete: true }, 
                { Title: "The Godfather", isComplete: false } 
        ] 
    };

    $scope.readingList = model;

};

The name of the function should be the same as that defined in the ng-controller attribute. That is how angular identifies which function to associate with the directive. In the function, we are defining a model that contains the name along with a list of books. Our controller function takes an argument “$scope” which is quite important. The “$” sign specifies that it is actually an Angular component. The “$scope” is what will act a glue between our view and the model. We can attach our model to the “$scope” and it will be available within the scope of the controller inside the view. All the functions and variables inside the controller will be included within the $scope.

The following code {{readingList.Name}}’s Reading List” reads the Name property from the model and displays it using a binding expression.

In the below code

<tr ng-repeat="book in readingList.Books"> 
                        <td>{{book.Title}}</td> 
                        <td>{{book.isComplete}}</td> 
                        <td><input type="checkbox" ng-model="book.isComplete" /></td> 
                    </tr>

we use the “ng-repeat” directive which instructs Angular to repeat the <tr> for each book in the Books model. In the table, i have also used a checkbox whose model property is set to “book.isComplete”. Run the app and you will the see the output as shown below.

You can check/uncheck the checkbox and see how the value of isComplete changes dynamically thanks to two way data binding.

We can also change the way the data is displayed on the page using “Filters”. To demonstrate we will add a new Textbox to the page

<input type="text" ng-model="titleFilter" placeholder="Enter Title to filter" />

We will modify the “ng-repeat” as shown below

<tr ng-repeat="book in readingList.Books | filter:titleFilter">

This will tell Angular to apply a filter to the list which will be driven by what is typed in our textbox. Filters are added using the pipe “|” symbol. We can also make the title uppercase using a filter {{book.Title | uppercase}}” filter. There are different types of filter available and you can also create your own filter. Run the application and as you type in the textbox, the result of the list will be filtered.

We can also attach functions to our buttons and other elements using the ng-click” directive. We will add a textbox and a button to enable the user to add a book

<div> 
    <input type="text" ng-model="newTitle" placeholder="Enter Title To Add" required > 
    <input type="button" ng-click="addBook()" value="Add" class="btn" /> 
</div>

Using the “ng-click” directive, we are binding the click event to call the “addBook()” function defined in the controller as shown below.

$scope.addBook = function () { 
    model.Books.push({ Title: $scope.newTitle, isComplete: false }); 
    $scope.newTitle = ''; 
}; 

You can see we can get the value of the textbox using the $scope.newTitle” as the model is part of the scope.

Run the application, type some title in the Textbox and click “Add”. The title that you added will be immediately added to the list.

I think this example gives you a fair idea of what can be done using Angular. In my next post, i will discuss and demonstrate some more features.

Download Solution

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Madhur Kapoor
Software Developer (Senior) Infosys
India India
Madhur is Senior Software Engineer by profession having around 3+ yrs of experience in IT industry working on Microsoft Technologies. Apart from Microsoft Technologies, he also likes to work on Mobile Development in Android and Windows 8.
 
His Technical expertise include C#, ASP.Net, WCF, MVC, Linq, Javascript
 
Apart from coding, he like to play Xbox Games, strum guitar or read books.
 
My Blog : http://www.codingparadox.com

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberrumilal16-Jul-14 10:11 
Questioni have question for angular two way binding PinmemberTridip Bhattacharjee11-Jul-14 5:42 
AnswerRe: i have question for angular two way binding PinmemberNaveen Garla11-Jul-14 11:16 
GeneralRe: i have question for angular two way binding PinmemberTridip Bhattacharjee14-Jul-14 2:49 
QuestionNot working from VS2013 [modified] PinmemberNaveen Garla10-Jul-14 13:26 
AnswerRe: Not working from VS2013 PinmemberNaveen Garla10-Jul-14 13:32 
GeneralRe: Not working from VS2013 PinmemberMadhur Kapoor10-Jul-14 20:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411019.1 | Last Updated 9 Jul 2014
Article Copyright 2014 by Madhur Kapoor
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid