分类:代码

码农是第一生产力。

angular2 学习笔记(2)- 添加 material 组件

添加组件

  • 命令行

    npm install --save @angular/material material-design-icons @angular/animations @angular/flex-layout hammerjs
    
    

添加配置

  • app.module.ts

    imports: [    
      ...
      BrowserAnimationsModule,
      MdToolbarModule, MdButtonModule, MdMenuModule, MdIconModule,
      FlexLayoutModule,
    ],
    
  • style.css

    @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
    
    /* fallback */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2');
    }
    
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    

测试页面

  • html demo

    <md-toolbar color="primary">
      <button md-icon-button [mdMenuTriggerFor]="menu1">
        <md-icon>more_vert</md-icon>
      </button>
      <md-menu #menu1="mdMenu">
        <button md-menu-item>
          <md-icon>fingerprint</md-icon>
          <span>Login</span>
        </button>
        <button md-menu-item disabled>
          <md-icon>annoucement</md-icon>
          <span>Issues</span>
        </button>
        <button md-menu-item>
          <md-icon>notifications_off</md-icon>
          <span>No Alerts</span>
        </button>
      </md-menu>
      <span>fj's blog</span>
    </md-toolbar>
    

win10 安装 vs2010 vs2015 BuildTools 方法

Qt 开发需要 VC 编译器,又不想安装 VC 全家桶,可以只安装 BuildTools。

angular2 学习笔记(1)- 工具配置和框架搭建

搭建 springboot 工程

工程框架

  • File -> New -> Project -> Spring Initializer
  • Dependencies: Web->Web, Template Engine->Thymeleaf
  • Thymeleaf 修改为 LEGACY 模式
    • pom.xml 中添加依赖

      <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
      </dependency>
      
    • 修改 application.properties

      spring.thymeleaf.mode=LEGACYHTML5
      spring.thymeleaf.cache=false
      

Bean 配置

  • 添加类 BeanConfig

    @Configuration
    @ImportResource("classpath:bean.xml")
        public class BeanConfig {
    }
    
  • 在 src->main->resources 下添加文件 bean.xml,并添加 Bean 实例

    <bean name="myBean" class="com.fj.springboot01.MyBean"/>
    

添加路由

  • 给类添加注解 @Controller
  • 给类添加方法

    @RequestMapping("/hello")
    public String hello() {
      System.out.println("hello mapping");
      return "hello";
    }
    
  • 添加 hello.html ,放在 src/main/resources/templates 目录下

添加静态资源

  • angular2 生成的页面作为静态资源放在 src/main/resources/static 目录下

搭建 angular2 框架

安装软件

  • 下载并安装 node.js LTS 版本到 D:/nodejs 目录
  • 安装 cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    
  • 修改 C:/Users/fj/.npmrc

    registry=https://registry.npm.taobao.org/
    prefix=D:\nodejs
    cache=D:\nodejs\node_cache
    
  • 安装 npm 软件包

    npm install -g @angular/cli webpack typescript tslint
    
    

工程框架

  • 新建代码框架,下载依赖

    cd spring001/src/main
    ng new angular
    cd angular
    npm install
    
  • 新建 Component

    ng g c component/data-grid
    
    
  • 修改页面

编译

  • 命令行编译生成目标文件

    ng build --prod --aot --bh /note/ --no-extract-license
    
    
  • 修改 package.json , 添加两行

    "scripts": {
      "develop":"ng build -bh /note/ -w",
      "release":"ng build -bh /note/ -prod -aot --env=prod --no-extract-license"
    },
    
  • 将目标文件移动到静态资源目录下, 修改 .angular-cli.json

    "outDir": "../resources/static/note", 
    

调试

  • tsconfig.json 中打开 sourceMap 选项

    "sourceMap": true,
    "inlineSources": true,
    
  • 在 IDEA 中直接创建 SpringBoot 启动项
  • 启动调试