Background
AngularJS is a client-side javascript framework developed by Google which can interact with HTML. It helps to easily create and maintain SPA (Single page applications)
Some of its features are -
- Helps create responsive applications
- Provides MVC capabilities
- Dependency injection
- Powerful and flexible with less code to write
AngularJS Hello World Example
Let's start by writing our HTML file. Create a folder where you can store your code files. Now in this folder create two files -
- helloWorld.html
- helloWorld.js
helloWorld.html:
<html>
<head>
<title>Hello World!</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body ng-app="helloWorldApp">
<div ng-controller="helloWorldAppController" ng-init="init()">
<p>Enter Message here : <input type="text" ng-model="message"></p>
<p>Entered Message : {{ message }}!</p>
</div>
</body>
</html>
helloWorld.js :
(function(){
'use strict';
console.log("In JS");
var helloWorldApp = angular.module("helloWorldApp", []);
helloWorldApp.controller("helloWorldAppController", function($scope) {
$scope.init = function() {
console.log("Init method called");
$scope.message = "Hello World!";
}
});
})();
Now you can simply open the helloWorld.html file and see the changes.
Understanding the code
Now that we saw the behavior let's try to understand the code.
In our code we have initialized a angular module using ng-app directive. In the javascript we get this module using andular.module() function. Inside a module you can have multiple controllers controlling various parts of your html. In our case we have defined a controller called helloWorldAppController that controls the div element we have defined. In the javascript we are getting this controller from our module.
Once you have the controller you can define varibles and functions that you can access in the HTML controller by this particular controller. You can also notice the variable called "message" that is defined in the controller is accessible in the HTML using {{message}} syntax. You would also see the binding exist using the ng-model syntax. This is called two way binding. So value changed in the input field is immediately visible in same HTML using {{message}} syntax as well as the controller using $scope.message. In the html where we have declared controller we have also specified init method using ng-init and you can see this menthod defined in controller using $scope.init. This is called when controller is initialized and this function in the controller script initialized messages variable to "Hello World!" that is reflected in HTML page.
Lastly we have injected our controller script (helloWorld.js ) and angular js script in the html for our angular js code to work. Make sure angular script is the 1st one added.
All keywords starting with ng- are angular directived.
- ng-app
- ng-controller
- ng-init
- ng-model
