分类:代码

码农是第一生产力。

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>
    

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 启动项
  • 启动调试

windows 下 clang 编译后无法查看 string 变量值问题

ubuntu 上用 lldb 可以正常调试,在 windows 上用 gdb 无法调试。开始以为是 mingw/clang/gdb 间的版本差异无法查看 std::string 变量值,尝试了各种版本组合,都不行。

stackoverflow 上找到了这个回答,原因是 clang 默认不生成 std::string 的调试信息,需要另外安装 libstdc++ 的编译符号表才能调试。

在 cmake 中加入这个编译选项,可以解决此问题

if((CMAKE_BUILD_TYPE STREQUAL Debug) OR (CMAKE_BUILD_TYPE STREQUAL RelWithDebInfo))
    set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -fno-limit-debug-info")
    set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -fno-limit-debug-info")
endif()

另外需要注意的是:

  • mingw 版本升级后,影响头文件和 lib 兼容,经常需要修改代码才能编译通过。
  • clang 版本升级仅影响二进制兼容,不影响代码兼容。
  • 目前比较稳定的组合是 clang400 + mingw540

MINGW 和 jni 相关几个问题

生成 jni 头文件方法

# file: src/com/litchi/HelloWord.java
cd src
javah com/litchi/HelloWorld

MINGW 编译 jni 无法被 java 加载问题

因为 dll 中导出的函数签名与 VC 生成的不一致。需要加上编译参数

-Wl,--add-stdcall-alias

用 strip 减小可执行文件大小

动态库 *.so *.dll

可以删除所有符号

strip -s *.so 

静态库 *.a

只能删除调试符号

strp -g --strip-unneeded *.a

GCC 多个 lib 同名函数链接冲突问题

问题描述

  • 用 gcc 编译两个动态库 lib1.so lib2.so, 程序 app 链接到这两个动态库
  • lib1.so 中定义了全局变量 var=1 , lib2.so 中定义全局变量 var=2 。即相同变量 var 在不同 lib 中定义值不同。
  • lib1.so 中定义了函数 fun1() { print(var); }
  • lib2.so 中定义了函数 fun2() { func1(); print(var); } , 即 lib2.so 依赖 lib1.so
  • 运行 app,调用 fun1fun2 ,输出 var 的值是相同的。

问题分析

  • gcc 链接时,有个默认规则:当一个符号需要被加入全局符号表时,如果相同的符号名已经存在,则后加入的符号被忽略
  • 用 VC 编译链接这个程序, fun1fun2 会输出不同值: VC 在发现多个依赖库中有同名符号时, 会符号重定义, 而不是默认的选择一个

问题解决

  • 使用编译参数 -fvisibility=hidden ,使所有符号默认不导出
  • 将 fun1 和 fun2 声明为导出符号

    #define MY_API __attribute__((visibility("default")))
    void MY_API fun1();
    void MY_API fun2();
    
  • fun1fun2 可以输出各自 lib 中定义的值。