angularjs 简介

发布时间：2020-12-17 10:31:52 所属栏目：安全来源：网络整理

导读：HelloWorld !doctype htmlhtml ng-app head script src="http://code.angularjs.org/angular-1.0.1.min.js"/script /head body Hello {{'World'}}! /body/html 现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记 ng-app 告诉AngularJS处理整个

HelloWorld

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

<html ng-app>

这行载入AngularJS脚本：

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

双向数据绑定

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。

双大括号标记将yourname模型变量添加到问候语文本。

你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。

这就是AngularJS双向数据绑定的概念。

输入框的任何更改会立即反映到模型变量（一个方向），

模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

angularjs下载地址

https://code.angularjs.org/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!