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",[]);
app.controller("hwcontroller",function($scope){
});
Scope
- The scope is the binding part between the HTML (view) and the JavaScript (controller).
- The scope is an object with the available properties and methods.
- The scope is available for both the view and the controller.
$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