AngularJS Hello World First Program

Hello friends, Its very easy to code with AngularJS client side MVVM framework. With in 5 minute, you can write your first AngularJS Program. You needs to just first download or add online link for Angular.js file. You can add direct online reference as follows.

<!doctype html> <html ng-app="app">   <head>     <script src=""></script>   </head>   <body>   </body> </html>

You can also download Angular.js file by click AngularJS And add reference of doownladed file in html code.

Create New Folder with name AngularJS Under AngularJS Folder Create Folder js And move downloaded angular.min.js here in js Folder. angular.min.js location
Create HTML file using any editor. you can use notepad | notepad++ | Sublime Text | Visual Code | Visual Studio | Dreamweaver | Other.

<html ng-app="app">   <head>     <script src="js/angular.min.js"></script>   </head>   <body>   </body> </html>

Save file in main folder i.e. AngularJS naming Hello.html
Steps to write Hello World Program in angularJS

  1. Create Angular Module under javascript tags at the end of body tag. <script> var app = angular.module("myapp",[]); </script>
  2. Add myapp angular module to html tag. you can add on any other tag too. // <html ng-app="app">
  3. Create AngularJS Controller mycontroller with angularjs controller scope. <script> var app = angular.module("myapp",[]); app.controller("mycontroller",function($scope){ // Functionality will be kept here. }); </script>
  4. Add angularJS Controller in div tag, you can place it any where with in myapp module i.e. html tag. <body> <div ng-controller="mycontroller"> </div> </body>
  5. Create AngularJS scope variable and assign value. <script> var app = angular.module("myapp",[]); app.controller("mycontroller",function($scope){ $scope.ngvariable = "Hello World !"; }); </script>
  6. Displaying text generated by angularJS on web browser using angularJS one way binding {{}} i.e. Data will flow from controller to view. <body> <div ng-controller="mycontroller"> {{ngvariable}} </div> </body>

Now your final code will be as follows

<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/angular.min.js"></script> </head> <body ng-app="myapp" ng-controller="mycontroller"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="text-center"> <h1>{{ngvariable}}</h1> </div> </div> </div> </div> <script> var app = angular.module("myapp",[]); app.controller("mycontroller",function($scope){ $scope.ngvariable = "Hello World !"; }); </script> </body> </html>

finally open you hello.html file in any web browser, which will show Hello World!

To know more about Two-Way Binding in AngularJS Click Here

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.

Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.



Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply