Angularjs的重要概念
AngularJS的重要概念
MVC模式
AngularJS最早按照MVC模式设计,在这种设计模式下,AngularJS组件可以分为:
M: Model,即模型,是应用程序中用于处理应用程序数据逻辑的部分,在AngularJS中:
即作用域对象(当前为$rootScope), 它可以包含一些属性或方法;
充当储存数据的容器;
提供操作数据的方法。
V: View,即视图, ...
Angularjs——初识AngularJS
AngularJS——初识AngularJS
AngularJS是什么
AngularJS是Google开源的一款前端JS结构化框架,它通过对前端开发进行分层,极好地规范了前端开发的风格——它将前端开发分为Controller层、Service层、DAO层和Model层。其中,Model对象与HTML页面(视图)上HTML元素进行双向绑定,开发者可通过Controller调用Service、DAO与后 ...
Angular集成bpmn.js的基础实现及扩展
一、bpmn的基本认识
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成。
bpmn画图具有哪些内容?
二、使用npm安装bpmn.js
npm install --save bpmn-js
三、在Angular中使用bpmn.js
1.实现编辑器组件
安装相关依赖
npm install --save bpmn-js
编写HTML代码<div class="container">
<div c ...
Ng-Matero v15 正式发布
前言
Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏😳),Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单,但是同步维护的 Material Extensions 这个库要先于 Ng-Matero 发布,所以大部分精力都耗费在组件库上面了。
我已经很久没有写关于 Ng-Mater ...
Angular 20+ 高阶教程 – 目录
请按顺序阅读
关于本教程
初识 Angular
里面会讲到
Angular Versioning
Get Started
Angular Compiler (AKA ngc) Quick View
Dependency Injection 依赖注入 (必读)
里面会讲到
Injector, @Injectable()
StaticClassProvider, FactoryProvider, ValueProvider, ExistingProvider,& ...
Angular 20+ 高阶教程 – Component 组件 の Angular Components vs Web Components
前言
我在《初识 Angular》一文中有提到,Angular 团队是一群不爱创新、喜欢 follow 标准的人。
也因此,要想深入理解 Angular Components,我们就得要先搞懂古老的 Web Components 和 MVVM。
因为 Angular Components 正是 follow 这两个概念发展出来的。
MVVM 与 Web Components
关于 MVVM,可以阅读这 ...
Angular新手入门指南【最全】
Angular概述
Angular 是谷歌开发的一款开源的 web 前端框架,基于 TypeScript 。
和 react 与 vue 相比, Angular 更适合中大型企业级项目。
Angular程序架构
Angular优势
可伸缩性:基于RxJS 、immutable.js和其他推送模型,能适应海量数据需求
跨平台:渐进式应用(高性能、离线使用、免安装),原生(Ionic), ...
Angular 20+ 高阶教程 – Dependency Injection 依赖注入
前言
本来是想先介绍 Angular Component 的,但 Component 里面会涉及到一些 Dependency Injection (简称 DI) 的概念,所以还是先介绍 DI 吧。
什么是 Dependency Injection?
何谓依赖?
class ServiceA {
plus(num1: number, num2: number) {
return num1 + num2;
}
}
首先我们有一个 class ServiceA ...
Angular 20+ 高阶教程 – Getting Started
前言
这篇主要是教大家如何快速搭建一个 Angular get started 项目,纯用于学习。
Before Starting
开始前,我们需要知道几个小知识。
1. Angular Compilation
浏览器支持的编程语言是 HTML、CSS、JavaScript (JS)。
但为了提升开发体验,前端工程师大多数会选择使用 HTML、Scss、TypeScript (TS) 作为主要开发 ...
Angular 20+ 高阶教程 – 关于本教程
版本声明
本教程写于 Angular v17 - v18。
并在 v20 做了一个全面修订版。
接着往后的所有新功能,API 都会更新到相关文章里头 (不一定即时),所以教程总是最新的,大家可以安心学习。
前言
光阴飞逝,一转眼,我尽然已经有两年多的时间完全没有接触 Angular 了。
庆幸,最近又有机会可以开始写 Angular 了。
两年, ...
Angular样式隔离(style isolation)及选择器(:host, :host-context, ::ng-deep)的使用
1.Angular样式隔离
Angular样式隔离的好处最最要的一条就是CSS的可维护性。当没有样式隔离时,我们创建一个组件并添加样式后,可能会影响到其他的组件样式,而且很有可能查找不出问题所在。虽然我们可以想出办法来避免样式被覆盖,但是可能会引发CSS的可维护性问题。
Angular的视图封装(View Encapsulation)
在Angular中, ...
Angular--父子组件生命周期钩子(lifecycle hooks)执行过程
1.angular 组件生命周期钩子执行过程
组件初始化过程中,生命周期钩子执行顺序:
constructor()构造函数,初始化class,(constructor不属于Angular生命周期钩子的范畴,这里只是说明组件组件初始化会先调用构造函数)。
ngOnChanges()--如果组件没有输入属性(@Input()),或者使用时没有提供任何输入属性,那么angular不会调 ...
Angular SSR 探究
一般来说,普通的 Angular 应用是在 浏览器 中运行,在 DOM 中对页面进行渲染,并与用户进行交互。而 Angular Universal 是在 服务端 进行渲染(Server-Side Rendering,SSR),生成静态的应用程序网页,然后在客户端展示,好处是可以更快地进行渲染,在提供完整的交互之前就可以为用户提供内容展示。
本文是在 Angular 14 ...
Angular SSR 探究
一般来说,普通的 Angular 应用是在 浏览器 中运行,在 DOM 中对页面进行渲染,并与用户进行交互。而 Angular Universal 是在 服务端 进行渲染(Server-Side Rendering,SSR),生成静态的应用程序网页,然后在客户端展示,好处是可以更快地进行渲染,在提供完整的交互之前就可以为用户提供内容展示。
本文是在 Angular 14 ...
Angular依赖注入详解
参考:
https://juejin.cn/post/7019184783242559496#heading-5
依赖注入简介
依赖注入是前端开发者也是 Angular 开发者一道很难迈过去的坎。软件只有到达了一定的复杂度才会需要各种设计原则和模式,那么依赖倒置原则(Dependency Inversion Principle )就是为了解决软件模块之间的耦合性提出的一种思想,让大型软件变的 ...
前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的“三部曲”,本文我们将为大家介绍该问题在Angular中的实现。
Excel 电子表格自 1980 年代以来一直为各行业所广泛使用,至今已拥有超过3亿用户,大多数人都熟悉 Excel 电子表格体验。许多企 ...
angular如何引用其他组件
原文链接:angular如何引用其他组件 – 每天进步一点点 (longkui.site)
0.背景
前面一篇文章,简单介绍过angular创建并引用组件。在实际情况开发中,情况会稍微复杂一些,今天这篇文章就简单介绍一下,稍微复杂一点组件引用。
场景:
在一个组件内,切换多个组件。
组件一:city(带module和rou ...
Sonarqube integration with Angular
There are two methods for Sonarqube integration with Angular.
One way is to use ng test to generate the lcov.info file and then read the file directly through the SonarScanner CLI.
One way is to integrate the components of sonarqube by installing them in the angular project.
Two methods will be desc ...
Angular独立组件简单体验
前言
Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。
在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用。
如何创建一个独立组件
对于已有的组件,我们可以在@Component()中添加stan ...
Angular独立组件简单体验
前言
Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。
在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用。
如何创建一个独立组件
对于已有的组件,我们可以在@Component()中添加stan ...