Archive for 二月 2017

Angular2 模块懒加载

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了。所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验。

Continue reading ‘Angular2 模块懒加载’ »

SpringMVC Angular2 Intellij Idea 开发环境搭建

整合Angular2的问题在于,修改前端源码后,需要即时生效,总不能每次修改都ng build吧,效率太低。

ng build支持-w参数,加上后可以一直运行,检测文件变化后重新build,我们就利用这个特性来配置idea。当然,如果你不嫌麻烦,可以在每天写代码前先在终端里执行ng build -w

Continue reading ‘SpringMVC Angular2 Intellij Idea 开发环境搭建’ »

Angular 通过路由页面导航

因为Angular是单页面应用,不能用传统的文件目录跳转,需要使用路由器。

路由配置

配置路由有两种方式:

  1. 在创建项目或初始化项目时,使用--routing参数,例如:

    ng new angular --routing
    项目创建时会自动生成app-routing.module.ts:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    const routes: Routes = [
      {
        path: '',
        children: []
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }
    

    并且app.module.ts自动加上 AppRoutingModule

    入口组件模板 app.component.html自动加上<router-outlet></router-outlet>标签

  2. 手工处理上面的步骤

    当URL匹配时,Angular会把相应的组件,插到router-outlet位置。

Continue reading ‘Angular 通过路由页面导航’ »

Angular2 自定义指令

Angular的指令分为三种:

  1. 属性指令

    属性指令指的是以属性形式使用的指令,如NgClass,NgStyle,FormsModule里的NgModel,NgModelGroup等。

  2. 结构指令

    结构指令用于修改DOM结构,如NgIf,当条件为true时,该元素会被添加到DOM中。

  3. 组件

    这个不必说了,我们用得最多的便是组件。与其他指令不同,它描述的是一个视图,是用户可以直接看到的东西。

    Continue reading ‘Angular2 自定义指令’ »

Angular2 使用管道Pipe以及自定义管道格式数据

管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联。

纯管道(Pure Pipe)与非纯管道(Impure Pipe)

管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下,管道都是纯的,在自定义管道声明时把pure标志置为false,就是非纯管道。如:

@Pipe({
  name: 'sexReform',
  pure:false
})

Continue reading ‘Angular2 使用管道Pipe以及自定义管道格式数据’ »

Angular2 响应式表单验证

前面一文介绍了模板驱动表单的验证,但它的功能比较简单,有时无法满足我们的需求。响应式表单与模板驱动表单不同的是,响应式表单在组件类中创建表单控制器模型,可在组件中随意控制校验规则。

Continue reading ‘Angular2 响应式表单验证’ »

Angular2 模板驱动表单校验

模板驱动表单,指的是通过html5标准校验的表单,优势在于使用起来简单,但要动态修改验证器、操纵控制器模型不是很方便。

Continue reading ‘Angular2 模板驱动表单校验’ »

Angular2 模板语法数据绑定

Angular2的模板语法大体上与html一致,功能上增加了数据绑定以及一些控制dom的小功能。
数据绑定主要有以下几种:
1. 插值绑定
2. property绑定
3. attribute绑定
4. class绑定
5. style绑定
6. 事件绑定
7. 局部变量绑定
8. ngModel
9. ngSwitch
10. ngFor
11. ngForTrackBy

其他功能:
1. 管道操作符
2. 安全导航操作符
3. others...

Continue reading ‘Angular2 模板语法数据绑定’ »