最近一直在研究angular框架技术，采坑了很多，也学到了许多知识。就想着实践一把~~
基于angular+@angular/cli+@angular/router+@ngrx/store等技术实现开发的移动端聊天室angular版，实现了下拉刷新、长按右键菜单、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。
vue聊天室IM：https://blog.csdn.net/yanxinyun1990/article/details/89038427
技术架构：
- MVVM框架：angular8 + @angular/cli + @angular/router
- 状态管理：@ngrx/store + rxjs
- 地址路由：@angular/router
- 弹窗组件：wcPop
- 打包工具：webpack 2.0
- 环境配置：node.js + cnpm
- 图片预览：previewImage
- 轮播滑动：swiper
package.json安装依赖
{
"name": "angular-chatroom",
"aboutMe": "QQ：282310962 wx：xy190310",
"dependencies": {
"@angular/animations": "~8.0.1",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/platform-browser": "~8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"rxjs": "~6.4.0",
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.3",
"@angular/compiler-cli": "~8.0.1",
"@angular/language-service": "~8.0.1",
"@ngrx/store": "^8.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"@types/swiper": "^4.4.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^2.2.3",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"swiper": "^4.5.0",
}
}
/*
* angular主模块配置
*/
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module'
// 引入状态管理
import { StoreModule } from '@ngrx/store'
import { reducer } from '../ngrx'
// 载入公共组件（component）
import { HeaderComponent } from '../components/header'
import { TabBarComponent } from '../components/tabbar'
import { XtnScroll } from '../components/xtnScroll/Scroll'
import { NotFoundComponent } from '../components/404'
// 载入页面组件（view）
import { AppComponent } from './app.component'
import { LoginComponent } from '../views/auth/login'
import { RegisterComponent } from '../views/auth/register'
import { IndexComponent } from '../views/index'
import { ContactComponent } from '../views/contact'
import { UinfoComponent } from '../views/contact/uinfo'
import { UcenterComponent } from '../views/ucenter'
import { GroupChatComponent } from '../views/chat/group-chat'
import { GroupInfoComponent } from '../views/chat/group-info'
import { SingleChatComponent } from '../views/chat/single-chat'
@NgModule({
declarations: [
// 公共组件
HeaderComponent,
TabBarComponent,
XtnScroll,
NotFoundComponent,
// 页面组件
AppComponent,
LoginComponent,
RegisterComponent,
IndexComponent,
ContactComponent,
UinfoComponent,
UcenterComponent,
GroupChatComponent,
GroupInfoComponent,
SingleChatComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
StoreModule.forRoot(reducer)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
/*
* angular路由守卫（验证token）
*/
import { Router, CanActivate } from '@angular/router'
declare var wcPop: any;
export class Auth implements CanActivate{
constructor(private router: Router){}
canActivate(){
let that = this
// 验证token
const token: boolean = window.sessionStorage.getItem('token') ? true : false
if(!token){
// 未登录授权
/*
wcPop({
content: '还未登录授权！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function () {
that.router.navigate(['/login']);
}
});
*/
that.router.navigate(['/login']);
}
return token
}
}
/*
* @tmpl 登录模板
*/
import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'
// 引入状态管理
import { Store } from '@ngrx/store'
import { Observable } from 'rxjs'
import * as actions from '../../ngrx/action'
declare var wcPop: any;
import { getToken, checkTel } from '../../utils/common'
@Component({
selector: 'app-login',
template: `
<div class="wcim__lgregWrapper flexbox flex__direction-column">
<div class="wcim__lgregHeader flex1">
<div class="slogan">
<div class="logo"><img src="../../assets/img/logo.png" /></div>
<h2>Angualr-chatRoom聊天室</h2>
</div>
<div class="forms">
<form (ngSubmit)="handleSubmit()">
<ul class="clearfix">
<li class="flexbox flex-alignc"><i class="iconfont icon-shouji"></i><input class="iptxt flex1" [(ngModel)]="formField.tel" name="tel" type="tel" placeholder="请输入手机号" autoComplete="off" maxLength="11" /><em class="borLine"></em></li>
<li class="flexbox flex-alignc"><i class="iconfont icon-pass"></i><input class="iptxt flex1" [(ngModel)]="formField.pwd" name="pwd" type="password" placeholder="请输入密码" autoComplete="off" /><em class="borLine"></em></li>
</ul>
<div class="btns"><button class="wc__btn-primary btn__login" type="submit">登录</button></div>
<div class="lgregLink align-c clearfix">
<a routerLink="#">忘记密码</a>
<a routerLink="/register">注册用户</a>
</div>
</form>
</div>
</div>
<div class="wcim__lgregFooter">
<p class="version">Angular-chatRoom v1.0</p>
</div>
</div>
`,
styles: [``]
})
/*
* @tmpl 聊天编辑器核心js模块
*/
function surrounds() {
setTimeout(function () { //chrome
var sel = window.getSelection();
var anchorNode = sel.anchorNode;
if (!anchorNode) return;
if (sel.anchorNode === $(".J__wcEditor")[0] ||
(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) {
var range = sel.getRangeAt(0);
var p = document.createElement("p");
range.surroundContents(p);
range.selectNodeContents(p);
range.insertNode(document.createElement("br")); //chrome
sel.collapse(p, 0);
(function clearBr() {
var elems = [].slice.call($(".J__wcEditor")[0].children);
for (var i = 0, len = elems.length; i < len; i++) {
var el = elems[i];
if (el.tagName.toLowerCase() == "br") {
$(".J__wcEditor")[0].removeChild(el);
}
}
elems.length = 0;
})();
}
}, 10);
}
// 定义最后光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
getRange: function () {
if (_sel && _sel.rangeCount > 0) {
return _sel.getRangeAt(0);
}
},
addRange: function () {
if (_lastRange) {
_sel.removeAllRanges();
_sel.addRange(_lastRange);
}
}
}
// 消息处理
function isEmpty() {
// var html = $editor.html();
var html = $(".J__wcEditor").html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/ /ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}