Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Using AngularJS and ASP.NET MVC to create a Hello World Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 643
    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:

     

    Hello World

     


    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:

     

    Hello World

     

     

    Hope the above article helps  in understanding the basics of AngularJS. Happy Coding.

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: