search

Home >Web Front-end >JS Tutorial >How to create your first AngularJS application_AngularJS

How to create your first AngularJS application_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:441148browse

Follow the steps below to create an AngularJS application
Step 1: Load the frame

As a pure JavaScript framework, it can be added using the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. 

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

Step 2: Define AngularJS application using ng-app directive

<div ng-app="">
...
</div>

Step 3: Pattern name defined with ng-model directive

<p>Enter your Name: <input type="text" ng-model="name"></p>

Step 4: Use the ng-bind directive to define the value binding in the above model 

<p>Hello <span ng-bind="name"></span>!</p>

Follow the following steps to run the AngularJS application

Use the three steps mentioned above in your HTML page.
testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

Open textAngularJS.html in your web browser. Please enter your name and see the results.

2015616114947849.png (611×329)

How to integrate AngularJS with HTML

  • The ng-app directive indicates the start of an AngularJS application.
  • The ng-model directive creates a model variable named "name" in the HTML page, and the ng-app directive is used within the div.
  • ng-bind uses the model name to display in the HTML span tag whenever the user enters something in the text box.
  • The closing 16b28748ea4df4d9c2150843fecfba68 tag indicates the end of the AngularJS application.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to AngularJS’s HTML DOM support_AngularJSNext article：Introduction to AngularJS’s HTML DOM support_AngularJS

Related articles

See more