Angular包格式v8.0
Angular Package Format(APF)v8.0
This document describes the structure and format of the Angular framework packages currently available on npm. This format applies to packages distributing Angular components (like Angular Material) as well as the core framework packages published under the @angular n ...
Angular 自定义模块
创建自定义模块
ng g module mymodule
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//angular内置的模块
import { FormsModule } from '@angular/forms';
//angualr内置的模块
import { HttpClientModule } from '@angular/common/http';
...
angular中的动态路由
1.配置动态路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];
2.跳转传值
<a [rout ...
Angular中的routerLink 跳转页面和默认路由
1.创建新项目
2.创建home news newscontent 组件
3.找到app-rounting-moudle.ts配置路由
1）引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
2）配置 ...
Angular复习笔记7-路由（下）
Angular复习笔记7-路由（下）
这是angular路由的第二篇，也是最后一篇。继续上一章的内容
路由跳转
Web应用中的页面跳转，指的是应用响应某个事件，从一个页面跳转到另一个页面的行为。对于使用Angular构建的单页应用而言，页面跳转实质上就是从一个配置项跳转到另一个配置项的行为。页面跳转流程如下图所示，当某个 ...
Angular 中的生命周期函数
一、 Angular中的生命周期函数
官方文档:https://www.angular.cn/guide/lifecycle-hooks 生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。
constructor
...
angular 管道
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
<p>{{num | number:'1.2-4'}}</p> <!--/接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数} -->
<p>{{num | number:'1.2-2'}}</p>
<p>{{num | number:'1.1-1'}}</p>
...
angular 中的[ngClass]、[ngStyle]
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div</div>
<div [ngClass]="{'red': flag, 'blue': !flag}">这是一个 div </div>
<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}" ...
angular 双向数据绑定
第一步 引入FromsModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarati ...
angular点击事件和表单事件
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>
<input type="text" (keyup)="keyUpFn($event)"/>
</div>
import { Compone ...
angular 中*ngIf 和*ngSwitch判断语句
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<p *ngIf="true">show</p>
<p *ngIf="isShow">hide</p>
<p template="ngIf true">这是 ngIF 判断是否显示</p>
<ul [ngSwitch]="status">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
...
angular 中数据循环 *ngFor
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}
</h1>
<h1>循环数据 显示数据的索引（key）</h1>
<ul>
<li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
</d ...
Angular 创建项目
1. 打开命令行工具找到你要创建项目的目录
2. 创建项目
ng new 项目名称
如果要跳过 npm i 安装：
ng new angulardemo --skip-install
3.创建过程中会问你是否安装配置路由
4. 运行项目
在项目目录下,打开终端:
ng serve --open
常见问题: 创建项目后用 npm i 或者 cnpm i 后项目没法运行
解决方案： 用 yarn ...
Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍
之前写了一篇 《如何优雅的使用 Angular 表单验证》，结尾处介绍了统一验证反馈的类库 ngx-validator ，由于这段时间一直在新模块做微前端以及相关业务组件库，工具等开发，一直拖到现在，目前正式版 1.0 终于可以发布了。可能有些人没有阅读过那篇博客，我这里简单介绍下 ngx ...
[开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块[完结]
什么是OSharp
OSharpNS全称OSharp Framework with .NetStandard2.0，是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架。这个框架使用最新稳定版的.NetCore SDK（当前是.NET Core 2.2），对 AspNetCore 的配置、依赖注入、日志、缓存、实体框架、Mvc(WebApi)、身份认证、权限授权等模块进行更高一级的自动化封装， ...
angular集成tinymce
1.前言
我使用的是angular的7.x版本,和之前的低版本集成方式有所区别。这里记录下基本的集成步骤.
2.集成步骤
2.1安装tinymac包
npm install tinymce --save
2.2在node_modules管理包文件夹下找到tinymce的包,将skins拷贝到项目的assets下 文件夹路径层次为src/assets/skins。src为文件源文件根目录( ...
angular中使用promise
promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种，那么我们会想起它和XHR和$.ajax有啥区别呢？
习惯上js使用闭包或者回调来相应非同 ...
Angular ElementRef详解
一.为什么要用ElementRef
Angular 的口号是 - "一套框架，多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)"，即 Angular 是支持开发跨平台的应用，比如：Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。
为 ...
Angular 监听滚动条事件
一、引用fromEvent
import { fromEvent } from 'rxjs';
二、调用fromEvent
this.subscribeScoll = fromEvent(window, 'scroll')
.subscribe((event) => {
this.onWindowScroll();
});
onWindowScroll(){console.log(页面滚动了);}；
三、调用滚动函数
详细代码：
import { Component, OnInit } fr ...
angular 发布订阅
创建service
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/observable';
export class MessageService {
private subject = new Subject<any>();
send(message: any) {
this.subject.next(message);
}
get(): Observable<any> {
return this.subject.as ...
