AngularJS1 学习笔记1

时间 2019-11-13

标签 angularjs1 angularjs 学习笔记栏目 AngularJS 繁體版

原文原文链接

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。javascript

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 能够克隆和重复 HTML 元素。
AngularJS 能够隐藏和显示 HTML 元素。
AngularJS 能够在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

代码实例：

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script type="application/javascript" src="../js/angular.min.js"></script>
</head>
<body>


<div >
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name + 55}}</h1>
</div>



<div  ng-init="firstName='John'">

    <p>姓名为 <span ng-bind="firstName"></span></p>

</div>

<div data-ng-app="" data-ng-init="firstName='John'">

    <p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>
</body>
</html>

当网页加载完毕，AngularJS 自动开启。html

AngularJS 指令是以 ng 做为前缀的 HTML 属性。java

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"全部者"。app

ng-model 指令把输入域的值绑定到应用程序变量 name。spa

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。code

ng-init 指令初始化 AngularJS 应用程序变量。htm

HTML5 容许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，可是您可使用 data-ng- 来让网页对 HTML5 有效。blog