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="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></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
D:\AngularJS\js\angular.min.js
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
D:\AngularJS\Hello.html
Steps to write Hello World Program in angularJS
<script>
var app = angular.module("myapp",[]);
</script>
//
<html ng-app="app">
<script>
var app = angular.module("myapp",[]);
app.controller("mycontroller",function($scope){
// Functionality will be kept here.
});
</script>
<body>
<div ng-controller="mycontroller">
</div>
</body>
<script>
var app = angular.module("myapp",[]);
app.controller("mycontroller",function($scope){
$scope.ngvariable = "Hello World !";
});
</script>
<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.