Home >Web Front-end >JS Tutorial >JavaScript Enhancement Tutorial—AngularJS Commands

JavaScript Enhancement Tutorial—AngularJS Commands

黄舟
黄舟Original
2017-01-21 15:53:331025browse

This article is the official HTML5 training of H5EDU organization

AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
完整的指令内容可以参阅 AngularJS 参考手册。
AngularJS 实例
<div ng-app="" ng-init="firstName=&#39;John&#39;">

 	<p>在输入框中尝试输入:</p>
 	<p>姓名:<input type="text" ng-model="firstName"></p>
 	<p>你输入的为: {{ firstName }}</p>

</div>
tutorial, which mainly introduces: JavaScript enhancement tutorial--AngularJS command
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
Note	一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:
AngularJS 实例
<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量: <input type="number"	ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{ quantity * price }}</p>

</div>

The above is the content of JavaScript enhancement tutorial--AngularJS command. For more related content, please Follow the PHP Chinese website (www.php.cn)!

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