Using AngularJS and ASP.NET MVC to create a Hello World Application

57.4k C# .Net : How to convert strin

40.7k How to set favicon in Asp.net

40.6k Sending WhatsApp Message in .N

39.4k ASP.NET MVC: How to Check Sess

34.5k Convert file to Byte array in

17.7k Open Android App from Web Brow

prev 1 2 3 … 131 next

Using AngularJS and ASP.NET MVC to create a Hello World Application

@vikram.kashyap

Follow Recommendations Offline Message

over 8 years ago
- 0
- 0
  Positive Vote
- 0
  Negative Vote
- 0
  Save Favourite
- 0
- 0
- 2
- 0
- 642
Comment on it
In this article we will learn to create a simple Hello World application using AngularJS framework and ASP.NET MVC.

AngularJS : Introduction

AngularJS is JavaScript framework used for creating single page web applications and is maintained by Google. AngularJS augments existing HTML by adding new HTML constructs like extending HTML attributes with directives. It also supports MVW architecture and provides a host of features to develop web applications. AngularJS is open source and used by developers around the world.

AngularJS : Hello World Example

Let us now create a sample Hello World application by following the below steps:

1) Using Visual Studio create an empty ASP.NET MVC application and name it HelloWorldAngularJS. The newly created project will have folders for Model,View and Controller.

2) Right click on the Controller folder and add new controller named "Home".

3) Inside HomeController create a new ActionResult with name HelloWorldPage.

4) Right click on HelloWorldPage ActionResult and add a new view. To this new view , add the ng-app directive. The ng-app directive lets AngularJS know that the element related with it is the root element of application.

5) Add below code to HelloWorldPage.cshtml where ng-app is associated to html tag
```
<!DOCTYPE html>
<html ng-app>
<head>
    <title ng-bind="HelloWorldAngular"></title>
</head>
<body>
    
    <input type="text" ng-model="HelloWorldAngular" />
    <h1>{{HelloWorldAngular}}</h1>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</body>
</html>
```
Since we have added ng-app to html tag ,anything which uses {{}} will be manipulate by AngularJS. Also note that the above code has a reference to AngularJS hosted on Google CDN which enables you to use AngularJS framework and its features. Running the above application will give the below result in browser:

The above is a very basic AngularJS application, let's now create a more enhanced Hello World Application using the below steps:

1) First we need to include AngularJS JavaScript file into the HTML document. We will use it by using the CDN url as below:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>

</body>
</html>
```
2) Now we will create an angular module and define a Controller. AngularJS controllers are JavaScript objects that control the data of AngularJS applications. We will now add the below code to a separate JavaScript file.
```
var app = angular.module("app", []);
app.controller("HelloWorldController", function($scope) {
  $scope.message = "Hello, World";	
});
```
In the above piece of code , we have called the module() function of angular global variable and pass it the module name "app". Using the module we call the controller() to define our first HelloWorldController.

3) Next we use a directive called ng-controller to use the controller on page.We attach our controller to the DOM using the ng-controller directive.
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="resources/js/angular.js"></script>
<script type="text/javascript" src="resources/js/script.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="HelloWorldController">
		<h2>{{message}}</h2>
	</div>
</body>
</html>
```
In the above code we are using $scope. Scope is a JavaScript object which is used to join controller with the views. Scope contains the model data. In the above example we attached a single property named message and having a string value(Hello , World). Running the above application will give the below result in browser:

Hope the above article helps in understanding the basics of AngularJS. Happy Coding.
Tags
AngularJS
Comment on it