Angular入门级（35）

最新推荐文章于 2023-03-11 14:14:53 发布

yzy0223郁子彦

最新推荐文章于 2023-03-11 14:14:53 发布

阅读量178

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/yzy0223/article/details/103786379

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS介绍

官方网站：https://www.angularjs.net.cn/

前言：AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS是一个开发动态Web应用的框架。

它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。

它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScript实现，能够和任何服务器端技术完美结合。

Angular通过指令（directive）扩展HTML的语法。例如：

通过{{}}进行数据绑定。
使用DOM控制结构来进行迭代或隐藏DOM片段。
支持表单和表单验证。
将逻辑代码关联到DOM元素上。
将一组HTML做成可重用的组件。

Angular的出众之处

构建一个CRUD应用时可能用到的所有技术：数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入。
可测试性：单元测试、端到端测试、模拟对象（mocks）、测试工具。
拥有一定目录结构和测试脚本的种子应用。

AngularJS引导程序

Angular script标签

在HTML页面底部放置 script 标签。这样可以优化应用的加载时间，因为避免了HTML加载时被 angular.js 脚步的加载阻滞。
可点击此链接 http://code.angularjs.org 获取 Angular 的最新版本
如果你想要你的应用自动启动 Angular 的话，那就把 ng-app 放在应用的根结点中，通常情况下是 html标签中，像这样：
```
 		<html ng-app>
```

简单举例：数据绑定

表头需引用angular包
可引用在线的

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  </head>
  <body>
    <div ng-init="qty=1;cost=2">
      <b>订单:</b>
      <div>
        数量: <input type="number" ng-model="qty" required >
      </div>
      <div>
        单价: <input type="number" ng-model="cost" required >
      </div>
      <div>
        <b>总价:</b> 
      </div>
    </div>
  </body>
</html>