Of Stack

Write methods for hello world using JavaScript's AngularJS library

  • 2020-06-19 09:39:46
  • OfStack

This article shows examples of hello world code implemented by the AngularJS framework.

Here are 1 things to focus on as you look at the Hello World example and the following code examples.

ng-app, ES11en-ES12en, ES13en-ES14en directive A template with two big brackets

Step 1: in < Head > Section contains Angular Javascript

Include the following code < head > < /head > You can get the latest code from the Google-managed library as follows. 


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

Step 2: Apply the ng-ES38en directive to < Html > The element

The ES44en-ES45en directive is applied below to < html > Element. Optionally give app a name. It can be written simply < html ng-app > This 1 directive is used to flag that Angular will recognize the html element as the root element of our application. This gives the application developer the freedom to tell Angular the entire html page or just one part of it should be treated as an Angular application. 


<html ng-app="helloApp">

Step 3: Apply the ES63en-controller directive to < Body > The element

Apply the ng-controller directive to < Body > The controller directive can be applied to any element, such as div. In the code below, "HelloCtrl" is the name of the controller that can be placed in < head > Elements in the < script > < /script > Controller code reference in. 


<body ng-controller="HelloCtrl">

Step 4: Apply the ng-model directive to the input element

You can use the ES96en-ES97en directive to bind the input to the model from 1 onwards. 


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

Step 5: Write the template code

Below is the template code that shows the model value for 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: in < Script > Create the controller code in

Create the controller code in the script element as follows. In the following code, "helloApp" is in < html > Element is the name of the module defined using the ng-ES124en directive. The next line of code shows the module used in < body > The element creates a controller using the name "HelloCtrl" defined by the ES128en-ES129en directive. The controller "HelloCtrl" is registered to this module, "helloApp". The last line of code shows the model associated with the $scope object 


<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

See here for the complete code.

Related articles: