开源一夏 | 对于 Angular 表达式以及重要指令的研究心得【前端实战 Angular 框架】

作者：黎燃

2022 年 8 月 09 日
内蒙古
本文字数：1959 字
阅读完需：约 6 分钟

开源一夏 | 对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】

Angularjs 表达式

Angularjs 使用表达式将数据绑定到 HTMLAngularjs 表达式使用双括号编写：｛表达式｝。angularjs 表达式将数据绑定到 HTML，类似于 ng bind 指令。Angularjs 将在写入表达式的位置“输出”数据。Angularjs 表达式与 JavaScript 表达式非常相似：它们可以包含文本、运算符和变量。实例｛5+5｝或｛firstname+“”+LastName｝｝

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head><body>
<div ng-app><p>黎燃表达式{{ 5 + 5 }}</p></div>
</body></html>

复制代码

Angularjs 数字类似于 JavaScript 数字：

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div>

复制代码

使用相同的 NG bind 实例：

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p> </div>

复制代码

Angularjs 表达式和 JavaScript 表达式

与 JavaScript 表达式类似，angularjs 表达式可以包含字母、运算符和变量。与 JavaScript 表达式不同，angularjs 表达式可以用 HTML 编写。与 JavaScript 表达式不同，angularjs 表达式不支持条件判断、循环和异常。与 JavaScript 表达式不同，angularjs 表达式支持过滤器。

Angularjs 指令

Angularjs 使用称为指令的新属性扩展 HTML。Angularjs 通过内置指令向应用程序添加函数。Angularjs 允许自定义指令。angularjs 指令是一个扩展的 HTML 属性，前缀为 ng-。ng app 指令初始化 angularjs 应用程序。ng init 指令初始化应用程序数据。ng 模型指令将元素值（例如输入字段的值）绑定到应用程序。

<div ng-app="" ng-init="firstName='John'">      <p>在输入框中尝试输入：</p>     <p>姓名：<input type="text" ng-model="firstName"></p>     <p>你输入的为： {{ firstName }}</p> </div>

复制代码

ng-app 指令告诉 angularjs＜div＞元素是 angularjs 应用程序的“所有者”。数据绑定上面示例中的{firstname}表达式是 angularjs 数据绑定表达式。angularjs 中的数据绑定将 angularjs 表达式与 angularjs 数据同步。｛｛firstname｝｝通过 ng model=“firstname”同步。在下一个示例中，两个文本字段由两个 ng 模型指令同步：

<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number"    ng-model="quantity">价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div>

复制代码

ng-repeat 指令用在一个对象数组上：

Ng 应用程序指令

ng app 指令定义 angularjs 应用程序的根元素。加载网页时，ng app 指令将自动引导（自动初始化）应用程序。稍后，将了解 ng app 如何通过值（例如 ng app=“mymodule”）连接到代码模块。

<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <p>循环对象：</p><ul>  <li ng-repeat="x    in names">    {{ x.name + ', ' + x.country }}  </li></ul> </div>

复制代码

Ng 初始化指令

ng init 指令定义 angularjs 应用程序的初始值。通常，不使用 ng init。将用控制器或模块替换它。

Ng 模型教学

ng 模型指令将 HTML 元素绑定到应用程序数据。ng 模型指令还可以：为应用程序数据（数字、电子邮件、必填项）提供类型验证。为应用程序数据提供状态（无效、脏、触摸、错误）。为 HTML 元素提供 CSS 类。将 HTML 元素绑定到 HTML 表单。

Ng 重复指令

ng repeat 指令为集合（数组）中的每个项克隆一次 HTML 元素。

创建自定义指令

除了 angularjs 的内置指令外，我们还可以创建自定义指令。可以使用。用于添加自定义指令的指令函数。要调用自定义指令，需要向 HTML 元素添加自定义指令名称。驼峰方法用于将指令命名为 runoobdirective，但在使用它时需要将其拆分为“-”。Runoob 指令：

<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() {    return {        template : "<h1>自定义指令!</h1>"    };});</script>
</body>

复制代码

可以通过以下方式调用指令：素名属性类名笔记

<runoob-directive></runoob-directive>

复制代码

<div runoob-directive></div>

复制代码

<div class="runoob-directive"></div>

复制代码

<!-- directive: runoob-directive -->

复制代码

通过添加 restrict 属性并将值设置为“a”，可以设置指令只能通过属性调用：

var app = angular.module("myApp", []);app.directive("runoobDirective", function() {    return {        restrict : "A",        template : "<h1>自定义指令!</h1>"    };});

复制代码

极限值可以是以下值：E 用作元素名称 A 用作属性 C 用作类名 M 用作注释 restrict 的默认值是 ea，也就是说，可以通过元素名和属性名调用指令。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/a350809df46033a7526ea1429】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

开源一夏 | 对于 Angular 表达式以及重要指令的研究心得【前端实战 Angular 框架】

Angularjs 表达式

Angularjs 表达式和 JavaScript 表达式

Angularjs 指令

Ng 应用程序指令

Ng 初始化指令

Ng 模型教学

Ng 重复指令

创建自定义指令

黎燃

评论