Introduction
This article contains demonstration to create a simple hello world application using 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 angularjs library, donwload 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 wheneever you want.
Now create a folder and save it with Name 'HelloWord', save it wheneever you want. In this folder create a .js file and name it 'index.js'. In this .js file we are going to create 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
- 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"
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>
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 opning tag we have taken reference of angularjs library file and index.js file and in title openig an closing tag we can see code '{{title}}', it is angularjs expression for displaying content of title model. It is one way model binding in 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
Kailash Chandra Behera
ReplyDeleteYou are providing a post that is very useful for developing my knowledge and I learn more info from your blog.
Angularjs Training in OMR
Angularjs Training in T Nagar
RPA Training in T nagar
Software testing training in Tambaram
Dot Net Training in Velachery
Web Designing Course in T Nagar
Spoken English Classes in Velachery
German Classes in chennai
SEO Training in OMR
AWS Training in Velachery
Your blog is a valuable resource for beginners looking to get started with AngularJS, and your clear writing style and attention to detail make it a great learning tool. Keep up the good work!
ReplyDeleteThe Ultimate Data Analytics Training Course- Hands-On Learning and Real-World Applications