AngularJs

时间 2019-11-29

原文原文链接

参考：http://www.runoob.com/angularjs/angularjs-intro.html javascript

http://angularjs.cn/A00nhtml

AngularJs是一个为动态web设计应用的框架。它能让你使用html做为模板语言，经过拓展html的语法，让你更清楚，简洁的创建你的应用组件，它的创新点在于，利用“数据绑定”和 “依赖注入” 它使你再也不写大量的代码。这些全都经过浏览器端的javascript实现，这也使得它可以完美的和任何服务器端技术结合。
java

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它可经过 <script> 标签添加到 HTML 页面。angularjs

AngularJS 经过指令扩展了 HTML，且经过 表达式 绑定数据到 HTML。web

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

**咱们建议把脚本放在 <body> 元素的底部。
**这会提升网页加载速度，由于 HTML 加载不受制于脚本加载。express

AngularJS 扩展了 HTML浏览器

AngularJS 经过 ng-directives 扩展了 HTML。服务器

ng-app 指令定义一个 AngularJS 应用程序。app

ng-model 指令把元素值（好比输入域的值）绑定到应用程序。框架

ng-bind 指令把应用程序数据绑定到 HTML 视图。

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>

实例讲解：

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

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

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

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

**若是您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果

运行结果以下：很好是我输入进去测试的

什么是 AngularJS？

AngularJS 是专门为应用程序设计的 HTML。

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

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 能够克隆和重复 HTML 元素。
AngularJS 能够隐藏和显示 HTML 元素。
AngularJS 能够在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 做为前缀的 HTML 属性。

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

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

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

</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有殊途同归之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们能够包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>个人第一个表达式： {{ 5 + 5 }}</p>
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>