2 |
9 |
--------------------------------------------------------------------------------
/src/app/animations/fade-in.ts:
--------------------------------------------------------------------------------
1 | import { trigger, style, transition, animate } from '@angular/animations';
2 |
3 | export const fadeIn = trigger('fadeIn', [
4 | transition("void => *", [
5 | style({ opacity: 0 }),
6 | animate(600, style({ opacity: 1 }))
7 | ]),
8 | transition("* => void", [
9 | animate(600, style({ opacity: 0 }))
10 | ])
11 | ]);
12 |
--------------------------------------------------------------------------------
/src/app/home/home.routes.ts:
--------------------------------------------------------------------------------
1 | import { RouterModule } from '@angular/router';
2 | import { HomeComponent } from './home.component';
3 |
4 | export const homeRoutes=[
5 | {
6 | path:'',
7 | component:HomeComponent,
8 | children:[{
9 | path:'',
10 | loadChildren:'../post/post.module#PostModule'
11 | }]
12 | }
13 | ];
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { enableProdMode } from '@angular/core';
3 | import { environment } from './environments/environment';
4 | import { AppModule } from './app/';
5 |
6 | if (environment.production) {
7 | enableProdMode();
8 | }
9 |
10 | platformBrowserDynamic().bootstrapModule(AppModule);
11 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | // Typings reference file, see links for more information
2 | // https://github.com/typings/typings
3 | // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
4 |
5 | declare var System: any;
6 | declare var require: NodeRequire;
7 | declare var tinymce: any;
8 | declare var JQuery: any;
9 | declare var jQuery: any;
10 | declare var $: any;
--------------------------------------------------------------------------------
/src/app/post/post-detail/post-detail.component.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
4 |
7 | 请注意，高德地图需要你自己去申请开发者key才能运行，我把架子都搭好了，你自己去高德的主页上申请一个免费的开发者key，修改index.html里面对应的注释，然后打开amap.component.ts里面的代码注释就可以看到地图了！
5 |
2 |
--------------------------------------------------------------------------------
/src/app/home/online-contact/online-contact.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-online-contact',
5 | templateUrl: './online-contact.component.html',
6 | styleUrls: ['./online-contact.component.scss']
7 | })
8 | export class OnlineContactComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/home/social-channel/social-channel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-social-channel',
5 | templateUrl: './social-channel.component.html',
6 | styleUrls: ['./social-channel.component.scss']
7 | })
8 | export class SocialChannelComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 |
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit} from '@angular/core';
2 | import { flyIn } from '../animations/fly-in';
3 |
4 | @Component({
5 | selector: 'app-home',
6 | templateUrl: './home.component.html',
7 | styleUrls: ['./home.component.scss'],
8 | animations: [
9 | flyIn
10 | ]
11 | })
12 | export class HomeComponent implements OnInit {
13 | constructor() {
14 | }
15 | ngOnInit() {
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/manage/comment-table/comment-worker.js:
--------------------------------------------------------------------------------
1 | onmessage = event => {
2 | if (event.data && "load" === event.data.action){
3 | //构造返回结果
4 | let rows = [];
5 | for(let i=1;i<100000;i++){
6 | rows.push({
7 | No:i,
8 | content:'内容'+i,
9 | user:'admin',
10 | date:new Date()
11 | });
12 | }
13 | postMessage({rows});
14 | }
15 | }
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "es2016"
9 | ],
10 | "module": "commonjs",
11 | "moduleResolution": "node",
12 | "outDir": "../dist/out-tsc-e2e",
13 | "sourceMap": true,
14 | "target": "es6",
15 | "typeRoots": [
16 | "../node_modules/@types"
17 | ]
18 | }
19 | }
--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
4 |
7 | {{ post.title }}
5 |{{ post.author }} {{ post.postTime }} 点击：{{ post.readTimes }} 评论：{{ post.commentTimes }}
6 |
9 |
12 |
10 |
11 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/manage/sys-param/sys-param.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit} from '@angular/core';
2 | import { flyIn } from '../../animations/fly-in';
3 |
4 | @Component({
5 | selector: 'app-sys-param',
6 | templateUrl: './sys-param.component.html',
7 | styleUrls: ['./sys-param.component.scss'],
8 | animations: [
9 | flyIn
10 | ]
11 | })
12 | export class SysParamComponent implements OnInit {
13 |
14 | constructor() { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/chart/chart.component.html:
--------------------------------------------------------------------------------
1 |
3 |
13 |
4 |
5 |
7 |
8 |
12 |
2 |
6 |
3 |
5 |
7 |
11 |
8 |
10 |
12 |
16 |
--------------------------------------------------------------------------------
/src/app/manage/manage-main/manage-main.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit} from '@angular/core';
2 | import { flyIn } from '../../animations/fly-in';
3 |
4 | @Component({
5 | selector: 'app-manage-main',
6 | templateUrl: './manage-main.component.html',
7 | styleUrls: ['./manage-main.component.scss'],
8 | animations: [
9 | flyIn
10 | ]
11 | })
12 | export class ManageMainComponent implements OnInit {
13 |
14 | constructor() { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/map/gaode-map/gaode-map.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { flyIn } from '../../animations/fly-in';
3 | import { AmapComponent } from './amap/amap.component';
4 |
5 | @Component({
6 | selector: 'app-gaode-map',
7 | templateUrl: './gaode-map.component.html',
8 | styleUrls: ['./gaode-map.component.scss'],
9 | animations:[flyIn]
10 | })
11 | export class GaodeMapComponent implements OnInit {
12 | constructor() { }
13 | ngOnInit() {
14 | }
15 | }
--------------------------------------------------------------------------------
/src/app/chart/echart-option.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
2 | import * as echarts from 'echarts';
3 |
4 | @Directive({
5 | selector: 'echart'
6 | })
7 | export class EChartOptionDirective1 implements OnInit {
8 | @Input('chartType') chartType: any;
9 |
10 | constructor(private el: ElementRef) {}
11 |
12 | public ngOnInit(): void {
13 | echarts.init(this.el.nativeElement).setOption(this.chartType);
14 | }
15 | }
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": false,
4 | "emitDecoratorMetadata": true,
5 | "experimentalDecorators": true,
6 | "lib": ["es6", "dom"],
7 | "mapRoot": "./",
8 | "module": "es6",
9 | "moduleResolution": "node",
10 | "outDir": "../dist/out-tsc",
11 | "sourceMap": true,
12 | "target": "es5",
13 | "typeRoots": [
14 | "../node_modules/@types"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/sitestat/sitestat.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-sitestat',
5 | templateUrl: './sitestat.component.html',
6 | styleUrls: ['./sitestat.component.scss']
7 | })
8 | export class SitestatComponent implements OnInit {
9 | public currentTime: Date = new Date();
10 |
11 | constructor() {
12 | window.setInterval(
13 | ()=>this.currentTime=new Date()
14 | ,1000);
15 | }
16 |
17 | ngOnInit() {
18 |
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/post/post-detail-main/post-detail-main.component.html:
--------------------------------------------------------------------------------
1 |
13 |
15 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/post/post.routes.ts:
--------------------------------------------------------------------------------
1 | import { RouterModule } from '@angular/router';
2 |
3 | import { PostDetailMainComponent } from './post-detail-main/post-detail-main.component';
4 | import { PostlistComponent } from './postlist/postlist.component';
5 |
6 | export const postRoutes=[
7 | {
8 | path:'',
9 | redirectTo:'page/1',
10 | pathMatch:'full'
11 | },
12 | {
13 | path:'page/:page',
14 | component:PostlistComponent
15 | },
16 | {
17 | path: 'postdetail/:postId',
18 | component: PostDetailMainComponent
19 | }
20 | ];
--------------------------------------------------------------------------------
/src/app/jsplumb-demo/jsplumb-demo.component.html:
--------------------------------------------------------------------------------
1 |
3 |
12 |
4 |
8 |
9 |
11 | 点击线上的标签文字可修改
2 |
3 |
--------------------------------------------------------------------------------
/src/app/user/user-profile/dynamic-form/form-control.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit ,Input} from '@angular/core';
2 | import { FormGroup } from '@angular/forms';
3 |
4 | import { FieldBase } from './form-field';
5 |
6 | @Component({
7 | selector: 'form-control',
8 | templateUrl: 'form-control.component.html'
9 | })
10 | export class FormControlComponent implements OnInit {
11 | @Input() field: FieldBase开始
4 | 提交申请
5 | 审批
6 | 结束
7 |
2 |
17 |
--------------------------------------------------------------------------------
/src/app/user/forget-pwd/forget-pwd.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Headers, Response } from '@angular/http';
3 | import { Observable } from 'rxjs/Observable';
4 | import 'rxjs/add/operator/map';
5 |
6 | @Injectable()
7 | export class ForgetPwdService {
8 | public validateEmailURL = "mock-data/forget-pwd-mock.json";
9 |
10 | constructor(public http: Http) { }
11 |
12 | public sendValidationEmail(email: string):Observable
3 |
16 |
4 |
6 | {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
5 |
7 |
15 | 访问总数：16742169
8 |文章总数：2458
9 |评论总数：7880
10 |会员总数：12772
11 |在线访客：187
12 |在线会员：2
13 |在线记录：268
14 |这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。
这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。这文章这么长。。。。
" 9 | } -------------------------------------------------------------------------------- /src/app/user/user-main/user-main.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | import { flyIn } from '../../animations/fly-in'; 3 | 4 | @Component({ 5 | selector: 'app-user-main', 6 | templateUrl: './user-main.component.html', 7 | styleUrls: ['./user-main.component.scss'], 8 | animations: [ 9 | flyIn 10 | ] 11 | }) 12 | export class UserMainComponent implements OnInit { 13 | 14 | constructor() { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | onActivate(component) { 20 | console.log("组件加载完成>"+component); 21 | } 22 | 23 | onDeactivate(component) { 24 | console.log("组件已经移除>"+component); 25 | } 26 | 27 | doFollow(){ 28 | alert("自己不能关注自己！"); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/comment/services/comment.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http, Response, Headers, RequestOptions,URLSearchParams } from '@angular/http'; 3 | 4 | import { Observable } from 'rxjs/Rx'; 5 | import 'rxjs/add/operator/map'; 6 | import 'rxjs/add/operator/catch'; 7 | 8 | import { Comment } from '../model/comment-model'; 9 | 10 | @Injectable() 11 | export class CommentService { 12 | public commentListURL = "mock-data/comment-mock.json"; 13 | 14 | constructor(public http: Http) { } 15 | 16 | public getCommentList(postId: number):Observable
2 |
3 |
--------------------------------------------------------------------------------
/src/app/manage/auth-guard.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
3 | import { UserLoginService } from '../user/user-login/user-login.service';
4 |
5 | @Injectable()
6 | export class AuthGuard implements CanActivate {
7 | constructor(
8 | private router: Router,
9 | public userLoginService: UserLoginService) {
10 |
11 | }
12 |
13 | canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean {
14 | //这里可以调用真实的服务进行验证
15 | // this.userLoginService.currentUser
16 | // .subscribe(
17 | // data => {
18 |
19 | // },
20 | // error => console.error(error)
21 | // );
22 | return true;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/map/gaode-map/gaode-map.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { GaodeMapComponent } from './gaode-map.component';
4 |
5 | describe('GaodeMapComponent', () => {
6 | let component: GaodeMapComponent;
7 | let fixture: ComponentFixture
4 |
12 |
5 |
7 |
9 | 
10 |
11 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/shared/post.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ModalModule } from 'ng2-bootstrap';
3 | import { PaginationModule } from 'ng2-bootstrap';
4 | import { SharedModule } from './shared.module';
5 |
6 | import { CommentTableComponent } from '../manage/comment-table/comment-table.component';
7 | import { PostTableComponent } from '../manage/post-table/post-table.component';
8 |
9 | @NgModule({
10 | imports:[
11 | SharedModule,
12 | ModalModule.forRoot(),
13 | PaginationModule.forRoot()
14 | ],
15 | declarations:[
16 | CommentTableComponent,
17 | PostTableComponent
18 | ],
19 | exports:[
20 | ModalModule,
21 | PaginationModule,
22 | CommentTableComponent,
23 | PostTableComponent
24 | ]
25 | })
26 |
27 | export class PostSharedModule {
28 |
29 | }
--------------------------------------------------------------------------------
/src/app/home/social-channel/social-channel.component.html:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/app/animations/fly-in.ts:
--------------------------------------------------------------------------------
1 | import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
2 |
3 | export const flyIn = trigger('flyIn', [
4 | state('in', style({transform: 'translateX(0)'})),
5 | transition('void => *', [
6 | animate(300, keyframes([
7 | style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
8 | style({opacity: 1, transform: 'translateX(25px)', offset: 0.3}),
9 | style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
10 | ]))
11 | ]),
12 | transition('* => void', [
13 | animate(300, keyframes([
14 | style({opacity: 1, transform: 'translateX(0)', offset: 0}),
15 | style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
16 | style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
17 | ]))
18 | ])
19 | ]);
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | /*global jasmine */
5 | const { SpecReporter } = require('jasmine-spec-reporter');
6 |
7 | exports.config = {
8 | allScriptsTimeout: 15000,
9 | specs: [
10 | './e2e/**/*.e2e-spec.ts'
11 | ],
12 | capabilities: {
13 | 'browserName': 'chrome'
14 | },
15 | directConnect: true,
16 | baseUrl: 'http://localhost:4200/',
17 | framework: 'jasmine',
18 | jasmineNodeOpts: {
19 | showColors: true,
20 | defaultTimeoutInterval: 15000,
21 | print: function() {}
22 | },
23 | beforeLaunch: function() {
24 | require('ts-node').register({
25 | project: 'e2e'
26 | });
27 | },
28 | onPrepare() {
29 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
30 | }
31 | };
32 |
--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '../shared/shared.module';
3 | import { RouterModule } from '@angular/router';
4 | import { HomeComponent } from './home.component';
5 | import { SocialChannelComponent } from './social-channel/social-channel.component';
6 | import { SitestatComponent } from '../sitestat/sitestat.component';
7 | import { OnlineContactComponent } from './online-contact/online-contact.component';
8 |
9 | import {homeRoutes} from './home.routes';
10 |
11 | @NgModule({
12 | imports: [
13 | SharedModule,
14 | RouterModule.forChild(homeRoutes)
15 | ],
16 | exports: [],
17 | declarations: [
18 | HomeComponent,
19 | SocialChannelComponent,
20 | SitestatComponent,
21 | OnlineContactComponent
22 | ],
23 | providers: [],
24 | })
25 | export class HomeModule { }
26 |
--------------------------------------------------------------------------------
/src/app/user/user-main/user-main.component.html:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/app/chart/chart.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 | import { DebugElement } from '@angular/core';
5 |
6 | import { ChartComponent } from './chart.component';
7 |
8 | describe('ChartComponent', () => {
9 | // let component: ChartComponent;
10 | // let fixture: ComponentFixture
3 |
15 |
4 |
6 |
7 |
13 |
14 |
2 |
25 |
--------------------------------------------------------------------------------
/src/assets/i18n/zh.json:
--------------------------------------------------------------------------------
1 | {
2 | "app": {
3 | "articles": "动态",
4 | "welcome": "欢迎你",
5 | "logout": "退出",
6 | "login": "登录",
7 | "register": "注册",
8 | "doc": "官方文档",
9 | "console": "管理后台"
10 | },
11 | "post": {
12 | "publish": "发布文章"
13 | },
14 | "userRegister":{
15 | "userSignUp":"用户注册",
16 | "userName":"用户名：",
17 | "userName-placeholder":"用户名4到32个字符",
18 | "nickName":"昵称：",
19 | "nickName-placeholder":"昵称2到32个字符",
20 | "email":"常用邮箱：",
21 | "email-placeholder":"常用邮箱，验证后才能登录",
22 | "notice":"【如果您未在收件箱收到验证邮件，请到垃圾箱查收。】",
23 | "password":"密码：",
24 | "password-placeholder":"密码，至少8位",
25 | "repeat-pwd":"重复密码：",
26 | "repeat-pwd-placeholder":"重复密码，两次输入必须一致",
27 | "signUp":"注册"
28 | },
29 | "userLogin":{
30 | "userLogin":"用户登录"
31 | },
32 | "search": "搜索",
33 | "submit": "提交",
34 | "firstPage": "首页",
35 | "lastPage": "末页",
36 | "previousPage": "上一页",
37 | "nextPage": "下一页"
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/user/forget-pwd/forget-pwd.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { ForgetPwdService } from './forget-pwd.service';
4 | import { User } from '../model/user-model';
5 | import { fadeIn } from '../../animations/fade-in';
6 |
7 | @Component({
8 | selector: 'app-forget-pwd',
9 | templateUrl: './forget-pwd.component.html',
10 | styleUrls: ['./forget-pwd.component.scss'],
11 | animations: [ fadeIn ]
12 | })
13 | export class ForgetPwdComponent implements OnInit {
14 | public user: User = new User();
15 | public message: string;
16 | public messgeType: string;
17 | constructor(
18 | public forgetPwdService: ForgetPwdService
19 | ) { }
20 |
21 | ngOnInit() {
22 |
23 | }
24 |
25 | public sendValidationEmail():void{
26 | this.forgetPwdService.sendValidationEmail(this.user.email)
27 | .subscribe(
28 | data => {
29 | this.message = data.message;
30 | this.messgeType = "success";
31 | },
32 | error => {
33 | this.message = error.messge;
34 | this.messgeType = "danger";
35 | }
36 | );
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/post/post-detail/post-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router, Params } from '@angular/router';
3 |
4 | import { Post } from '../model/post-model';
5 | import { PostDetailService } from './services/post-detail.service';
6 |
7 | @Component({
8 | selector: 'app-post-detail',
9 | templateUrl: './post-detail.component.html',
10 | styleUrls: ['./post-detail.component.scss']
11 | })
12 | export class PostDetailComponent implements OnInit {
13 | public post: Post = new Post();
14 |
15 | constructor(public postDetailService: PostDetailService,
16 | public activeRoute: ActivatedRoute
17 | ) {
18 | console.log(this.postDetailService);
19 | }
20 |
21 | ngOnInit() {
22 | this.activeRoute.params.subscribe(
23 | params =>this.getPost(params["postId"])
24 | );
25 | }
26 |
27 | public getPost(id:number){
28 | this.postDetailService
29 | .getPost(id)
30 | .subscribe(
31 | data => this.post = data,
32 | error => console.error(error)
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/comment/add-comment/add-comment.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { ActivatedRoute, Router, Params } from '@angular/router';
3 |
4 | import { CommentService } from '../services/comment.service';
5 | import { Comment } from '../model/comment-model';
6 |
7 | @Component({
8 | selector: 'app-add-comment',
9 | templateUrl: './add-comment.component.html',
10 | styleUrls: ['./add-comment.component.scss']
11 | })
12 | export class AddCommentComponent implements OnInit {
13 | public comments: Array
3 |
24 |
4 |
23 |
5 |
14 |
6 |
12 |
13 |
15 |
22 |
16 |
21 | Loading...
2 |
14 |
--------------------------------------------------------------------------------
/src/app/manage/manage.routes.ts:
--------------------------------------------------------------------------------
1 | import { ManageMainComponent } from './manage-main/manage-main.component';
2 | import { PostTableComponent } from './post-table/post-table.component';
3 | import { CommentTableComponent } from './comment-table/comment-table.component';
4 | import { UserTableComponent } from './user-table/user-table.component';
5 | import { UserProfileComponent } from '../user/user-profile/user-profile.component';
6 | import { SysParamComponent } from './sys-param/sys-param.component';
7 | import { AuthGuard } from './auth-guard';
8 |
9 | export const manageRoutes = [
10 | {
11 | path:'',
12 | component:ManageMainComponent,
13 | canActivate: [AuthGuard],
14 | children: [
15 | { path: '',redirectTo:'posttable/page/1',pathMatch:'full'},
16 | { path: 'posttable/page/:page', component: PostTableComponent },
17 | { path: 'commenttable/page/:page', component: CommentTableComponent },
18 | { path: 'usertable/page/:page', component: UserTableComponent },
19 | { path: 'usertable/edituser/:userId', component: UserProfileComponent },
20 | { path: 'usertable/newuser', component: UserProfileComponent },
21 | { path: 'sysparam', component: SysParamComponent },
22 | { path: '**', redirectTo:'posttable/page/1' }
23 | ]
24 | }
25 | ];
--------------------------------------------------------------------------------
/src/app/user/user-register/directives/equal-validator.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive,Input } from '@angular/core';
2 | import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
3 |
4 |
5 | @Directive({
6 | selector: '[validateEqual]',
7 | providers: [
8 | { provide: NG_VALIDATORS, useExisting: EqualValidator, multi: true }
9 | ]
10 | })
11 | export class EqualValidator implements Validator {
12 | @Input()validateEqual: string;
13 | @Input()reverse: boolean;
14 | constructor() { }
15 |
16 | validate(control: AbstractControl): { [key: string]: any } {
17 | //当前控件的值
18 | let selfValue = control.value;
19 |
20 | // 需要比较的控件，根据属性名称获取
21 | let targetControl = control.root.get(this.validateEqual);
22 | // 值不相等
23 | if (targetControl && selfValue !== targetControl.value ) {
24 | if(!this.reverse){
25 | return {
26 | validateEqual: false
27 | }
28 | }else{
29 | targetControl.setErrors({
30 | validateEqual: false
31 | })
32 | }
33 | }else{//值相等，清空错误信息
34 | targetControl.setErrors(null);
35 | }
36 | return null;
37 | }
38 | }
--------------------------------------------------------------------------------
/src/app/post/write-post/write-post.component.html:
--------------------------------------------------------------------------------
1 |
3 |
13 |
4 |
6 | QQ群-请勿加多个
5 |
7 | Angular 1区:286047042（满）
8 | Angular 2区:139357161（满）
9 | Angular 3区:473129930（将满）
10 | Angular 4区:483016484（空）
11 |
12 |
2 |
23 |
--------------------------------------------------------------------------------
/src/assets/i18n/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "app":{
3 | "welcome":"Welcome",
4 | "logout":"Logout",
5 | "login":"Login",
6 | "register":"Register",
7 | "articles":"Articles",
8 | "doc":"Document",
9 | "console":"Console"
10 | },
11 | "post":{
12 | "publish":"publish"
13 | },
14 | "userRegister":{
15 | "userSignUp":"User Sign Up",
16 | "userName":"UserName:",
17 | "userName-placeholder":"4-32 characters",
18 | "nickName":"NickName:",
19 | "nickName-placeholder":"2-32 characters",
20 | "email":"Email:",
21 | "email-placeholder":"Frequently used mailboxes, sign in after verification.",
22 | "notice":"If you do not receive a verification email in your inbox, check your trash.",
23 | "password":"Password:",
24 | "password-placeholder":"Password, at least 8 characters.",
25 | "repeat-pwd":"Repeat PWD:",
26 | "repeat-pwd-placeholder":"Repeat password, two inputs must be consistent.",
27 | "signUp":"SignUp"
28 | },
29 | "userLogin":{
30 | "userLogin":"User Login"
31 | },
32 | "search":"search",
33 | "submit":"Submit",
34 | "firstPage":"First",
35 | "lastPage":"Last",
36 | "previousPage":"Previous",
37 | "nextPage":"Next"
38 | }
--------------------------------------------------------------------------------
/src/app/map/gaode-map/amap/amap.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | moduleId: module.id,
5 | selector: 'amap',
6 | templateUrl: 'amap.component.html',
7 | styleUrls: ['amap.component.scss']
8 | })
9 | export class AmapComponent implements OnInit {
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | // let map = new AMap.Map('gaodemap-container');
14 | // map.plugin('AMap.Geolocation', () => {
15 | // let geolocation = new AMap.Geolocation({
16 | // enableHighAccuracy: true,//是否使用高精度定位，默认:true
17 | // timeout: 10000, //超过10秒后停止定位，默认：无穷大
18 | // maximumAge: 0, //定位结果缓存0毫秒，默认：0
19 | // convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
20 | // showButton: true, //显示定位按钮，默认：true
21 | // buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
22 | // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
23 | // showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
24 | // showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
25 | // panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
26 | // zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
27 | // });
28 | // map.addControl(geolocation);
29 | // });
30 | }
31 | }
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | files: [
19 | { pattern: './src/test.ts', watched: false }
20 | ],
21 | preprocessors: {
22 | './src/test.ts': ['@angular/cli']
23 | },
24 | mime: {
25 | 'text/x-typescript': ['ts','tsx']
26 | },
27 | coverageIstanbulReporter: {
28 | reports: [ 'html', 'lcovonly' ],
29 | fixWebpackSourcePaths: true
30 | },
31 | angularCli: {
32 | config: './.angular-cli.json',
33 | environment: 'dev'
34 | },
35 | reporters: config.angularCli && config.angularCli.codeCoverage
36 | ? ['progress', 'coverage-istanbul']
37 | : ['progress', 'kjhtml'],
38 | port: 9876,
39 | colors: true,
40 | logLevel: config.LOG_INFO,
41 | autoWatch: true,
42 | browsers: ['Chrome'],
43 | singleRun: false
44 | });
45 | };
46 |
--------------------------------------------------------------------------------
/src/app/user/forget-pwd/forget-pwd.component.html:
--------------------------------------------------------------------------------
1 |
3 |
22 |
4 |
20 |
21 |
2 |
25 |
--------------------------------------------------------------------------------
/src/app/post/post.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule} from '../shared/shared.module';
3 | import { RouterModule } from '@angular/router';
4 | import { PaginationModule } from 'ng2-bootstrap';
5 |
6 | import { PostDetailComponent } from './post-detail/post-detail.component';
7 | import { PostlistComponent } from './postlist/postlist.component';
8 | import { PostlistService } from './postlist/services/postlist.service';
9 | import { PostDetailService } from './post-detail/services/post-detail.service';
10 | import { PostDetailMainComponent } from './post-detail-main/post-detail-main.component';
11 | import { AddCommentComponent } from '../comment/add-comment/add-comment.component';
12 | import { CommentService } from '../comment/services/comment.service';
13 | import { BooleanPipe } from '../utils/boolean-pipe';
14 |
15 | import {postRoutes} from './post.routes';
16 |
17 | @NgModule({
18 | imports: [
19 | SharedModule,
20 | RouterModule,
21 | PaginationModule.forRoot(),
22 | RouterModule.forChild(postRoutes)
23 | ],
24 | exports: [BooleanPipe],
25 | declarations: [
26 | PostlistComponent,
27 | PostDetailMainComponent,
28 | PostDetailComponent,
29 | AddCommentComponent,
30 | BooleanPipe
31 | ],
32 | providers: [
33 | PostlistService,
34 | PostDetailService,
35 | CommentService
36 | ]
37 | })
38 | export class PostModule { }
39 |
--------------------------------------------------------------------------------
/src/app/post/postlist/services/postlist.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Response, Headers, RequestOptions,URLSearchParams } from '@angular/http';
3 | import { Observable } from 'rxjs/Rx';
4 |
5 | import 'rxjs/add/operator/map';
6 | import 'rxjs/add/operator/catch';
7 |
8 | import { Post } from '../../model/post-model';
9 |
10 | @Injectable()
11 | export class PostlistService {
12 | public postListURL = 'mock-data/postlist-mock.json';
13 | public postListSearchURL = 'mock-data/postlist-search-mock.json';
14 |
15 | constructor(public http:Http) { }
16 |
17 | public getPostList(searchText: string,page:number=1):Observable
3 |
24 |
4 |
6 | 找回密码
5 |
7 |
21 |
23 | {{message}}
22 |
2 |
14 |
46 |
--------------------------------------------------------------------------------
/src/app/post/postlist/postlist.component.html:
--------------------------------------------------------------------------------
1 |
15 |
45 |
16 |
44 |
17 |
18 |
19 |
37 |
38 | | 序号 | 21 |内容 | 22 |用户 | 23 |时间 | 24 |操作 | 25 |
|---|---|---|---|---|
| 1 | 30 |这是一条不合法的评论内容，需要删除掉。 | 31 |大漠穷秋 | 32 |2016-11-27 | 33 |删除 | 34 |
2 |
19 |
35 |
--------------------------------------------------------------------------------
/src/electron/main.js:
--------------------------------------------------------------------------------
1 | const electron = require('electron')
2 | // Module to control application life.
3 | const app = electron.app
4 | // Module to create native browser window.
5 | const BrowserWindow = electron.BrowserWindow
6 |
7 | const path = require('path')
8 | const url = require('url')
9 |
10 | // //hide
11 | // var remote = require('electron').remote;
12 | // var Menu = remote.Menu;
13 | // var template = [];
14 | // var menu = Menu.buildFromTemplate(template);
15 |
16 | // Menu.setApplicationMenu(menu);
17 |
18 | // Keep a global reference of the window object, if you don't, the window will
19 | // be closed automatically when the JavaScript object is garbage collected.
20 | var mainWindow
21 |
22 | function createWindow () {
23 | // Create the browser window.
24 | mainWindow = new BrowserWindow({width: 1200, height: 900})
25 |
26 | // and load the index.html of the app.
27 | mainWindow.loadURL(url.format({
28 | pathname: path.join(__dirname, 'index.html'),
29 | protocol: 'file:',
30 | slashes: true
31 | }))
32 |
33 | // Open the DevTools.
34 | // mainWindow.webContents.openDevTools()
35 |
36 | // Emitted when the window is closed.
37 | mainWindow.on('closed', function () {
38 | // Dereference the window object, usually you would store windows
39 | // in an array if your app supports multi windows, this is the time
40 | // when you should delete the corresponding element.
41 | mainWindow = null
42 | })
43 | }
44 |
45 | // This method will be called when Electron has finished
46 | // initialization and is ready to create browser windows.
47 | // Some APIs can only be used after this event occurs.
48 | app.on('ready', createWindow)
49 |
50 | // Quit when all windows are closed.
51 | app.on('window-all-closed', function () {
52 | // On OS X it is common for applications and their menu bar
53 | // to stay active until the user quits explicitly with Cmd + Q
54 | if (process.platform !== 'darwin') {
55 | app.quit()
56 | }
57 | })
58 |
59 | app.on('activate', function () {
60 | // On OS X it's common to re-create a window in the app when the
61 | // dock icon is clicked and there are no other windows open.
62 | if (mainWindow === null) {
63 | createWindow()
64 | }
65 | })
66 |
67 | // In this file you can include the rest of your app's specific main process
68 | // code. You can also put them in separate files and require them here.
69 |
--------------------------------------------------------------------------------
/src/app/post/postlist/postlist.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl } from '@angular/forms';
3 | import { ActivatedRoute, Router, Params } from '@angular/router';
4 | import { Observable } from 'rxjs/Observable';
5 | import { Subject } from 'rxjs/Subject';
6 | import { PostlistService } from './services/postlist.service';
7 | import { Post } from '../model/post-model';
8 |
9 | @Component({
10 | selector: 'app-postlist',
11 | templateUrl: './postlist.component.html',
12 | styleUrls: ['./postlist.component.scss']
13 | })
14 | export class PostlistComponent implements OnInit {
15 | public maxSize:number = 5;
16 | public itemsPerPage:number=5;
17 | public totalItems:number;
18 | //不要手动对这个属性进行赋值，它是和分页工具条自动绑定的
19 | public currentPage:number = 1;
20 | public numPages
21 |
22 | public searchText:string;
23 | public searchTextStream:Subject
20 |
34 |
21 |
33 |
22 |
31 | 23 | {{post.title}} 24 |
25 |26 | {{post.likedTimes}} 27 | {{post.commentTimes}} 28 | {{post.readTimes}} {{post.userName }} {{post.postTime}} 29 |
30 |
2 |
42 |
--------------------------------------------------------------------------------
/src/app/jsplumb-demo/jsplumb-demo.component.css:
--------------------------------------------------------------------------------
1 | .flowchart-demo{
2 | min-height: 800px;
3 | }
4 | .flowchart-demo .window {
5 | border: 1px solid #346789;
6 | box-shadow: 2px 2px 19px #aaa;
7 | -o-box-shadow: 2px 2px 19px #aaa;
8 | -webkit-box-shadow: 2px 2px 19px #aaa;
9 | -moz-box-shadow: 2px 2px 19px #aaa;
10 | -moz-border-radius: 0.5em;
11 | border-radius: 0.5em;
12 | opacity: 0.8;
13 | width: 80px;
14 | height: 80px;
15 | line-height: 80px;
16 | cursor: pointer;
17 | text-align: center;
18 | z-index: 20;
19 | position: absolute;
20 | background-color: #eeeeef;
21 | color: black;
22 | font-family: helvetica, sans-serif;
23 | padding: 0.5em;
24 | font-size: 0.9em;
25 | -webkit-transition: -webkit-box-shadow 0.15s ease-in;
26 | -moz-transition: -moz-box-shadow 0.15s ease-in;
27 | -o-transition: -o-box-shadow 0.15s ease-in;
28 | transition: box-shadow 0.15s ease-in;
29 | }
30 |
31 | .flowchart-demo .window:hover {
32 | box-shadow: 2px 2px 19px #444;
33 | -o-box-shadow: 2px 2px 19px #444;
34 | -webkit-box-shadow: 2px 2px 19px #444;
35 | -moz-box-shadow: 2px 2px 19px #444;
36 | opacity: 0.6;
37 | }
38 |
39 | .flowchart-demo .active {
40 | border: 1px dotted green;
41 | }
42 |
43 | .flowchart-demo .hover {
44 | border: 1px dotted red;
45 | }
46 |
47 | #flowchartWindow1 {
48 | top: 34em;
49 | left: 5em;
50 | }
51 |
52 | #flowchartWindow2 {
53 | top: 7em;
54 | left: 36em;
55 | }
56 |
57 | #flowchartWindow3 {
58 | top: 27em;
59 | left: 48em;
60 | }
61 |
62 | #flowchartWindow4 {
63 | top: 23em;
64 | left: 22em;
65 | }
66 |
67 | .flowchart-demo .jtk-connector {
68 | z-index: 4;
69 | }
70 |
71 | .flowchart-demo .jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
72 | z-index: 21;
73 | cursor: pointer;
74 | }
75 |
76 | .flowchart-demo .aLabel {
77 | background-color: white;
78 | padding: 0.4em;
79 | font: 12px sans-serif;
80 | color: #444;
81 | z-index: 21;
82 | border: 1px dotted gray;
83 | opacity: 0.8;
84 | cursor: pointer;
85 | }
86 |
87 | .flowchart-demo .aLabel.jtk-hover {
88 | background-color: #5C96BC;
89 | color: white;
90 | border: 1px solid white;
91 | }
92 |
93 | .window.jtk-connected {
94 | border: 1px solid green;
95 | }
96 |
97 | .jtk-drag {
98 | outline: 4px solid pink !important;
99 | }
100 |
101 | path, .jtk-endpoint {
102 | cursor: pointer;
103 | }
104 |
105 | .jtk-overlay {
106 | background-color:transparent;
107 | }
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/set';
35 |
36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
37 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
38 |
39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
41 |
42 |
43 | /** Evergreen browsers require these. **/
44 | import 'core-js/es6/reflect';
45 | import 'core-js/es7/reflect';
46 |
47 |
48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/
49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50 |
51 |
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4 | import { RouterModule } from '@angular/router';
5 | import { HttpModule,JsonpModule ,Http} from '@angular/http';
6 | import { ReactiveFormsModule } from '@angular/forms';
7 | import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
8 | import { ToastModule } from 'ng2-toastr/ng2-toastr';
9 |
10 | import { SharedModule } from './shared/shared.module';
11 | import { AppComponent } from './app.component';
12 | import { UserLoginService } from './user/user-login/user-login.service';
13 | import { ForgetPwdComponent } from './user/forget-pwd/forget-pwd.component';
14 | import { UserRegisterComponent } from './user/user-register/user-register.component';
15 | import { UserRegisterService } from './user/user-register/user-register.service';
16 | import { ForgetPwdService } from './user/forget-pwd/forget-pwd.service';
17 |
18 | import { EqualValidator } from './user/user-register/directives/equal-validator.directive';
19 |
20 | import { ChartComponent } from './chart/chart.component';
21 | import { EChartOptionDirective1 } from './chart/echart-option.directive';
22 | import { UseJqueryComponent } from './use-jquery/use-jquery.component';
23 | import { GaodeMapComponent } from './map/gaode-map/gaode-map.component';
24 | import { AmapComponent } from './map/gaode-map/amap/amap.component';
25 | import { JsplumbDemoComponent } from './jsplumb-demo/jsplumb-demo.component';
26 | import {appRoutes} from './app.routes';
27 |
28 | export function createTranslateLoader(http: Http) {
29 | return new TranslateStaticLoader(http, './assets/i18n', '.json');
30 | }
31 |
32 |
33 | @NgModule({
34 | declarations: [
35 | AppComponent,
36 | ForgetPwdComponent,
37 | UserRegisterComponent,
38 | EqualValidator,
39 | EChartOptionDirective1,
40 | ChartComponent,
41 | UseJqueryComponent,
42 | AmapComponent,
43 | GaodeMapComponent,
44 | JsplumbDemoComponent
45 | ],
46 | imports: [
47 | BrowserModule,
48 | BrowserAnimationsModule,
49 | RouterModule,
50 | ReactiveFormsModule,
51 | HttpModule,
52 | JsonpModule,
53 | TranslateModule.forRoot({
54 | provide: TranslateLoader,
55 | useFactory: (createTranslateLoader),
56 | deps: [Http]
57 | }),
58 | SharedModule,
59 | ToastModule.forRoot(),
60 | RouterModule.forRoot(appRoutes)
61 | ],
62 | providers: [
63 | UserLoginService,
64 | UserRegisterService,
65 | ForgetPwdService
66 | ],
67 | bootstrap: [AppComponent]
68 | })
69 | export class AppModule {
70 |
71 | }
72 |
--------------------------------------------------------------------------------
/src/assets/skins/lightgray/content.inline.min.css:
--------------------------------------------------------------------------------
1 | .mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}hr{cursor:default}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid #F00;cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#3399ff !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2d8ac7}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #7ACAFF}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2d8ac7}.mce-resize-bar-dragging{background-color:blue;opacity:.25;filter:alpha(opacity=25);zoom:1}
--------------------------------------------------------------------------------
/src/assets/fonts/icomoon/icomoon/demo-files/demo.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 0;
3 | margin: 0;
4 | font-family: sans-serif;
5 | font-size: 1em;
6 | line-height: 1.5;
7 | color: #555;
8 | background: #fff;
9 | }
10 | h1 {
11 | font-size: 1.5em;
12 | font-weight: normal;
13 | }
14 | small {
15 | font-size: .66666667em;
16 | }
17 | a {
18 | color: #e74c3c;
19 | text-decoration: none;
20 | }
21 | a:hover, a:focus {
22 | box-shadow: 0 1px #e74c3c;
23 | }
24 | .bshadow0, input {
25 | box-shadow: inset 0 -2px #e7e7e7;
26 | }
27 | input:hover {
28 | box-shadow: inset 0 -2px #ccc;
29 | }
30 | input, fieldset {
31 | font-size: 1em;
32 | margin: 0;
33 | padding: 0;
34 | border: 0;
35 | }
36 | input {
37 | color: inherit;
38 | line-height: 1.5;
39 | height: 1.5em;
40 | padding: .25em 0;
41 | }
42 | input:focus {
43 | outline: none;
44 | box-shadow: inset 0 -2px #449fdb;
45 | }
46 | .glyph {
47 | font-size: 16px;
48 | width: 15em;
49 | padding-bottom: 1em;
50 | margin-right: 4em;
51 | margin-bottom: 1em;
52 | float: left;
53 | overflow: hidden;
54 | }
55 | .liga {
56 | width: 80%;
57 | width: calc(100% - 2.5em);
58 | }
59 | .talign-right {
60 | text-align: right;
61 | }
62 | .talign-center {
63 | text-align: center;
64 | }
65 | .bgc1 {
66 | background: #f1f1f1;
67 | }
68 | .fgc1 {
69 | color: #999;
70 | }
71 | .fgc0 {
72 | color: #000;
73 | }
74 | p {
75 | margin-top: 1em;
76 | margin-bottom: 1em;
77 | }
78 | .mvm {
79 | margin-top: .75em;
80 | margin-bottom: .75em;
81 | }
82 | .mtn {
83 | margin-top: 0;
84 | }
85 | .mtl, .mal {
86 | margin-top: 1.5em;
87 | }
88 | .mbl, .mal {
89 | margin-bottom: 1.5em;
90 | }
91 | .mal, .mhl {
92 | margin-left: 1.5em;
93 | margin-right: 1.5em;
94 | }
95 | .mhmm {
96 | margin-left: 1em;
97 | margin-right: 1em;
98 | }
99 | .mls {
100 | margin-left: .25em;
101 | }
102 | .ptl {
103 | padding-top: 1.5em;
104 | }
105 | .pbs, .pvs {
106 | padding-bottom: .25em;
107 | }
108 | .pvs, .pts {
109 | padding-top: .25em;
110 | }
111 | .unit {
112 | float: left;
113 | }
114 | .unitRight {
115 | float: right;
116 | }
117 | .size1of2 {
118 | width: 50%;
119 | }
120 | .size1of1 {
121 | width: 100%;
122 | }
123 | .clearfix:before, .clearfix:after {
124 | content: " ";
125 | display: table;
126 | }
127 | .clearfix:after {
128 | clear: both;
129 | }
130 | .hidden-true {
131 | display: none;
132 | }
133 | .textbox0 {
134 | width: 3em;
135 | background: #f1f1f1;
136 | padding: .25em .5em;
137 | line-height: 1.5;
138 | height: 1.5em;
139 | }
140 | #testDrive {
141 | display: block;
142 | padding-top: 24px;
143 | line-height: 1.5;
144 | }
145 | .fs0 {
146 | font-size: 16px;
147 | }
148 | .fs1 {
149 | font-size: 14px;
150 | }
151 | .fs2 {
152 | font-size: 24px;
153 | }
154 |
--------------------------------------------------------------------------------
/src/app/manage/post-table/post-table.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input} from '@angular/core';
2 | import { flyIn } from '../../animations/fly-in';
3 | import { ActivatedRoute, Router, UrlTree, PRIMARY_OUTLET, UrlSegmentGroup, UrlSegment } from '@angular/router';
4 | import { PostTableService } from './services/post-table.service';
5 |
6 | @Component({
7 | selector: 'app-post-table',
8 | templateUrl: './post-table.component.html',
9 | styleUrls: ['./post-table.component.scss'],
10 | animations: [
11 | flyIn
12 | ]
13 | })
14 | export class PostTableComponent implements OnInit {
15 | @Input() dataURL:string="mock-data/postlist-mock.json";
16 |
17 | public postList:Array
3 |
41 |
4 |
6 | {{'userLogin.userLogin' | translate}}
5 |
7 |
39 |
40 |
2 |
19 |
51 |
52 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostListener, ElementRef, Renderer, ViewContainerRef } from '@angular/core';
2 | import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot } from '@angular/router';
3 | import { TranslateService } from 'ng2-translate';
4 | import { UserLoginService } from './user/user-login/user-login.service';
5 | import { UserRegisterService } from './user/user-register/user-register.service';
6 | import { User } from './user/model/user-model';
7 | import 'rxjs/add/operator/merge';
8 |
9 | import { ToastsManager } from 'ng2-toastr/ng2-toastr';
10 |
11 | @Component({
12 | selector: 'app-root',
13 | templateUrl: './app.component.html',
14 | styleUrls: ['./app.component.scss']
15 | })
16 | export class AppComponent {
17 | public currentUser: User;
18 | private globalClickCallbackFn: Function;
19 | private loginSuccessCallbackFn: Function;
20 |
21 | constructor(
22 | public elementRef: ElementRef,
23 | public renderer: Renderer,
24 | public router: Router,
25 | public activatedRoute: ActivatedRoute,
26 | public translate: TranslateService,
27 | public userLoginService: UserLoginService,
28 | public userRegisterService: UserRegisterService,
29 | public toastr: ToastsManager,
30 | public vcr: ViewContainerRef
31 | ) {
32 | this.toastr.setRootViewContainerRef(vcr);
33 | }
34 |
35 | ngOnInit() {
36 | this.globalClickCallbackFn = this.renderer.listen(this.elementRef.nativeElement, 'click', (event: any) => {
37 | console.log("全局监听点击事件>" + event);
38 | });
39 |
40 | this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
41 |
42 | this.userLoginService.currentUser
43 | .merge(this.userRegisterService.currentUser)
44 | .subscribe(
45 | data => {
46 | this.currentUser = data;
47 | let activatedRouteSnapshot: ActivatedRouteSnapshot = this.activatedRoute.snapshot;
48 | let routerState: RouterState = this.router.routerState;
49 | let routerStateSnapshot: RouterStateSnapshot = routerState.snapshot;
50 |
51 | console.log(activatedRouteSnapshot);
52 | console.log(routerState);
53 | console.log(routerStateSnapshot);
54 |
55 | //如果是从/login这个URL进行的登录，跳转到首页，否则什么都不做
56 | if (routerStateSnapshot.url.indexOf("/login") != -1) {
57 | this.router.navigateByUrl("/home");
58 | }
59 | },
60 | error => console.error(error)
61 | );
62 |
63 | this.translate.addLangs(["zh", "en"]);
64 | this.translate.setDefaultLang('zh');
65 |
66 | const browserLang = this.translate.getBrowserLang();
67 | console.log("检测到的浏览器语言>" + browserLang);
68 | this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
69 | }
70 |
71 | ngOnDestroy() {
72 | if (this.globalClickCallbackFn) {
73 | this.globalClickCallbackFn();
74 | }
75 | }
76 |
77 | toggle(button: any) {
78 | console.log(button);
79 | }
80 |
81 | public doLogout(): void {
82 | this.userLoginService.logout();
83 | this.toastr.success('退出成功！','系统提示');
84 | this.router.navigateByUrl("");
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/assets/css/prism.css:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
2 | /**
3 | * prism.js default theme for JavaScript, CSS and HTML
4 | * Based on dabblet (http://dabblet.com)
5 | * @author Lea Verou
6 | */
7 |
8 | code[class*="language-"],
9 | pre[class*="language-"] {
10 | color: black;
11 | text-shadow: 0 1px white;
12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13 | direction: ltr;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 |
21 | -moz-tab-size: 4;
22 | -o-tab-size: 4;
23 | tab-size: 4;
24 |
25 | -webkit-hyphens: none;
26 | -moz-hyphens: none;
27 | -ms-hyphens: none;
28 | hyphens: none;
29 | }
30 |
31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33 | text-shadow: none;
34 | background: #b3d4fc;
35 | }
36 |
37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
39 | text-shadow: none;
40 | background: #b3d4fc;
41 | }
42 |
43 | @media print {
44 | code[class*="language-"],
45 | pre[class*="language-"] {
46 | text-shadow: none;
47 | }
48 | }
49 |
50 | /* Code blocks */
51 | pre[class*="language-"] {
52 | padding: 1em;
53 | margin: .5em 0;
54 | overflow: auto;
55 | }
56 |
57 | :not(pre) > code[class*="language-"],
58 | pre[class*="language-"] {
59 | background: #f5f2f0;
60 | }
61 |
62 | /* Inline code */
63 | :not(pre) > code[class*="language-"] {
64 | padding: .1em;
65 | border-radius: .3em;
66 | }
67 |
68 | .token.comment,
69 | .token.prolog,
70 | .token.doctype,
71 | .token.cdata {
72 | color: slategray;
73 | }
74 |
75 | .token.punctuation {
76 | color: #999;
77 | }
78 |
79 | .namespace {
80 | opacity: .7;
81 | }
82 |
83 | .token.property,
84 | .token.tag,
85 | .token.boolean,
86 | .token.number,
87 | .token.constant,
88 | .token.symbol,
89 | .token.deleted {
90 | color: #905;
91 | }
92 |
93 | .token.selector,
94 | .token.attr-name,
95 | .token.string,
96 | .token.char,
97 | .token.builtin,
98 | .token.inserted {
99 | color: #690;
100 | }
101 |
102 | .token.operator,
103 | .token.entity,
104 | .token.url,
105 | .language-css .token.string,
106 | .style .token.string {
107 | color: #a67f59;
108 | background: hsla(0, 0%, 100%, .5);
109 | }
110 |
111 | .token.atrule,
112 | .token.attr-value,
113 | .token.keyword {
114 | color: #07a;
115 | }
116 |
117 | .token.function {
118 | color: #DD4A68;
119 | }
120 |
121 | .token.regex,
122 | .token.important,
123 | .token.variable {
124 | color: #e90;
125 | }
126 |
127 | .token.important,
128 | .token.bold {
129 | font-weight: bold;
130 | }
131 | .token.italic {
132 | font-style: italic;
133 | }
134 |
135 | .token.entity {
136 | cursor: help;
137 | }
138 |
139 |
--------------------------------------------------------------------------------
/src/app/manage/sys-param/sys-param.component.html:
--------------------------------------------------------------------------------
1 |
2 |
69 |
70 |
--------------------------------------------------------------------------------
/src/assets/skins/lightgray/content.min.css:
--------------------------------------------------------------------------------
1 | body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;scrollbar-3dlight-color:#F0F0EE;scrollbar-arrow-color:#676662;scrollbar-base-color:#F0F0EE;scrollbar-darkshadow-color:#DDDDDD;scrollbar-face-color:#E0E0DD;scrollbar-highlight-color:#F0F0EE;scrollbar-shadow-color:#F0F0EE;scrollbar-track-color:#F5F5F5}td,th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}hr{cursor:default}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid #F00;cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#3399ff !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2d8ac7}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #7ACAFF}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2d8ac7}.mce-resize-bar-dragging{background-color:blue;opacity:.25;filter:alpha(opacity=25);zoom:1}
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "class-name": true,
7 | "comment-format": [
8 | true,
9 | "check-space"
10 | ],
11 | "curly": true,
12 | "eofline": true,
13 | "forin": true,
14 | "indent": [
15 | true,
16 | "spaces"
17 | ],
18 | "label-position": true,
19 | "label-undefined": true,
20 | "max-line-length": [
21 | true,
22 | 140
23 | ],
24 | "member-access": false,
25 | "member-ordering": [
26 | true,
27 | "static-before-instance",
28 | "variables-before-functions"
29 | ],
30 | "no-arg": true,
31 | "no-bitwise": true,
32 | "no-console": [
33 | true,
34 | "debug",
35 | "info",
36 | "time",
37 | "timeEnd",
38 | "trace"
39 | ],
40 | "no-construct": true,
41 | "no-debugger": true,
42 | "no-duplicate-key": true,
43 | "no-duplicate-variable": true,
44 | "no-empty": false,
45 | "no-eval": true,
46 | "no-inferrable-types": true,
47 | "no-shadowed-variable": true,
48 | "no-string-literal": false,
49 | "no-switch-case-fall-through": true,
50 | "no-trailing-whitespace": true,
51 | "no-unused-expression": true,
52 | "no-unused-variable": true,
53 | "no-unreachable": true,
54 | "no-use-before-declare": true,
55 | "no-var-keyword": true,
56 | "object-literal-sort-keys": false,
57 | "one-line": [
58 | true,
59 | "check-open-brace",
60 | "check-catch",
61 | "check-else",
62 | "check-whitespace"
63 | ],
64 | "quotemark": [
65 | true,
66 | "single"
67 | ],
68 | "radix": true,
69 | "semicolon": [
70 | "always"
71 | ],
72 | "triple-equals": [
73 | true,
74 | "allow-null-check"
75 | ],
76 | "typedef-whitespace": [
77 | true,
78 | {
79 | "call-signature": "nospace",
80 | "index-signature": "nospace",
81 | "parameter": "nospace",
82 | "property-declaration": "nospace",
83 | "variable-declaration": "nospace"
84 | }
85 | ],
86 | "variable-name": false,
87 | "whitespace": [
88 | true,
89 | "check-branch",
90 | "check-decl",
91 | "check-operator",
92 | "check-separator",
93 | "check-type"
94 | ],
95 |
96 | "directive-selector-prefix": [true, "app"],
97 | "component-selector-prefix": [true, "app"],
98 | "directive-selector-name": [true, "camelCase"],
99 | "component-selector-name": [true, "kebab-case"],
100 | "directive-selector-type": [true, "attribute"],
101 | "component-selector-type": [true, "element"],
102 | "use-input-property-decorator": true,
103 | "use-output-property-decorator": true,
104 | "use-host-property-decorator": true,
105 | "no-input-rename": true,
106 | "no-output-rename": true,
107 | "use-life-cycle-interface": true,
108 | "use-pipe-transform-interface": true,
109 | "component-class-suffix": true,
110 | "directive-class-suffix": true
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
61 |
62 |
63 |
65 |
66 |
75 |
--------------------------------------------------------------------------------
/src/app/use-jquery/use-jquery.component.html:
--------------------------------------------------------------------------------
1 |
2 |
42 |
--------------------------------------------------------------------------------
/src/app/chart/chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { fadeIn } from '../animations/fade-in';
3 |
4 | @Component({
5 | selector: 'app-chart',
6 | templateUrl: './chart.component.html',
7 | styleUrls: ['./chart.component.scss'],
8 | animations:[ fadeIn ]
9 | })
10 | export class ChartComponent implements OnInit {
11 | pieChart = {
12 | theme: '',
13 | event: [
14 | {
15 | type: "click",
16 | cb: function (res) {
17 | console.log(res);
18 | }
19 | }
20 | ],
21 | title: {
22 | text: 'NiceFish访问用户地区分布',
23 | subtext: '纯属虚构',
24 | x: 'center'
25 | },
26 | tooltip: {
27 | trigger: 'item',
28 | formatter: "{a}
3 |
7 |
4 |
6 | 本页用来演示如何集成jQuery和jQueryUI控件
5 |
8 |
14 |
9 |
13 | 10 | 【请仔细看】相关的文件有：angular-cli.json/typings.d.ts/styles.scss 11 |
12 |
15 |
20 |
16 | 日期选择器：
17 |
18 |
19 |
21 |
41 |
22 |
40 |
23 |
39 | -
24 |
- Nunc tincidunt 25 |
- Proin dolor 26 |
- Aenean lacinia 27 |
29 |
31 | Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
30 |
32 |
34 | Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
33 |
35 |
38 | Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
36 |Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
37 |{b} : {c} ({d}%)" 29 | }, 30 | legend: { 31 | orient: 'vertical', 32 | left: 'left', 33 | data: ['深圳', '北京', '广州', '上海', '长沙'] 34 | }, 35 | series: [{ 36 | name: '访问来源', 37 | type: 'pie', 38 | startAngle: -180, 39 | radius: '55%', 40 | center: ['50%', '60%'], 41 | data: [{ 42 | value: 3350, 43 | name: '深圳' 44 | }, { 45 | value: 310, 46 | name: '北京' 47 | }, { 48 | value: 234, 49 | name: '广州' 50 | }, { 51 | value: 135, 52 | name: '上海' 53 | }, { 54 | value: 1548, 55 | name: '长沙' 56 | }], 57 | itemStyle: { 58 | emphasis: { 59 | shadowBlur: 10, 60 | shadowOffsetX: 0, 61 | shadowColor: 'rgba(0, 0, 0, 0.5)' 62 | } 63 | } 64 | }] 65 | }; 66 | 67 | barChart = { 68 | title: { 69 | text: 'NiceFish月访问量统计', 70 | subtext: '纯属虚构', 71 | x: 'center' 72 | }, 73 | color: ['#3398DB'], 74 | tooltip: { 75 | trigger: 'axis', 76 | axisPointer: { // 坐标轴指示器，坐标轴触发有效 77 | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 78 | }, 79 | formatter: "{b}月{a}:{c}" 80 | }, 81 | grid: { 82 | left: '3%', 83 | right: '4%', 84 | bottom: '3%', 85 | containLabel: true 86 | }, 87 | xAxis: [ 88 | { 89 | type: 'category', 90 | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], 91 | axisTick: { 92 | alignWithLabel: true 93 | } 94 | } 95 | ], 96 | yAxis: [ 97 | { 98 | type: 'value' 99 | } 100 | ], 101 | series: [ 102 | { 103 | name: '访问量', 104 | type: 'bar', 105 | barWidth: '60%', 106 | data: [10, 52, 200, 334, 390, 330, 220, 1000, 500, 444, 999, 11] 107 | } 108 | ] 109 | }; 110 | 111 | lineChart = { 112 | title: { 113 | text: 'NiceFish月访问趋势图', 114 | subtext: '纯属虚构', 115 | x:"center" 116 | }, 117 | tooltip: { 118 | trigger: 'axis' 119 | }, 120 | xAxis: { 121 | type: 'category', 122 | boundaryGap: false, 123 | data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'] 124 | }, 125 | yAxis: { 126 | type: 'value', 127 | axisLabel: { 128 | formatter: '{value} 次' 129 | } 130 | }, 131 | series: [ 132 | { 133 | name: '访问量', 134 | type: 'line', 135 | data: [11, 11, 15, 13, 12, 13, 10,123,100,99,66,199] 136 | } 137 | 138 | ] 139 | }; 140 | 141 | constructor() { } 142 | 143 | ngOnInit() { 144 | } 145 | 146 | } 147 | -------------------------------------------------------------------------------- /src/app/manage/post-table/post-table.component.html: -------------------------------------------------------------------------------- 1 |
2 |
19 |
55 |
56 |
71 |
--------------------------------------------------------------------------------
/src/app/post/write-post/write-post.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit,AfterViewInit,OnDestroy } from '@angular/core';
2 | import { flyIn } from '../../animations/fly-in';
3 |
4 | @Component({
5 | selector: 'app-write-post',
6 | templateUrl: './write-post.component.html',
7 | styleUrls: ['./write-post.component.scss'],
8 | animations: [
9 | flyIn
10 | ]
11 | })
12 |
13 | export class WritePostComponent implements OnInit,AfterViewInit,OnDestroy {
14 | public editor;
15 |
16 | constructor() { }
17 |
18 | ngOnInit() {
19 |
20 | }
21 |
22 | public fileInputChangeHandler():void{
23 | let fileInput =
2 |
81 |
--------------------------------------------------------------------------------
/src/app/jsplumb-demo/jsplumb-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import * as jsp from 'jsplumb';
3 |
4 | @Component({
5 | selector: 'app-jsplumb-demo',
6 | templateUrl: './jsplumb-demo.component.html',
7 | styleUrls: ['./jsplumb-demo.component.css']
8 | })
9 | export class JsplumbDemoComponent implements OnInit {
10 |
11 | constructor() { }
12 |
13 | ngOnInit() {
14 | var jsPlumb = jsp.jsPlumb;
15 | var instance = jsPlumb.getInstance({
16 | // default drag options
17 | DragOptions: { cursor: 'pointer', zIndex: 2000 },
18 | // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
19 | // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
20 | ConnectionOverlays: [
21 | ["Arrow", {
22 | location: 1,
23 | visible: true,
24 | width: 11,
25 | length: 11,
26 | id: "ARROW",
27 | events: {
28 | click: function () { alert("you clicked on the arrow overlay") }
29 | }
30 | }],
31 | ["Label", {
32 | location: 0.1,
33 | id: "label",
34 | cssClass: "aLabel",
35 | events: {
36 | // connection.getOverlay("label")
37 | tap: function () {
38 | let label = prompt("请输入标签文字：");
39 | this.setLabel(label);
40 | }
41 | }
42 | }]
43 | ],
44 | Container: "canvas"
45 | });
46 |
47 | var basicType = {
48 | connector: "StateMachine",
49 | paintStyle: { stroke: "red", strokeWidth: 4 },
50 | hoverPaintStyle: { stroke: "blue" },
51 | overlays: [
52 | "Arrow"
53 | ]
54 | };
55 | instance.registerConnectionType("basic", basicType);
56 |
57 | // this is the paint style for the connecting lines..
58 | var connectorPaintStyle = {
59 | strokeWidth: 2,
60 | stroke: "#61B7CF",
61 | joinstyle: "round",
62 | outlineStroke: "white",
63 | outlineWidth: 2
64 | },
65 | // .. and this is the hover style.
66 | connectorHoverStyle = {
67 | strokeWidth: 3,
68 | stroke: "#216477",
69 | outlineWidth: 5,
70 | outlineStroke: "white"
71 | },
72 | endpointHoverStyle = {
73 | fill: "#216477",
74 | stroke: "#216477"
75 | },
76 | // the definition of source endpoints (the small blue ones)
77 | sourceEndpoint = {
78 | endpoint: "Dot",
79 | paintStyle: {
80 | stroke: "#7AB02C",
81 | fill: "transparent",
82 | radius: 7,
83 | strokeWidth: 1
84 | },
85 | isSource: true,
86 | connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
87 | connectorStyle: connectorPaintStyle,
88 | hoverPaintStyle: endpointHoverStyle,
89 | connectorHoverStyle: connectorHoverStyle,
90 | dragOptions: {},
91 | overlays: [
92 | ["Label", {
93 | location: [0.5, 1.5],
94 | label: "Drag",
95 | cssClass: "endpointSourceLabel",
96 | visible: false
97 | }]
98 | ]
99 | },
100 | // the definition of target endpoints (will appear when the user drags a connection)
101 | targetEndpoint = {
102 | endpoint: "Dot",
103 | paintStyle: { fill: "#7AB02C", radius: 7 },
104 | hoverPaintStyle: endpointHoverStyle,
105 | maxConnections: -1,
106 | dropOptions: { hoverClass: "hover", activeClass: "active" },
107 | isTarget: true,
108 | overlays: [
109 | ["Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false }]
110 | ]
111 | },
112 | init = function (connection) {
113 | connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
114 | };
115 |
116 | var _addEndpoints = function (toId, sourceAnchors, targetAnchors) {
117 | for (var i = 0; i < sourceAnchors.length; i++) {
118 | var sourceUUID = toId + sourceAnchors[i];
119 | instance.addEndpoint("flowchart" + toId, sourceEndpoint, {
120 | anchor: sourceAnchors[i], uuid: sourceUUID
121 | });
122 | }
123 | for (var j = 0; j < targetAnchors.length; j++) {
124 | var targetUUID = toId + targetAnchors[j];
125 | instance.addEndpoint("flowchart" + toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID });
126 | }
127 | };
128 |
129 | // suspend drawing and initialise.
130 | instance.batch(function () {
131 |
132 | _addEndpoints("Window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
133 | _addEndpoints("Window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
134 | _addEndpoints("Window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
135 | _addEndpoints("Window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
136 |
137 | // listen for new connections; initialise them the same way we initialise the connections at startup.
138 | instance.bind("connection", function (connInfo, originalEvent) {
139 | init(connInfo.connection);
140 | });
141 |
142 | // make all the window divs draggable
143 | instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [20, 20] });
144 | // THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
145 | // method, or document.querySelectorAll:
146 | //jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });
147 |
148 | // connect a few up
149 | instance.connect({ uuids: ["Window1TopCenter", "Window2LeftMiddle"], editable: true });
150 | instance.connect({ uuids: ["Window2BottomCenter", "Window3TopCenter"], editable: true });
151 | instance.connect({ uuids: ["Window3LeftMiddle", "Window4RightMiddle"], editable: true });
152 | // listen for clicks on connections, and offer to delete connections on click.
153 | //
154 | instance.bind("click", function (conn, originalEvent) {
155 | // if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
156 | // instance.detach(conn);
157 | conn.toggleType("basic");
158 | });
159 |
160 | instance.bind("connectionDrag", function (connection) {
161 | console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
162 | });
163 |
164 | instance.bind("connectionDragStop", function (connection) {
165 | console.log("connection " + connection.id + " was dragged");
166 | });
167 |
168 | instance.bind("connectionMoved", function (params) {
169 | console.log("connection " + params.connection.id + " was moved");
170 | });
171 | });
172 |
173 | jsPlumb.fire("jsPlumbDemoLoaded", instance);
174 |
175 | }
176 |
177 | }
178 |
--------------------------------------------------------------------------------
3 |
80 |
4 |
6 | {{'userRegister.userSignUp' | translate}}
5 |
7 |
78 |
79 |
{{comment.content}}
18 |{{comment.username}} {{comment.date}}
19 |