Angular 的口号是 - “一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)”,即 Angular 是支持开发跨平台的应用,比如:Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。
在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、 navigator等浏览器特有的类型以及直接操作DOM元素。 这样就引出了 Angular 主要特性之一:横跨所有平台。通过合适的方法,使用 Angular 构建的应用,可复用在多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。 为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类
为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。
在上两篇文章中,我们学习了元素中必知重要属性和方法和 Angular 中自定义 Video 操作,没有度过的读者可先了解。
今天在做ng项目,看着前人的代码有 viewChild() 等关键字。新手有点疑惑,索性查查资料总结一下和ng相关的几个和DOM相关的几个概念
Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,就能正常获取查询的元素。
本文将使用 UltimateAngular/angular-pro-src 中的示例,来一步步介绍自定义属性指令的相关知识。在正式开发前,我们可以先看一下,最终效果 Stackblitz - Custom-Attribute-Directive。
指令这种东西,可以加强用户体验,减少一些重复工作; 跟着我来实现一个悬浮链接打开的指令
其实ionic3(angualr4)和ionic2(angular2)差不多,但和ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。在angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component来标识,用cli生成命令就如下所示:
Seam Carving是一种图片压缩算法。简单来说就是优先删除图片中颜色与周围像素接近的像素点。即大片相同的颜色(如背景)将会被优先删除。最后将会留下主要元素的轮廓。
import { Directive, ElementRef, OnInit, Input, Renderer2, RendererStyleFlags2 } from '@angular/core'; /** * @param area 要拖动的元素 * @param handle 要拖动的元素头部句柄 * @option maskClass 外层模态框的 class * @option hidden 外层模态框 overflow 是否强制 hidden */ export interface
好久没有写文章了,趁着吃完饭消化的时候打算写一篇。先前一篇文章提到并关注的capacitor终于出到1.0.0-alpha.5了,本想写它,但是内容比较多,所以先放一下,写别的。
Yeah,关注我的读者应该知道,上一篇文章了解 Angular 开发的内容,我们已经概览了 Angular 的相关内容。在自定义指令的部分,我们已经能够实现编写,但是,在实际场景中,我们还需要标准化的管理。
绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。
组件的概念比较大,本文讲解的是属性指令和结构指令的创建和使用,Angular官方文档
我经常思考,在面临一个不确定问题时,以往的经验究竟有无辅助作用?如果把经验遗忘会产生何种程度的影响?在上下求索未果之后,如何找回曾经的感觉,恰若灵光一现?凡此种种,终是要思考总结的,这篇文章便是我的反思之作。
原文链接:Never again be confused when implementing ControlValueAccessor in Angular forms
关于指令的简单介绍可以看此文:【开发指南】(六)ionic3应该善用组件和指令,在此我们命令行创建一个指令:
这指令不是我发明的,国外看到的,找个地方记录一下。关于指令的一些简单说明,可以看我这篇文章:【开发指南】(五)ionic3应该善用组件和指令。 假如对指令有所了解了,那首先创建一个指令: ionic g directive autosize 打开文件编辑: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[autosize]' // Attribute
现在开始实现这个指令,新建指令之前添加Keyboard插件,一般我们的项目默认已经装上了的,我们只需安装相应的ionic-native子模块:
这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是需要的源码: https://pan.baidu.com/s/1Eqc4MRiQDwOHmu0O
关于这篇文章,很早前就准备写了,只是内容属于我了解的非官方资料,怕有Bug风险误导别人,又怕我表述不清楚一直没动笔,后来群里有人专门找我问这个,那我还是写一下,仅作为参考……
在我的项目中,用户点击按钮后,如果网页响应慢一点,用户常会再次点击一下。结果就触发了两次 click 操作。 如果是查询还好,但如果是post,put请求时,可能就是大问题了。
假设读者通过 angular 脚手架新建了项目。那么,我们进入根目录,执行 npm install dygraphs:
移动端运行在浏览器上的网站,我们一般称之为H5应用,就是泛指我们经常开发的spa,map页面
曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但还是希望能做成组件形式的,之后看到一篇自定义组件的文章,了解到ControlValueAccessor才真正完成这个心愿,现在记录分享与诸公。
我在《ionic3开源组件》提到了图片选择组件,但是后来发现其实现功能很简单,而且我不喜欢它写死了宽高大小,这对于不同分别率不太友好。于是尝试实现了一下,先上效果图:
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情
我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件,可以看里面的源码,也可以看下面内容。
基于Hybrid开发模式的AngularJS开发,相比传统Web站点的开发模式有着很明显的差别,最主要体现在Window对象的作用域不同,在传统web开发中,所有angular module都是共享同一个Window对象,而在移动开发领域,我们更倾向于基于多WebView并存的形式来做页面内容组织,这样做最大的好处便是能尽可能多的缓存页面状态,实现类似纯原生应用的快速页面呈现体验。
在开发 Web 应用程序时,有时候我们需要获取当前的网络状态,然后根据不同的网络状态显示不同的提示消息或显示不同页面内容。对于原生应用、混合应用或提供 JS-SDK 的第三方平台来说,我们可以通过相关的 Network API 来获取当前的网络连接状态。但对于 Web 应用来说,虽然也有相关的 Network Information API,但兼容性并不是太好,具体的兼容情况,可以参考 Can I Use - netinfo。
import { Directive, ElementRef, OnInit, Renderer2, Input } from '@angular/core'; /** * @param area
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第18天,点击查看活动详情
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情
阅读本文,是在你了解 Angular 基本知识的前提下,如果读者还不了解,请前往官网了解。
Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,自己new出来测试类的实例。
领取专属 10元无门槛券
手把手带您无忧上云