Angular Route

This notes is based on the Angular router book

1 The Mentail Model of Angular Route

A router cares about the screen arrangement of application components. As the screen arrangement, router configurations defines a tree structure. A ndoe represents a route. Some nodes have components associated with them, some do not. An outlet is a location in the component tree where a component is placed.

The router’s primary job is to manage navigation between states, which include updating the component tree. A URL is a serialzied router state. The Angular router takes care of managing the URL to make sure that it’s in-sync with the route state.

2 Angular Router

The Angular router takes a URL, then:

  1. Applies redirects
  2. Recognizes router states
  3. Runs guards and resolves data
  4. Activates all the needed components
  5. Manages navigation

A router uses parentheses to serialize secondary segments. For example, /inbox/33(popup:compose). The colon syntax specifies the outlet. A router us param=value shyntax to specify route-specific parameters. For example, /inbox/33;open=true/messages/44.

A router state consists of activated routes. An each activated route can be associated with a component. When a route state is recognized, we have a future router state. The router will check that transitioning to the future state is permitted by running guards.

When configure routers, an option is to define a resolve property that is called to retrieve data for that router. You can acces the resolved data by injecting the activated route object into a component. Following is an example:

class MyCmp {
    dataArray: Observable<data[]>
    id: Observable<string>
    constructor(route: ActivatedRoute) {
        this.dataArray ='myData') = p => p.get('id'))

The data, params, queryParams, fragment, and paramMap properties of ActivatedRoute are observables. To access those data immediately, use snapshot property to access the instant properties.


In Angular, a URL is just a serialized router state. Navaigation that changes a state results in a URL change.

A URL consists of an array of UrlSegment that contains a path and the matrix parameters assoicated with the segment.

interface UrlSegment {
    path: string,
    parameters: {[name: string]: string}

The path /inbox;a=v1/33;b1=v1;b2=v2 has two segments as shown below:

