Home > Web Front-end > JS Tutorial > How to write hello world using JavaScript's AngularJS library_AngularJS

How to write hello world using JavaScript's AngularJS library_AngularJS

WBOY
Release: 2016-05-16 15:53:26
Original
1194 people have browsed it

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.

  • ng-app, ng-controller, ng-model directives
  • Template with two braces

Step 1: Include Angular Javascript

in the section

Include 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>
Copy after login

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">
Copy after login

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">
Copy after login

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"/>
Copy after login

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&#63;
Copy after login


Step 6: Create controller code in

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template