Creating an AngularJS Application

Kailash Chandra Behera | Saturday, January 21, 2017

Introduction

This article demonstrates the step by step process to create a simple hello world application in angularjs.

Getting Started

This demonstration displays 'HelloWorld text as content text of web page, heading text, and sets title of page using angularjs. To create angular application we need angularjs library, angularjs module, angularjs controller, angularjs model and a html file.

For angular library, download AngularJS library from this link http://angularjs.org. Click the Download link on the main page and ensure that the Stable and Uncompressed options are checked, you can select an unstable (prerelease) version, get a minified version, or use a content distribution network (CDN), but for this book, I am going to use a local copy of the uncompressed library. Save the file as angular.js whenever you want.

Now create a folder and save it with Name 'HelloWorld', save it whenever you want. In this folder create a .js file and name it 'index.js'. In this .js file, we are going to create the AngularJS module, controller and model.
Fore creating angularjs model add below code into .js file.

 var app=angular.module("hellowapp",[]);
In above code angular.module function helps to create module in application, this function takes two parameter first is name of module and second is an array which contains multiple dependent module name. Now we will create angularjs controller. fore creating add below code into .js file below the module creating line.
 app.controller("hwcontroller",function($scope){  
 });
This code registers controller in module, the first parameter is name of controller and the second is a function which takes scope of html page as parameter, the scope contains models lets disccuss little about scope.

Scope

  1. The scope is the binding part between the HTML (view) and the JavaScript (controller).
  2. The scope is an object with the available properties and methods.
  3. The scope is available for both the view and the controller.
Add the below code inside the controller function in .js file fore adding models into scope
 $scope.title="My First Angular App";  
 $scope.header="Learning Angularjs";  
 $scope.content="My First Hello world app in Angularjs"

Declaring scope in AngularJS

Finally we will create a html file for display data, create a file with extension '.html' in same folder with name'index' and same it. we will keep the downloaded angularjs library in this folder too, we have created.
 <!DOCTYPE html>  
 <HTML ng-app="hellowapp" ng-controller="hwcontroller" >  
 <script src="angular.min.js"></script>  
 <script src="index.js"></script>  
 <TITLE> {{title}}</TITLE>  
 <BODY border="1">  
 <h1>{{header}}</h1>  
 <hr/>  
 {{content}}  
 </BODY>  
 </HTML>

HTML code for AngularJS hellow world application

Replace above HTML code in html file. you can see in html opning tag, there is a attribute called ',ng-app' with value 'hellowapp'. using this attribute we are telling browser that this html file is owner if angularjs. Remember we have created module with name 'hellowapp', that means we are calling angularjs module here ang controller with help of ng-controller directive and using {{header}},{{content}} expression code i am showing headin and content.

Below this HTML opening tag we have taken the reference of AngularJS library file and index.js file and in title opening a closing tag we can see code '{{title}}', it is AngularJSexpression for displaying content of title model. It is a way model binding in the AngularJS library.

Save the html file again and open in browser and see the result, you can run it in any browser because angularjs support all type of browser. if you would have done properly the demonstration, sure you will get the result like below image.

Summary

In this article we have demonstrated how to create a simple helloworld application using AngularJS, Hope this article may help you.

Thanks

By at