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

简介: 对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】

Angularjs表达式

在这里插入图片描述

Angularjs使用表达式将数据绑定到HTML
Angularjs表达式使用双括号编写:{表达式}。
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,也就是说,可以通过元素名和属性名调用指令。

相关文章
|
30天前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
35 0
|
1月前
|
前端开发 UED
微前端实战
微前端实战
20 2
|
1月前
|
XML 开发框架 前端开发
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
13 0
|
9天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
17 2
|
1月前
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
|
1月前
|
开发框架 前端开发 JavaScript
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
84 1
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
|
1月前
|
前端开发 JavaScript API
|
1月前
|
开发框架 前端开发 JavaScript
未来趋势:前端开发框架的革新与发展
随着技术的不断进步和市场需求的变化,前端开发框架也在不断革新和发展。本文将探讨当前前端开发框架的最新趋势,并展望未来可能的发展方向。
|
1月前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
1月前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)