This article shows a hello world code example implemented by the AngularJS framework.
The following are some aspects that you need to focus on when looking at the Hello World example and the following code examples.
Step 1: Include Angular Javascript
in the sectionInclude the following code into
to import the Angularjs javascript file. You can use the following writing method to get the latest code from the Google-managed library.<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
Step 2: Apply the ng-app directive to the element
Apply the ng-app directive to the element as follows. Optionally give the app a name. It can be simply written as . This directive is used to mark that Angular will recognize it as our The html element of the root element of the application. This gives application developers the freedom to tell Angular that the entire html page, or just a portion of it, should be treated as an Angular application.
<html ng-app="helloApp">
Step 3: Apply the ng-controller directive to the element
Apply the ng-controller directive to the
element. The controller directive can be applied to any element, such as a div. In the code below, "HelloCtrl" is the name of the controller and can be referenced by the controller code placed in the <script></script> element.<body ng-controller="HelloCtrl">
Step 4: Apply the ng-model directive to the input element
You can use the ng-model directive to bind the input to the model.
<input type="text" name="name" ng-model="name"/>
Step 5: Write template code
The following is the template code that displays the model values of the model named "name". Note that the model named "name" is bound to the input in step 4.
Hello {{name}}! How are you doing today?
Step 6: Create controller code in
Create the controller code in the script element as shown below. In the code below, "helloApp" is the name of the module defined using the ng-app directive in the element. The next line of code shows Create a controller with the name "HelloCtrl" defined using the ng-controller directive in the
element. The controller "HelloCtrl" is registered with this module - "helloApp". The last line of code shows the model being linked to $scope Objects are related<script> var helloApp = angular.module("helloApp", []); helloApp.controller("HelloCtrl", function($scope) { $scope.name = "Calvin Hobbes"; }); </script>
Please see the complete code here.