Tuesday, 27 February 2018

AngularJS Hello World Example

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 -
  1. Helps create responsive applications
  2. Provides MVC capabilities
  3. Dependency injection
  4. Powerful and flexible with less code to write
NOTE: AngularJS is a very old framework. The first version is called AngularJS. Later versions are just called angular. You can see the detailed release history - https://github.com/angular/angular.js/releases. This post will try to explain a simple Hello World program in Angular JS. This is mainly for projects that are already on it. If you are starting a new project I would highly recommend to go with later angular versions. You can visit https://angular.io/  for the same.


 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 -
  1. helloWorld.html
  2. helloWorld.js
And add following content to it -

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 

No comments:

Post a Comment

t> UA-39527780-1 back to top