对于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,也就是说,可以通过元素名和属性名调用指令。

相关文章
|
10天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
25 4
|
17天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
23天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
37 3
|
28天前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
105 3
|
2月前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
70 0
|
2月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
23 0
|
2月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
33 0
|
2月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
34 0
|
2月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
45 0
|
2月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
51 0

热门文章

最新文章

下一篇
无影云桌面