Use the AngularJS library of JavaScript to write hello world
This article demonstrates the hello world code example implemented by the AngularJS framework.
The following are some important aspects you need to pay attention to when looking at the Hello World example and the following code example.
- Ng-app, ng-controller, and ng-model commands
- Templates with two large arc types
Step 1: The <Head> section contains Angular Javascript
Include the following code in
?
1 2 |
<Script Src = "// ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"> </script> |
Step 2: Apply the ng-app command to the <Html> element
Apply the ng-app command to the
?
1 |
<Html ng-app = "helloApp"> |
Step 3: Apply the ng-controller command to the <Body> element
Apply the ng-controller command to the <Body> element. controller command to any element, such as div. In the following code, "HelloCtrl" is the name of the controller and can be referenced by the Controller code in
?
1 |
<Body ng-controller = "HelloCtrl"> |
Step 4: Apply the ng-model command to the input element
You can use the ng-model command to bind the input to the same model.
?
1 |
<Input type = "text" name = "name" ng-model = "name"/> |
Step 5: Write template code
The following is the template code showing the model value of the model named "name". Note that the model named "name" is bound to the input in step 4.
?
1 |
Hello {name }}! How are you doing today? |
Step 6: Create the Controller code in <Script>
Create the Controller code in the script element as follows. in the following code, "helloApp" is the name of the module defined by using the ng-app command in the
?
1 2 3 4 5 6 |
<Script> Var helloApp = angular. module ("helloApp", []); HelloApp. controller ("HelloCtrl", function ($ scope ){ $ Scope. name = "Calvin Hobbes "; }); </Script> |