AngularJs之一

Posted 2020-08-25 @新时代的码砖工

在讲正题之前，先说一下有关angular简介方面的信息：

 1. angularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
 2. AngularJS 是一个 javascript 框架。它可通过 <script> 标签添加到 html 页面。
 3. AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

接下来先讲第一个实例：

<div ng-app=“” ng-init=“name=‘恒博‘">
你的名字是：{{name}}
</div>

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

接下来讲一下angularJs功能：

1.AngularJS 使得开发现代的单一页面应用程序变得更加容易。
2.AngularJS 把应用程序数据绑定到 HTML 元素。
3.AngularJS 可以克隆和重复 HTML 元素。
4.AngularJS 可以隐藏和显示 HTML 元素。
5.AngularJS 可以在 HTML 元素"背后"添加代码。
6.AngularJS 支持输入验证。

angularJs的表达式：

1.AngularJS 表达式写在双大括号内：{{ 表达式 }}。
2.AngularJS 表达式把数据绑定到 HTML，
3.AngularJS 将在表达式书写的位置"输出"数据。
4.AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
如{{5+5}} , {{uname+”和”+yname}},{{r*3.1415926}}

接下来讲一下angularJs的几个指令：

指令一：

<div ng-app="" ng-init="name=‘李宝裤‘">
你的名字是：{{name}}
</div>

AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的以 data- 开头自定义属性。AngularJS 属性以 ng- 开头，
在html5页面中也可以使用 data-ng- 来让网页对 HTML5 有效。

ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。将使用一个控制器或模块来代替它。

 

angularJs的数据绑定：

<div ng-app="" ng-init="nn=1;price=5">
 <h2>刀削面计价器</h2>
 数量： <input type="number" ng-model="nn">
 价格： <input type="number" ng-model="price">
 <h3> {{ nn * price }}</h3>
</div>

通过ng-model 指令同步