This article shows the hello world code example implemented by the AngularJS framework.
Here are some aspects that you need to focus on when looking at the Hello World example and the following code examples.
- ng-app, ng-controller, ng-model directive
- Template with two braces
Step 1: Include Angular Javascript in the <Head> section
Include the following code into <head></head> to introduce the Angularjs javascript file. You can obtain the latest code from a Google-managed library in the following way.
<script src="///ajax/libs/angularjs/1.2.17/"></script>
Step 2: Apply the ng-app directive to the <Html> element
The ng-app directive is applied to the <html> element as follows. You can choose to specify a name for the app. It can be simply written in <html ng-app>. This directive is used to mark Angular to identify the html element that is the root element of our application. This gives the application developers the freedom to tell Angular the entire html page or just part of it to be treated as an Angular application.
<html ng-app="helloApp">
Step 3: Apply the ng-controller directive to the <Body> element
Apply the ng-controller directive to the <Body> element. The controller directive can be applied to any element, such as a div. In the following code, "HelloCtrl" is the name of the controller and can be referenced by the controller code placed in <script></script> at the <head> 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
Below is the template code showing the model value of the model with the name "name". Note that the model with the name "name" is bound to the input in step 4.
Hello {{name}}! How are you doing today?
Step 6: Create Controller Code in <Script>
Create controller code in the script element as follows. In the following code, "helloApp" is the name of the module defined by the ng-app directive in the <html> element. The next line of code shows the name "HelloCtrl" defined by the ng-controller directive in the <body> element. 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 = ("helloApp", []);
("HelloCtrl", function($scope) {
$ = "Calvin Hobbes";
});
</script>
Please read the complete codehere。