zoukankan      html  css  js  c++  java
  • 形形色色Node工程Angular2

    最近项目要用的

    一些无关紧要的文件夹, demo是一些示例, dist是webpack打包后发布的代码,server是用node启动服务,typings和tsconfig是一些ts配置.

    npm install 安装node_modules依赖.

    npm start 从package.json指定的webpack.config开始运行.

        "start": "concurrently "webpack --watch --colors" "nodemon server/main.js""
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: {
            main:['./app/main.ts'],
            vendor:[
                
            ]
      },
      externals:{
          "jquery":"jQuery"
      },
      output: {
        path: './dist',
        filename: 'js/app.bundle.js',
        publicPath:'/'
      },
      module: {
        loaders: [
          {test: /.ts$/, loader: 'ts'},
          {test: /.html$/, loader: 'raw'},
          {test: /.css$/, loader: 'raw'}
        ]
      },
      resolve: {
        extensions: ['', '.js', '.ts', '.html', '.css']
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './app/index.html'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            //filename : 'vendor_[chunkhash].js',
            filename : 'js/vendor.js',
            minChunks: Infinity
        }),
        /*new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),*/
        new webpack.DefinePlugin({
          app: {
            environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
          }
        })
      ]
    
    };
    webpack.config

    webpack设入口为main.ts

    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import {AppModule} from './app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule);

    main.ts导入./app.module.ts(import和require的时候后缀名可以省略)使用bootstrapModule方法启动AppModule

    在模块app.module.ts中导入angular基础模块以及自定义组件和路由组件.

    import './polyfills';
    
    import {BrowserModule} from "@angular/platform-browser";
    import {NgModule} from "@angular/core";
    import {HttpModule} from '@angular/http';
    
    // 表单 双向数据绑定
    import {AppComponent} from "./app.component";
    import { HomeComponent, TestComponent } from './component';
    //路由
    import APP_ROUTER_PROVIDERS from "./app.routes";
    
    import {enableProdMode} from '@angular/core';
    import { LoggerService, GLobalService, UIHelperService } from './service';
    enableProdMode();
    
    @NgModule({
        imports: [
            BrowserModule,
            HttpModule,
            APP_ROUTER_PROVIDERS
        ],
        declarations: [
            AppComponent,
            HomeComponent,
            TestComponent
        ],
        providers: [
            LoggerService,
            GLobalService,
            UIHelperService
        ],
        bootstrap: [AppComponent]
    })
    
    export class AppModule {
    }
    app.module.ts

    自定义组件如果是以页面为划分,比如HomeComponent, TestComponent, 可以在内部再细分功能组件.

    例如上面的

    import { HomeComponent, TestComponent } from './component';

    AppModule中导入页面组件后,在app.routes.ts中作好路由,就可以在html模板中实现页面跳转.

    import {RouterModule, Routes } from '@angular/router';
    
    import { HomeComponent, TestComponent } from './component';
    
    const routes = [
      {path: '', component: HomeComponent},
      {path: 'test', component: TestComponent}
    ];
    
    export default RouterModule.forRoot(routes);

    component.ts中

    export * from './app.component'
    
    export * from './components/home/home.component'
    export * from './components/test/test.component'

    统一export组件, Module中统一import或require, 这是这个工程组织的结构.

    AppModule最后也是export一个对象供使用.

    上面提到的home组件除了home.component.ts还有一个模板文件homecomponent.html.ts

    import {Component,OnInit} from "@angular/core";
    import { URLSearchParams } from '@angular/http';
    import { GLobalService, UIHelperService } from '../../service';
    
    import { htmlTemplate } from './home.component.html';
    
    @Component({
      selector: 'home',
      template: htmlTemplate
    })
    export class HomeComponent implements OnInit{
        errorMessage:string;
        homeData:any;
        
        constructor(private _globalService: GLobalService,private _uIHelperService:UIHelperService) {}
        
        ngOnInit() {
            let requestParams = new URLSearchParams();
            requestParams.set('id', '11111');
            this._globalService.ajaxCallerGet(this._globalService.getServiceURL('home'), requestParams).subscribe(
                (data) => {        
                    this.homeData=data;    
                    //this._uIHelperService.getTest("test");
                    console.log(data,this.homeData);    
                },
                error => this.errorMessage = <any>error
            );
        }
    }
    hoem.component.ts

    其中导入了封装有ajax方法的的service组件, 指定模板文件位置 import { htmlTemplate } from './home.component.html';

    export const htmlTemplate = `
        <div class="row">{{homeData?.name}}</div>
        <a [routerLink]="['/test']">切换到测试页面</a>
    `;

    中间的a标签插入了路由标志'test', div中的{{插值变量}}语法根据不同的依赖包会有所不同,此处有一个问号?

    路由去到test

    import {Component} from "@angular/core";
    import { htmlTemplate } from './test.component.html';
    @Component({
      selector: 'test',
      styles: [''],
      template: htmlTemplate
    })
    export class TestComponent{
        constructor() {
            //this.name = 'World';
        }
    }

    读取模板

    export const htmlTemplate = `
        <div class="row">
               我是test
        </div>
    `;

    前台的逻辑基本就是这样,更多有关node的知识以及隐蔽工程有待完善.

  • 相关阅读:
    【转】QPainter中坐标系变换问题
    【转】Python3 (入门6) 库的打包与安装
    【转】Python3 操作符重载方法
    【转】Python3 日期时间 相关模块(time(时间) / datatime(日期时间) / calendar(日历))
    正则表达式过滤HTML、JS、CSS
    JavaScript的类型转换
    JavaScript的数据类型,值和变量
    JavaScript介绍
    Ant学习笔记
    GeoServer端口配置
  • 原文地址:https://www.cnblogs.com/haimingpro/p/6178912.html
Copyright © 2011-2022 走看看