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]
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
- Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
I found it very helpful. However the differences are not too understandable for me