AngularJS是JavaScript框架。用JavaScript编写的库。
它可通过 <script> 标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
Angular 10.0.0-next.6 已发布，具体更新内容如下：
Bug Fixes
- bazel： ng_package 规则应更新 ts_library 目标的“”（＃36944）（d5293d2）
- compiler：删除未解决的 DI 参数的过时和无效警告（＃36985）（d0280a0）
- editor -cli：正确规范模拟 Windows 文件路径（＃36859）（b682bd1）
- core：处理需要多个数字的复数函数（＃36901）（2ff4b35），closes＃36888
- forms：在验证器中正确处理数值（＃36157）（88a235d），closes＃35591
- localize：确保getLocation()works（＃36853）（70b25a3）
- ngcc：支持 delegate 的 ModuleWithProviders 函数（＃36948）（fafa50d），closes＃36892
- ……
Features
- bazel：通过删除 esm5 和 fesm5 简化 ng_package（＃36944）（9dbb30f）
- compiler cli：如果发现具有 Angular 功能的未修饰类，则报告错误（＃36921）（4c92cf4）
- core：带有修饰字段的未修饰类迁移应使用生命周期钩子处理类（＃36921）（c6ecdc9）
- ngcc：支持新的 APF，其中module指向 esm2015 输出（＃36944）（c98a4d6）
- language-service：[ivy]解析 Angular 编译器选项（＃36922）（dbd0f8e）
- 删除 TypeScript 3.6 和 3.7 支持（＃36329）（fbd281c）
Performance Improvements
- compiler cli：逐步执行模板类型检查（＃36211）（ecffc35）
- compiler cli：将 Ivy 模板类型检查分为多个文件（＃36211）（b861e9c）
BREAKING CHANGES
- TypeScript 3.6 和 3.7 版本不再受支持，请更新至 TypeScript 3.8
- forms：数字输入不再监听change事件。
AngularJS试图成为WEB应用中的一种客户端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，还是一个完整的客户端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是在你构建应用的起点，并且你仍能灵活变动。AngularJS的一些出众之处如下：
构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。
具有目录布局和测试脚本的种子应用作为起点。下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证，然后用来计算总值，这个总值会被格式化成本地的样式。下面有一些开发者常见的概念，你需要先了解一下：
1.将数据模型(data-model)关联到视图(UI)上；
2.写、读、验证用户的输入；
3.根据模型计算新的值；
4.将输出格式本地化，
index.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html ng-app>
<head>
<script src="angular-1.1.0.min.js"></script>
<script src=";></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
1
试一下上面这个例子。然后我们一起来看下这个例子的工作原理。
在<html>标签里，我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)你的应用。
我们用<script>标签来加载AngularJS脚本：
<script src="angular-1.1.0.min.js"></script>通过设置<input>标签里的ng-model属性， AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证：
Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >这个输入框的widget看起来很普通，但如果认识到以下几点那它就不普通了：
当页面加载完后，AngularJS会依照widget里的声明的模型名字（qty、cost）生成同名变量。你可以把这些变量认为是MVC设计模式中的M(Model)；
注意上面widget里的input有着特殊的能力。如果你们没有输入数据或者输入的数据无效，这个input输入框会自动变红。输入框的这种新特性，能让开发者更容易实现CRUD应用里常见的字段验证功能。
终于，我们可以来看一下神秘的双大括号{{}}了:
Total:{{qty *cost |currency}}这个{{表达式}}标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器({{ expression | filter }})的组合。AngularJS提供了过滤器来对输入输出数据格式化。
上面的这个例子里，{{}}里的表达式让AngularJS把从输入框中获得的数据相乘，然后把相乘结果格式化成本地货币样式，然后输出到页面上。
值得一提的是，我们既没有调用任何AngularJS的方法，也没有像用框架一样去编写某个具体逻辑，就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成 静态页面更多的工作，让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。
1.《update esm，干货看这篇!Angular 10.0.0-next.6 发布，Web 前端框架》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《update esm，干货看这篇!Angular 10.0.0-next.6 发布，Web 前端框架》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/gl/djyxgl/228974.html