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 ...
为什么angular library的build不能将assets静态资源打包进去（转）
Versions
Angular CLI: 6.0.7
Node: 9.3.0
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-------------------------------------------- ...
