ANGULAR - 技术教程文章
「微前端架构」微前端-Angular风格-第2部分
在前一部分中，我讨论了转向MFE解决方案的动机以及解决方案相关的一些标准。在这一部分中，我将介绍我们如何在Outbrain实现它。正如我在前一部分中提到的，其中一个标准是能够与我们当前的技术echo系统集成的解决方案，并且不需要对我们当前维护的应用程序进行什么更改。进入Angular惰性加载特性模块Angular有一个内建的模块概念，它基本上是一个声明对象，用来指定封装在一个模块中的所有组件、指令、服务和其他模块。@NgModule({...
「微前端架构」-Angular风格-第1部分【图】
它是什么，为什么我需要它?让我们从why部分开始，当单页面应用程序启动的时候，大多数应用程序都非常小，并且由一个FE团队管理，一切都很好……随着时间的推移，应用程序变得越来越大，管理它们的团队也越来越大。没有必要过多地讨论拥有大型代码库和大型团队的问题……“微前端”这个术语最近被频繁使用，它提供了一个类似于微服务的概念，我们可以将单个前端应用程序拆分为微应用程序，这些微应用程序可以加载到用户浏览器上运行...
Angular 入门(三) 手机端开发【代码】【图】
上篇总结:管道 pipe 相当于vue中的过滤器. 使用时: {{值 | 管道名:参数:参数...}} angular默认官方提供了一些常用管道, 可以直接使用 也提供了自定义的方式: ng g p 管道名指令 directive 生成命令: ng g d 指令名, 用于操作元素的 DOM 属性生命周期 初始化 ngOnInit -> 挂载时 init -> 更新时 checked -> 销毁 destroy组件间的参数传递– 父...
使用defineProperty实现自定义setter, 简化前端Angular的重构工作【代码】
一、问题场景 Angular的双向绑定给我们开发提供了很大的遍历，将父scope的引用变量作为参数传递给子指令，这样就可以方便的在父作用域内进行业务操作，数据变更会自动传递到子指令。但是如果你基于一个已有的复杂业务模块进行扩展开发，同时要将耦合其中一个功能提取为指令，这个时候就涉及到参数的传递问题。最简的方式就是直接将已有的根数据对象作为参数直接传递过去，参数携带数据大而全，指令内部肯定数据够用不会报错，但是缺...
[ngx-formly] Use Angular Formly Extensions to automatically localize all field labels【代码】
In this lesson were diving a bit deeper and learn how to inject services into Formly Extensions with the example of using ngx-translate to localize all of our form field labels. Create Extension with Tranlsate service:// translate.extension.ts import { TranslateService } from @ngx-translate/core; import { FormlyFieldConfig } from @ngx-formly/core;export class TranslateExtension {constructor(privat...
Angular初学（四）--路由配置【图】
路由 路由就是根据不同的url地址，动态地让根组件挂载其他组件来实现一个单页面应用； 当点击首页按钮/跳转链接时，根组件可以动态地挂载首页组件，不显示其他组件； 当点击新闻按钮/跳转链接时，根组件可以动态地挂载新闻组件，不显示其他组件； 其他组件类似； 一、Angular创建一个带默认路由的项目 1、命令创建一个带路由的项目：ng new angular04 --skip install（skip install表示跳过npm install） 是否安装路由：Y；...
Angular 入门(二)【代码】【图】
先简单回顾上篇所介绍的知识点: Angular相关命令:脚手架的安装: npm i -g @angular/cli --force 生成项目包: ng new 包名 生成过程中的选项 都直接回车选用默认项即可. 启动命令: ng s -o 生成组件: ng g c 组件名Angular的一些用法:插值: {{}} 属性的绑定: [属性名]="值" 或 属性名="{{值}}" 事件: (事件名)="方法名()" 双向数据绑定: [(ngModel)]="值" 必须到app.module.ts中注册 Forms 模块才可用 样式: [ngStyle]="{样式名:值}...
angular 部署的项目自定义访问路径，不使用root根目录的配置
https://blog.csdn.net/home_zhang/article/details/100514875 配置方法如下（以项目名称为admin为例）： 需要注意的地方，html中引用的静态文件要从assets开始写，不可以使用相对路径，例如: <img src="../images/bg.png"/> 不可以，会出现路径引用错误，找不到此图片文件； <img src="assets/images/bg.png"/> 是可以的，正常显示。 1、修改index.html文件中的base为<base href="/admin/">2、修改配置文件karma.conf.js，中的bas...
angular tslint文件详解
{ "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "arrow-return-shorthand": true, // 允许使用箭头函数返回的简略写法 "callable-types": true, // 只有调用签名的接口或文字类型可以写为函数类型 "class-name": true, // 类名采用帕斯卡命名法 "comment-format": [ // 行注释双斜杠后注释内容前加一个空格 true, "check-space" ], "curly": true, // if/for/do/while 条件语句加花括号 "deprecation": { // "seve...
手把手教你搭建自己的Angular组件库 - DevUI【代码】【图】
摘要：DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！ DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。官方网站：devui.design Ng组件库：ng-devui（欢迎Star）...
Angularjs为什么在JS框架中排名第一
很多人感觉jquery 比 Angularjs 火太多啦，Angularjs怎么会是排名第一首先说明一下，Angularjs 是JS的一个框架，而jquery 是一个JS库jquery 就像一个工具箱，为我们提供了非常丰富好用的工具，我们想怎么用就怎么用，jquery只负责让我们更便利，不关心我们的工作方式和流程Angularjs 则定义了一套工作规范，只能按照他的规则来工作，Angularjs是依靠高效的工作规范来提高我们的开发效率的Angularjs的显著优势数据双向绑定举一个ang...
Angular 踩坑指南【代码】
Material 组件库 在项目中安装Material组件库时，按以下步骤： 1. npm i @angular/material @angular/cdk @angular/animations2. 在全局style.scss文件中，引入material主题样式@import '@angular/material/prebuilt-themes/indigo-pink.css';@import '@angular/material/prebuilt-themes/purple-green.css';3. 在全局index.html文件中，引入material icon<link href="https://fonts.googleapis.com/icon?family=Material+Icons" r...
[Angular] The $any() type cast function【代码】
Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type. To silence the error, you can use the $any() cast function to cast the expression to the anytype as in the following example:<p>The items undeclared best by date is: {{$any(item).bestByDate}}</p>Using $any() prevents TypeScript from reporting that bestByDate is...
[Angular] The non-null assertion operator ( ! )【代码】
When you use TypeScripts --strictNullChecks flag, you can prevent the type checker from throwing an error with Angulars non-null assertion operator, !. The Angular non-null assertion operator causes the TypeScript type checker to suspend strict null and undefined checks for a specific property expression. For example, you can assert that item properties are also defined.<!-- Assert color is define...
Angular axios post跨域 qs报错【代码】【图】
Angular axios post跨域 qs报错 解决Post跨域引入qs解决qs报错解决Post跨域 修改headers axios.post(requestUrl,qs.stringify({where: this.validateForm.value.where,f: 'pjson'}),{headers: {//设置headers解决Post跨域'content-type': 'application/x-www-form-urlencoded',}}).then(res => {console.log(res)})接下来要将 post 的参数转换为序列化的 URL 形式，不然会出现参数传递失败，可能你需要这样的参数 得到的却是这样的...
为什么按照 Angular 官网教程执行简单的测试代码，会遇到expect is not defined的错误消息【代码】【图】
Angular 官网的代码： https://angular.io/api/core/Injectable#providedin我把这段代码原封不动地拷贝到我的 app.module.ts ，然后执行：@Injectable() class UsefulService { }@Injectable() class NeedsService {constructor(public service: UsefulService) { } }const injector = Injector.create({providers:[{ provide: NeedsService, deps: [UsefulService] }, { provide: UsefulService, deps: [] }] }); expect(injector...
AngularJS基础
AngularJS教程一款优秀的前端JS框架。通过新的属性和表达式扩展了HTML。可以构建一个单一页应用程序。学习起来非常简单。 AngularJS简介是一个javascript框架。他可以通过<script>标签添加到HTML页面。通过指令扩展了HTML，且通过表达式绑定数据到HTML。它是一个以javascript编写的库，以JavaScript文件形式发布的。<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="ex...
Angular，AngularJS 和 react
这几个单词在前端开发的时候可能会经常遇到。 因项目需要，琢磨了几天 angular，结果下来还是有点一脸懵逼。尝试进行编译下简体中文的文档也是一堆错误。 感觉最最糟糕的就是下载相关的模块，这个太令人难受了。 随手就顺便研究下了上面几个名词了。 Angular 和 AngularJS 虽然名字大部分相同，但是这 2 个东西完全不是同一种动物。 在 Angular 1 的版本的时候，我们可以认为 Angular 就是 AngularJS，一种类似 Jquery 的库。通常可...
6、angular服务【代码】
服务可以理解为公共的方法，项目里面需要用到的公共方法都可以抽离为一个公共的方法使用 服务类的定义通常紧跟在 “@Injectable()” 装饰器之后，依赖不一定是服务 —— 它还可能是函数或值。也就是说函数或值不需要@Injectable()装饰器创建service的指令 ng generate service heroes/hero 下面给几个服务案例 1、公共函数或值，目录：app->core->services->utils->app-common.function.tsexport function getRole():string {retu...
angular笔记
一.准备工作 1.npm安装：进入Node.js官网，安装Node.js之后，npm也就安装好了。 在cmd命令行可以输入npm指令。 cnpm安装：使用npm比较慢，所以还会安装cnpm。步骤（进入命令行，输入：npm install -g cnpm --registry=https://registry.npm.taobao.org） 2.使用npm/cnpm命令安装angular/cli（安装一次） 命令行键入：npm/cnpm install -g @angular/cli 3.验证angular环境是否安装成功： 命令行键入：ng v 二.angular项目的创建 命...
Angular完整项目开发6 - 添加全局变量【代码】【图】
Angular开发，在不同的组件中都会向后端发送请求，url内容有很大程度的重复： http://localhost:4200/webapp/device http://localhost:4200/webapp/sysuser ... 于是考虑把重复的部分拿出来，做成全局变量。网上查到了方法。 1. 添加全局文件global.ts, 内容为export声明。export const commonURL:string = "http://localhost:4200/webapp"; 2. 在组件或服务中引用和调用 device.service.ts ... import {commonURL} from '../../gl...
Angular 统一社会信用代码生校器【代码】【图】
地址github https://github.com/linyisonger/Web.Toolbox preview http://toolbox.linyisonger.cn/unified-identifier展示效果介绍 使用angular前端框架，采用 github actions技术，将项目打包成docker 镜像，再连接自己的服务器更新镜像与容器，达到持续集成的效果。 主要代码[x] 行政区划码[x] 读取[x] 统一社会信用代码[x] 生成 [x] 校验行政区划码读取行政区划代码 http://www.mca.gov.cn/article/sj/xzqh/2020/ 2020年11月中...
Angular 学习笔记 (Typescript 版本更新)【代码】
记入每一期我会用到的功能 : v4.3 1. getter setter 的类型可以不一样咯, 这个困扰很久了. (interface, object, class 都可以这样用)class Thing {#size = 0;get size(): number {return this.#size;}set size(value: string | number | boolean) {let num = Number(value);// Dont allow NaN and stuff.if (!Number.isFinite(num)) {this.#size = 0;return;}this.#size = num;} }
Angular10+"ng.ps1 cannot be loaded because running scripts is disabled on this system"解决办法【代码】
升级到Angular10后，执行ng serve命令出现"...ng.ps1 cannot be loaded because running scripts is disabled on this system"的错误。 解决办法： 1.打开powershell 2.输入命令(原封不动的输入)：Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser 3.再次执行ng命令。 大家可以按照一下的policy命令参数自行修改安全策略。Policy的有效参数: -- Restricted: 不载入任何配置文件，不运行任何脚本。 "Restricted" 是...
Angular ngx-translate中英文切换【代码】
1.安装包npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save2.根模块app.module.ts 引入import { HttpClientModule, HttpClient } from @angular/common/http; import { TranslateModule, TranslateLoader } from @ngx-translate/core; import { TranslateHttpLoader } from @ngx-translate/http-loader; export function createTranslateLoader(http: HttpClient) {return new TranslateHtt...
Angular 组件视图封装模式【代码】
在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分。 通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种：ShadowDom 模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN 上的 Shadow DOM）来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(译注：不进不出，没...
Angular 预渲染实践【图】
预渲染理解 客户端在接收html文件之前，服务端将html标签占位做动态数据填充；服务端处理好一个html字符串文件生成一个静态的html页面文件返回给客户端，客户端即会解析html，渲染呈现出UI/UX；特性： 1、访问加载速度比其它任意方式几乎都快； 2、利于搜索引擎抓取，方便网站SEO 3、单个静态页只分配特定的路由 4、不用执行Javascript 5、chrome中访问后，当前页右键【查看网页源代码】，对应页面内容都可在源代码中查看 6、资源只...
vue、react、angular
Vue.js 一个用于创建 web 交互界面的库，是一个精简的 MVVM。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 FiltersAngularJS 是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富的 Angular指令react React 仅仅是 VIEW 层是facebook公司。推出的一个用于构建UI的一个库，能够实现服务器端...
angular的service服务使用方法【代码】
一、service服务 ng g s service/search服务组件：search.service.ts name:string = 'kk' public getName():string{return this.name}public setName(v:string):void{this.name = v}组件使用service // ts文件 // 导入服务 import {SearchService} from '../service/search.service' // 注入服务 constructor(public SearchService:SearchService) { }// html文件使用 {{SearchService.name}} <button (click)="SearchService.setN...