Post
Ask Question

Introduction to AngularJS

This article provides a simple hands-on application for AngularJS. First let us get a small explanation of AngularJS before proceeding and implementing it.

What is AngularJS

AngularJS is an open-source web application framework maintained by Google that was released in 2009 and written in JavaScript. It extends HTML attributes with directives and binds data to HTML with expressions.

The link to AngularJS distribution file is:

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 

Why to use AngularJS

The following are some of the reasons to use AngularJS:

  • Angular acts as the mediator, developers also won't feel tempted to write shortcuts between components that break abstractions just to make them fit easier.
  • Directives come in the form of custom HTML elements.
  • Filters are so resourceful that it is possible to create a sortable HTML table using only filters without writing any JavaScript.
  • Write less code.

Let's proceed and create a HTML home page as in the following:

  1. <!DOCTYPE html>  
  2.   
  3. <!-- define angular app -->  
  4. <html ng-app="MyApp">  
  5.   
  6. <head>  
  7.   <!-- SCROLLS -->  
  8.   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />  
  9.   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />  
  10.   
  11.   <!-- SPELLS -->  
  12.   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>  
  13.   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>  
  14.   <script src="script.js"></script>  
  15. </head>  
  16.   
  17. <!-- define angular controller -->  
  18. <body ng-controller="mainController">  
  19.   
  20.   <nav class="navbar navbar-default">  
  21.     <div class="container">  
  22.       <div class="navbar-header">  
  23.         <a class="navbar-brand" href="/">Angular Routing Example</a>  
  24.       </div>  
  25.   
  26.       <ul class="nav navbar-nav navbar-right">  
  27.         <li><a href="#"><i class="fa fa-home"></i> Home</a></li>  
  28.         <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>  
  29.         <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>  
  30.       </ul>  
  31.     </div>  
  32.   </nav>  
  33.   
  34.   <div id="main">  
  35.         <!-- this is where content will be injected -->  
  36.     <div ng-view></div>  
  37.       
  38.   </div>  
  39. </body>  
  40.   
  41. </html> 

In the preceding Index page, we created static HTML where we are referring to JavaScript libraries and finally a main div for injecting the HTML of the other views.

The following is the code of the JavaScript file where we will do the routing of the application to redirect to the corresponding pages:

  1. // create the module and name it MyApp  
  2.     var MyApp = angular.module(' MyApp ', ['ngRoute']);  
  3.   
  4.     // configure our routes  
  5.     MyApp.config(function($routeProvider) {  
  6.         $routeProvider  
  7.   
  8.             // route for the home page  
  9.             .when('/', {  
  10.                 templateUrl : 'pages/home.html',  
  11.                 controller  : 'mainController'  
  12.             })  
  13.   
  14.             // route for the about page  
  15.             .when('/about', {  
  16.                 templateUrl : 'pages/about.html',  
  17.                 controller  : 'aboutController'  
  18.             })  
  19.   
  20.             // route for the contact page  
  21.             .when('/contact', {  
  22.                 templateUrl : 'pages/contact.html',  
  23.                 controller  : 'contactController'  
  24.             });  
  25.     }); 

The following is the code where we can inject the code for the controller:

  1. // create the controller and inject Angular's $scope  
  2.     MyApp.controller('mainController', function($scope) {  
  3.         // create a message to display in our view  
  4.         $scope.message = 'Hello Everyone ! I am in Home page !';  
  5.     });  
  6.   
  7.     MyApp.controller('aboutController', function($scope) {  
  8.         $scope.message = 'Hello Everyone ! I am in About page !';  
  9.     });  
  10.   
  11.     MyApp.controller('contactController', function($scope) {  
  12.         $scope.message = 'Hello Everyone ! I am in Contact page !';  
  13.     }); 

I hope you liked the article. Please write your comments and views on this.


Similar Articles