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

相关文章
|
9月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
895 1
|
10月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
601 70
|
10月前
|
JavaScript 前端开发 API
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
313 9
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
491 0
|
12月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
604 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
468 41
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
244 9
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
879 7
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
577 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    796
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    358
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    279
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    245
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    368
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    513
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    363
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    168
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    348
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    319