AngularJS Hello World Code Example

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

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com