AngularJS Hello World Code Example

0

The article presents hello world code sample for AngularJS javascript framework.

Following are important aspects to note while you are going through the Hello World demo and the code samples listed below.

  • Directives ng-app, ng-controller, ng-model
  • Template with double curly braces

 

Step 1: Include Angular Javascript within <Head> Section

Include following code within <head></head> to include Angularjs javascript file. Get the latest code such as below from Google hosted libraries page.

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

 

Step 2: Apply ng-app directive to <Html> element

Apply ng-app directive to <html> element such as following. Giving name of the app is optional. It could be written as simple as <html ng-app>. This directive is used to flag the html element that Angular should consider to be the root element of our application. This gives application developers the freedom to tell Angular if the entire html page or only a portion of it should be treated as the Angular application.

<html ng-app="helloApp">

 

Step 3: Apply ng-controller directive to <Body> element

Apply ng-controller in body element. The controller directive can, however, be applied to any element such as div.  In the code below, “HelloCtrl” is the name of the controller and is referred in the controller script written within <script></script> within <head> element.

<body ng-controller="HelloCtrl">

 

Step 4: Apply ng-model directive with Input element

Bind the input with the model using ng-model directive.

<input type="text" name="name" ng-model="name"/>

 

Step 5: Write the template code

Following is the template code displaying the model value for model with name as “name”. Pay attention that model with name as “name” is bounded with input in step 4.

Hello {{name}}! How are you doing today?

 

Step 6: Create controller code within <Script>

Create the controller code such as following within script element. In the code below, “helloApp” is the name of the module which is defined with ng-app directive within <html> element. The next line shows the code to create a controller with name as “HelloCtrl” which is the name defined with ng-controller directive within <body> element. The controller “HelloCtrl” is registered with the module, “helloApp”. The last line displays the model associated with the $scope object.

<script>
    var helloApp = angular.module("helloApp", []);
    helloApp.controller("HelloCtrl", function($scope) {
    $scope.name = "Calvin Hobbes";
    });
</script>
The full source code (for copy & paste & run!) could be found on this page.

[adsenseyu1]

Ajitesh Kumar

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, C/C++, mobile programming languages etc, and, computing fundamentals related with cloud-native technologies, application security, cloud computing platforms, mobile apps, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.