    {path: 'inbox', parameters: {a: 'v1'}}, 
    {path: '33`, parmaters: {b1: 'v1', b2: 'v2'}}

Query and fragment parameters are not scoped and are shared across many activated routes.

Angular allows secondary children that is defined in () for root children or /path/() for secondary children in a child path. Multiple secondary children are separated by //. For example, /inbox/33/(mssages/44//side:help) defines two children for a path of /inbox/33.

Angular routers uses depth-first strategy to matche router configuration one by one until it find a match that consume all parts of a URL. During the process, it may backtrack and will use the first one that matches the whole URL. Use semicolon to define a variable. For example :folder.

By default, the pathMatch value is prefix that matches the path prefix. An empty path '' matches every segment unless there is a pathMatch: 'full' defined. It doesn’t consum URL segment.

Path '**' is a wildcard route that consumes all the URL segments.

A path that dosen’t have redirectTo or component property is a a componentless route that consume a URL segment. When two or more siblings share some data, use a componentless route to share data.

4 Router State

During a navigation, after redirects have been applied, the router creates a RouterStateSnapshot object that is a tree of ActivatedRouteSnapShot.

RouterState and ActivateRoute are similar to their snapshot counterparts except that they expose all the values as observables. They can be inject to component constructor.

The router state includes url, params, data (static and dynamically resolved), query parmater and fragment.

To navigate, either use Router.navigate() imperatively or <a [RouterLink]=...> declaratively.

To navigate to /inbox/33:details=true/messages/44;mode=preview, use router.navigate['/inbox', 33, {details: true}, 'message', 44, {mode: 'preview}]).

Use router.navigator([{outlets: {popup: 'message/22'}}]) to update secondary segment. Navigation can be relative. You can preserve query parameter and fragment in navigation.

Behind the scene, RouterLink just calls router.navigate with the provided commands. Use routerLinkActive to add CSS classes. Use routerLinkActivateOptions to set exact matching.

Read More

Angular Style

To style an Angluar application, we need two types of tools: a layout tool and component style tool. The Angular team builds both for developers: Angular Flex Layout and Angular Material design.

Read More

Angular i18n

A note based on serveral documents from the following sites:

Read More

Angular NgModule and DI Note

1. Introduction

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality such as a feature area, a business domain, a workflow or a collection of related utilities.

Read More

Angular Notes

This note is based on the official Angular doc in

1. Arthitecture

Angular is a framework consisting of several libraries for building client applications. An Angular application use Angularized markup to write templates, manage templates using component classes, add application logic in services, box components and services in modules, and launch the app by bootstrapping the root module.

Read More

Meteor Notes

1. Introduction

Meteor is a full-stack JavaScript platform, a build tool and a set of packages for developing reactive application for both web and mobile devices. It uses data on the wire to provide connected-client reactivity.

Read More

TypeScript Vue Tour Part 2

1. Refine Webpack

There are a couple of things we like to improve on part 1. We want to move the /index.html to /src/index.html because it’s also a source code file. We let webpack to inject the build output instead of hardcoding the output in this template file. We also want to extrac the webpack manifest and vendor packages into separate bundles.

Read More

TypeScript Vue Tour Part 1

1. The Plan

This is the first part of a series of tours exploring progressive Web applciation (PWA) deveopmenet using TypeScript and Vue. To fully explore the concepts in both PWA and the develpment experience of TypeScript and Vue, we create everything from scratch except some obvious code/resources copied from vue-cli templates.

Read More

VS Code notes

1. Introduction

VS is a code editor at its heart. You can open up to three editors side by side.

Read More

Bootstrap v4 Study Note

1. Setup

Bootstrap requires jQuery, Tether and its JavaScript plugin to work. It uses H5 doctype and viewport meta tag. A sample template is as the following (based on

Read More

React Ecosystem

There are many pieces in the react ecosystem, either direcly or indirectly needed to build a great web application.

Read More

Querydsl Note

This is a note summurizing the key concepts and practices of QueryDSL. It is based on and

Read More

GraphQL Java Note

The GraphQL Java implementation is not documented well. Its source code is not documented at all. We have to learn it from its source code.

Read More

GraphQL Explained

GraphQL is a query language created by Facebook in 2012. It describes the schema and operations of a hierarchical data model for client-server applications. It is a specification lanuaged describing the type system and interactions between a server application and its clients. It publishes server capabilities with type valication and let client specify the returned data at field-level granularity. GraphQL is rather new and good documents are desired. Here we try to understand and summary the concepts and usage patterns of GraphQL.

Read More

Chakram REST API testing

1. Chakram Introduction

Chakram is a framework to test JSON REST endpoint. It use promises and offers a BDD testing style. It is built on node.js, mocha test framework and chai BDD assertion library. It use the request lib to provide comprehensive REST request capaiblities.

Read More

Product Design

1. Overview

In any e-commerce application, the product, product variant and category are core entities that define many features of a Web site. This article describes the product-related design of

Read More

Product Price Design

1. Price Calculation

In, a product variant can have a set of prices represented as an array of Price values. A price is defined with a scope (customer group, channel and country) and/or an optional period (valid from and/or valid to). A price has a regular value and an optional discounted price. When calculate a price, there are two steps: price selection and discount checking.

Read More

Basic Kubernetes

K8s Architecture

First we need a set of computers, physic or virtual, to urn K8s, these computers are called node in K8s. Nodes are often organized as a cluster to provide high availability and scalability. In each node there is a kubelet node agent, a kube-proxynetwork proxy and a docker daemon to run one or more pods. In K8s, a pod consists of a set of docker containers. A pod is the minimum management unit to create, run and schedule.

Read More

Spring Security with OAuth2

For a cloud-native application, security is a big concern and brings new challenges. Luckily, the “silver bullet”, i.e, the open source software, makes life so easy. This time, it’s Spring security and OAuth2.

Read More

Application Logging Tips


理解了logging的目的,那么所有的Tips都不难理解了。当软件变得复杂,尤其是分布式异步并行计算程序比如Cloud Native程序成为主流是,基于IDE单步执行的Debug无法工作。而且多数的bug通常发生在用户现场的生产系统,这时候能够像单步执行那样清晰的给出程序执行各个重要节点的完整状态就非常宝贵。我的经验证明,有了好的application logging,多数的debug工作就变得轻而易举:如果所有的关键步骤的状态数据都有记录,错误的原因也就清楚了。

Read More


1. 需要简化


Read More


1. Scrum or Kanban?

做了多年软件,感觉软件开发的过程是没办法“管理”的。软件开发从本质上讲是一种理想的逻辑思维工作, 高水平的软件开发很大程度上取决于程序员个人的主动性、工作能力和学习能力。可是实际工作中又需要产品开发过程的可视化。可视化意味着:

  1. 做基本的产品功能计划。计划包括任务分解和时间估算。
  2. 了解产品开发过程中任务的完成状态。其中最主要的是工作量、开发速率和开发瓶颈。
Read More

Python Docstring Using Sphinx and reStructuredText


Python is a dynamic script programming language that has no static type checking. For Python, documentation becomes very important for developers to understand and use Python components such as modules, classes, functions and methods.

Read More

Odoo Start Process

The Boot Code

In Odoo 8.0,, openerp-gevent and openerp-server execute import openerp and openerp.cli.main() method to boot the Odoo backend services.

Read More

How Does Odoo Load Addons and Modules

Method load_addons in

Odoo starts loading addons when it receives the first HTTP request. In the __call__ method of file, it calls load_addons to load all addons in the specified addon paths.

Read More

Odoo Cron Job

Odoo makes running a background job easy: simply insert a record to ir.cron table and Odoo will execute it as defined. The ir.cron table is defined in openerp/addons/base/ir/ file. It has the following columns:

Read More

Understand Odoo Model Part 3

1 Old-style Fields

Because most Odoo addons still use old-style field definition. It is necessary for a developer to understand the old old-style field definitions. These fields are in openerp/osv/ file.

Read More

Odoo Product Model

1 Overview

The core Odoo addon for product is called product (“Products & Pricelists”). The followings are features listed in the module description:

Read More

Understand Odoo Model Part 2

1 Fields in Odoo Model

A model represents a business entity that is stored in a database. Fields represent entity properties and the corresponding table columns in the database. Odoo also uses fields representing entity relationships. Odoo 8.0 introduces a new field syntax but keeps the old syntax for backward compatibility. Here we focus on the new syntax defined in openerp/

Read More

Understand Odoo Model Part 1

1 Not An Easy Task

Model is the core concept in Odoo. A model is a Python class that represents a business entity and related operations. All Odoo business entities are implemented as models that are stored in a backend PostgreSQL database. Understanding how it works is a must for an Odoo developer.

Read More

Understand Odoo Environment

In Odoo 8.0, openerp/ defines two classes managing “environments” of a database access for a client request: the Environments class and the Environment class.

Read More

Replacing Decorated Methods in Python

The Question

In my application, I need to replace a decorated class method using a new function that performs some actions before and after the replaced method but still keep the same replaced method interface, i.e., taking same input and return the same output. In general programming terms, I implement a decorator pattern for some “decorated” Python methods.

Read More

Guide to Odoo Community Association Quality Tools Part 2

In the [Guide to Odoo Community Association Quality Tools Part 1] (, we discussed how to link a GitHub repository with the OCA quality tools to run tests and code coverage. Here we investigate the implementation details of the Odoo test framework and the OCA quality tools.

Read More

Guide to Odoo Community Association Quality Tools Part 1

Choices of Odoo 8.0 Testing Services

Odoo 8.0 has a new test framework/platform called runbot. It looks good but is evolving and lack of documents. On the other hand, Odoo Community Association (OCA) has a Maintainer Quality Tools project that helps to ensure the quality of Odoo addons. It can run module unit tests and report test coverage. It uses Travis CI continuous integration service and Coveralls code coverage reporting service. Both are free services for open source projects. Both services support GitHub integration and automatically run test and report results to GitHub projects. This article describe the the setup of these two service for an Odoo addon project.

Read More

Guide to boto Amazon MWS Python package


boto is a Python package for Amazon web service APIs. It makes it easy to use Amazon marketplace web service (MWS) APIs by providing supporting functions such as connection pool, auto-retry, response parsing and iterative calls for extra data. However, there is no document and the Python code is not well commented. Below is an attempt to summarize boto implementation and usage.

Read More

How to save and load module configuration in Odoo

Finding a Solution

Often a custom Odoo module needs some parameters to run. However, [my previous analysis of Odoo’s own implementation] ( doesn’t give me an obvious answer on how to implement a configuration function for a custom module. Nonetheless, the analysis helps me to evaluate answers I found online today.

Read More

Create Odoo 8.0 Ubuntu Docker Image


Odoo 8 was released on 09/18/2014. We created a self-contained [Odoo 8.0 Docker image] ( that was installed from [the latest Odoo 8.0 nightly build] ( The Docker image building source code is in [a GitHub repository] (

Read More

Run and Debug Odoo using PyCharm in Ubuntu

As a beginner, being able to debug through the Odoo source code is a great learning experience. PyCharm Professional Edition is a wonderful tool to develop/debug Python applications. The following are steps to run/debug Odoo using PyCharm in Ubuntu. Though not officially stated, running Odoo in Windows is not a good idea. I started with a freshly installed Ubuntu 14.04.1 LTS desktop.

Read More

Python Package and Import

In Python, a module is a file that contains Python code. The first time a module is imported, all statements in the module are executed from top to bottom. The variables, functions, and classes declared in the module become accessible to other modules. Later imports, unless using reload(), use the already-imported module without executing the module code again. The module concept is easy to understand.

A project usually has many modules. A package is a directory that contains modules and a file. The package concept means two things in Python:

Read More

Odoo connector events

Odoo Connector ( is a framework used to integrate Odoo with other systems. It makes development of bi-direction data synchronization easier. Among other functions, it hooks into Odoo data model to intercept record creation, update and deletion calls and raise corresponding events that can be subscribed by an integration application. In this blog we look at the implementation details of its event mechanism.

Read More

Python Decorator Tutorial

Decorator is widely used in Python programs. As a beginner Python developer, I am curious about the theories and typical uses of a decorator. This blog summarizes what I learned about decorator.

Read More

Build a new addon in Odoo V8 part 2

This is the second part of the Open Adademy example. In part one we created a simple module layout. This part demonstrates model relationships, default values and the use of onchange api. All code are listed at the end of this blog. When making a change of an addon code, you may need to re-start Odoo or update the addon or do both.

Read More

Create Odoo V8 Docker image from GitHub source code using shell script

The following steps are based on [ANDRÉ SCHENKELS’s installation script.] ( with below changes. Some changes such as local settings are necessary because we starts from a base Ubuntu operating system.

Read More

Install Odoo V8 in Ubuntu from GitHub source code

This blog is based on [ANDRÉ SCHENKELS’s post.] ( The whole process can be fully automated by download and run [his installation script.] (

Read More