But if you want to know how to use this feature in a briefly way without touching too much concept like express. Read this article. I’ll show youan extreme concise example to setup a very basic prerender application.

Here we go.

Step 1

Setup a basic angular project. In this example, we have only one component and module

1
2
3
4
5
6
7
8
9
10
11
12
13

.
├── package.json
├── src
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── app.server.ts
│   ├── index.html
│   ├── main.browser.aot.ts
│   ├── main.browser.ts
│   └── main.server.ts
├── tsconfig.json
├── tsconfig.aot.json

app.component.ts is a very basic component

1
2
3
4
5
6
7
8
9

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: '<div>It works</div>'
})
export class App {

}

Then I make an AppModule with BrowserModule imported. Call withServerTransition will make sure prerendered app can transit into browser module.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import {NgModule} from '@angular/core';
import {App} from './app.component';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
    declarations: [App],
    imports: [BrowserModule.withServerTransition({
        appId: 'iroha'
    })],
    bootstrap: [App]
})
export class AppModule {

}

Step 2

To make sure server can bootstrap this app, A server module is also needed. The important part in AppServerModule is that it imports a module called ServerModule from @angular/platform-server. This module has some server replacement for the browser provider in BrowserModule.

After having these files in hand. use ngc (Angular Compiler) to compile these files, but before continue, let’s dig into the tsconfig.aot.json fileto see something important for compiling with ngc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "src/**/*.spec.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./compiled",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

To make AOT compiled code, you should use es2015 as module resolution, this will be convenient for import ngfactory and treeshaking. alsotheir are a little options which related to angular compile. angularCompilerOptions.genDir will setup the output path for ngc, all your compiledmodule will be output in that path. angularCompilerOptions.skipMetadataEmit property prevents the compiler from generating metadata files with the compiled application. Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them.

Then, use $(npm bin)/ngc -p tsconfig.aot.json to generate AOT files. You’ll get compiled directory in your project root. like this.

1
2
3
4
5
6
7
8
9
10

.
├── compiled
│   └── src
│       └── app
│           ├── app.component.ngfactory.ts
│           ├── app.component.ngsummary.json
│           ├── app.module.ngfactory.ts
│           ├── app.module.ngsummary.json
│           ├── app.server.ngfactory.ts
│           └── app.server.ngsummary.json

Step 3

Make some entry files for JIT browser, AOT browser and server render.

1
2
3

src/main.browser.ts,
src/main.browser.aot.ts,
src/main.server.ts

They are almost the same. but will a little different.

src/main.browser.ts

1
2
3
4
5
6
7
8
9

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'ts-helpers';

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


platformBrowserDynamic().bootstrapModule(AppModule);

src/main.browser.aot.ts

1
2
3
4
5
6
7
8
9

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'ts-helpers';

import {platformBrowser} from '@angular/platform-browser';
import {AppModuleNgFactory} from '../compiled/src/app/app.module.ngfactory';


platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

You may have noticed, the only difference between main.browser.ts and main.browser.aot.ts is In JIT, it use the AppModule directly and bootstrapthat module using platformBrowserDynamic.bootstrapModule(), while in AOT, it use platformBrowser.bootstrapModuleFactory() to bootstrap an ngfactoryfrom compiled file.

that’s the different. AOT compiled component and in file bootstrap, it won’t load JIT compiler, this will make the final shipped code smaller.

finally, let’ look into the main.server.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import 'core-js/es7/reflect';
import 'zone.js/dist/zone-node';
import 'ts-helpers';

import {renderModuleFactory} from '@angular/platform-server';
import {AppServerModuleNgFactory} from '../compiled/src/app/app.server.ngfactory';
import * as fs from 'fs';
import * as path from 'path';

let template = fs.readFileSync(path.join(__dirname, './index.html'));


    renderModuleFactory(AppServerModuleNgFactory, {
        document: template.toString(),
        url: '/'
    })
        .then((doc: string) => {
            console.log(doc);
        });

This file looks different from the previous two. it import zone-node instead of zone, because zone-node can be run in nodejs, zone cannot.

Because what we need is a string of the final html page. a factory called renderModuleFactory from @angular/platform-server is used here tobootstrap our AppServerModuleNgFactory which is imported from compiled code.

At last, you can run ts-node to get the string of rendered app.

Is that over. exactly. No, Prerender also involve a transition step when app has loaded into browser and your browser module has taken over allthe state from server prerendered page. But this is the mainly about webpack configuration, what you need is build a bundle and shipped with thegenerated html document from renderModuleFactory. and use preboot.js to make the state transition.

By reading this sort article, you now setup a up a very basic project without touch any unnecessary configuration. but to make a useful application,you still need to learn how to tame webpack and build a bundle for browser. I may write something about this in the future.

A tradition way to show large amount of data in a list is so called infinite list or lazy loading . A list loads data at 20-30 items per page until user reachesbottom of the list. then bumps the next page of data and appends to current list. This solution actually contributes to the initial loadingperformance but did not too much to the overall scrolling performance. Using this solution, user cannot quickly scroll to the last position of data.even worse, when you have loaded 2000-3000 items, your tab crashes.

Find Another Approach.

The reason why lazy loading or traditional infinite list doesn’t work is obvious. As long as you continue added items into your list, thoseDOM elements will exists until eats up all of your memory. So this solution is not fit for our requirements.

If you ever have some experience on Android or iOS development. You may find the solution which has developed for a long time. Yes, that’sListView (or RecyclerView, GridView) in Android and UITableView in iOS. They both use a similar idea which keep a limited amount of item on the fly and trash the view which is out of current viewport. To reduce the performance expense on create new views, they also recycle the trashed views and reuse them on demand. So this idea is what I choose for solving this problem.

First, How does this solution work?

The core of this solution is only maintaining a limited number of views in the list and keep remove and added necessary views into list when userscrolling the list. To make this possible we need to know the height of each view before performing a layout to place those views. In Android,the framework using a measurement procedure, but at web, we don’t have that mechanism, the dimension of an DOM element is control by css alongwith the element parent. So measurement on DOM is hard to do, we don’t want to discuss this topic at this article. We use a predefined heightfor each row. By doing this, we simplify the calculation of layout.

Another requirement to make this solution possible is we need to know the total number of items of our list. This is usually not much hard to do.To make things simple, we also make a little change, we have all data loaded once, so we don’t need to write load on demand.

Once we prepared data and container finish its layout, we will get container height , number of rows, row height . these information is pretty enough for our list view to render a initial state.

As you can see, our initial state only contains very limited number of elements. This is what we expect, another information we got fromthis picture is we have a scrollbar which indicates we have very long content to scroll. we use a straight forward method to calculate the totalheight of scroll content by simply multiply row height and item count. Here is the main DOM structure to make this possible.

1
2
3
4
5
6
7

<!-- infinite-list has a height of 100% viewport height this height will be used to determine how many views to render -->
<div class="infinite-list">
    <!-- infinite-list-holder has a height of all -->
    <div class="infinite-list-holder" style="height: 140000px;">
        <list-item-example></list-item-example>
    </div>
</div>

infinite-list is the container of visible views, it use a overflow-y: auto css to make the infinite-list-holder scrollable.When this structure is established, browser will render a scrollbar for infinite-list.

When user scroll down or up, the infinite-list-holder will scroll and together with its view content. meanwhile we listen to thescroll event to asynchronously calculate how far we have scrolled from initial position.

THE key part of the solution can keep a low memory usage is keep calculating every view position relative to viewport, add views which are about to visible in the viewport and remove views which is already out of viewport.

This is really very intuitive solution. keep added and remove views as long as there are the right views in our viewport, user will feellike our list is filled with all of the data items. OK, this is simple. But how do we know which view is out of viewport, which view isabout to add in viewport and how to place them in the correct position.

Do the layout

we already have some basic information about our container infinite-list, we know its width and height. we also get height of every row and total number of data. when we do layout at scrolling, we need one more information to know how much have we scrolled. This is not hard to obtain. In all browser, we can use element.scrollTop property to know the relative distance between top of the scrolling content and top of the wrapper content. (More detail, you can learn from MDN)

Calculate the index of top most view relative to our viewport, remove any views before that index.

1

let firstIndex = Math.floor(scrollTop / rowHeight);

Calculate the index of bottom most view relative to our viewport, remove any views after that index.

1
2
3
4

// we need this offset to complement the height of viewport. because a view may just cross the border of list-container
let firstViewOffset = scrollTop - firstIndex * rowHeight;
// containerHeight is equal to viewport height as we assumed
let lastIndex = Math.ceil((containerHeight + firstViewOffset) / rowHeight) + firstIndex;

Once we get the index range, we can remove view not inside this range and added views according this range. To added view at correct position,we need calculate its top y coordinate relative the list-holder.This calculation is more easy. We can calculate a view y position base on row height and data item index:

A view top y position relative to infinite-list-holder is rowHeight * index

The method we use to place our views on infinite-list-holder is using css3 translate3d and let each view’s position property be absolute.By using this method we get the hardware acceleration and not trigger any re-layout out side the infinite-list-holder. This is another important performance trick.

1
2
3
4
5

viewElement.style.transform = `translate3d(0, ${y}px, 0)`;
viewElement.style.webkitTransform = `translate3d(0, ${y}px, 0)`;
viewElement.style.width = `${containerWidth}px`;
viewElement.style.height = `${rowHeight}px`;
viewElement.style.position = 'absolute';

Once styles is applied. insert view into infinite-list-holder at proper position, browser will render the view for us.

This process will repeat whenever we need to do a layout operation. At the user aspect, the view will really scroll in the list.

Optimization.

So far so good, We have give a smooth scrolling experience to user using our real infinite-list .but currently we only create a verysimple example which using a simple structure for item view. What if we have a very complex view to render. we need to rapidly remove andadd DOM element to our list-holder, the view element may have many object to initialize. many listener to add. Creating new object especiallyDOM element object is expensive. Those views in our list are very the same structure, the only different is there content. so we decide todo some optimization to reuse the views.

To reuse view, we need modified our solution at two phase, remove and add phase. At remove phase, we don’t directly destroy that trashed view,we detach that view and move it into a recycle bin. we can create a class called RecycleBin to manage those recycled views. At add phase, we first try to retrieve view from RecycleBin, if we find the same view with the same index we expect, we can directly reattach it back to list-holder, because its content is the same. But if we don’t have that type of view, we can also pop a view from scrap views, and replace its binding data with correct data at certain index. If you use a MVVM framework, the framework will do the rest things. only when we don’t have scraped views from RecycleBin, we create a new view with data of certain index.

Our modified version reduce the dom create and destroy, also reduce the new memory allocation and GC operation (though this is really dependon JS engine). A drawback of this modification is we increase a little more memory usage. But if you can write some simple strategy to controlthe total number of scrap views. No need to worry about run out of memory.

So far we have briefly explained how our solution work. But we haven’t explained how to implement in Angular.

The Angular Implementation

we only cover the Angular 4 and above, if you want to find an AngularJS (1.x) implementation. You can read the code from this repository to see how toimplement this approach in Angular 1.5, although this is grid view which is a little complicated.

In Angular, things are not much different. We still use the theory we have explained before plus a little angular feature.

In Angular, there are component and directive ( include structural directive ) which can manipulate DOM as we need. Recall our feature requirement,Our list, in fact, has repeat structure which presents data in same form repeatedly. The idea flash in your mind first must be ngFor directive which is a structural directive can clone its content repeatedly. The difference between ngFor and our directive is ngFor render all DOM in the collection we don’t. So we use a similar directive called infiniteFor which has a very same usage.

1
2
3

<any *infiniteFor="let row of collection">
    {{row}}
</any>

By using these semantic we borrowed from ngFor, we can create a local variable binding to its template from the iterable collectionIn Angular we don’t have the concept scope but it is a very similar concept which using an object to store your local variable and bind to the template.We won’t use too much words to describe how ngFor implement. if you don’t understand and have interest in this, you can read official document: Structural Directive and ngFor API Guide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

@Directive({
    selector: '[infiniteFor][infiniteForOf]'
})
export class InfiniteForOf<T> implements OnChanges, DoCheck {
    private _differ: IterableDiffer<T>;
    private _trackByFn: TrackByFunction<T>;

    // This is a major difference from ngFor directive, we actually need store the whole collection to a data structure (we use array)
    private _collection: any[];

    @Input() infiniteForOf: NgIterable<T>;

    @Input()
    set infiniteForTrackBy(fn: TrackByFunction<T>) {
        this._trackByFn = fn;
    }

    get infiniteForTrackBy(): TrackByFunction<T> {
        return this._trackByFn;
    }

    @Input()
    set infiniteForTemplate(value: TemplateRef<InfiniteRow>) {
        if (value) {
            this._template = value;
        }
    }

    constructor(private _infiniteList: InfiniteList,
                private _differs: IterableDiffers,
                private _template: TemplateRef<InfiniteRow>,
                private _viewContainerRef: ViewContainerRef) {
    }

    ngOnChanges(changes: SimpleChanges): void {
        if ('infiniteForOf' in changes) {
            // React on infiniteForOf only once all inputs have been initialized
            const value = changes['infiniteForOf'].currentValue;
            if (!this._differ && value) {
                try {
                    this._differ = this._differs.find(value).create(this._trackByFn);
                } catch (e) {
                    throw new Error(`Cannot find a differ supporting object '${value}' of type '${getTypeNameForDebugging(value)}'. NgFor only supports binding to Iterables such as Arrays.`);
                }
            }
        }
    }

    ngDoCheck(): void {
        if (this._differ) {
            const changes = this._differ.diff(this.infiniteForOf);
            if (changes) {
                this.applyChanges(changes);
            }
        }
    }

    private applyChanges(changes: IterableChanges<T>) {
        if (!this._collection) {
            this._collection = [];
        }
        let isMeasurementRequired = false;

        changes.forEachOperation((item: IterableChangeRecord<any>, adjustedPreviousIndex: number, currentIndex: number) => {
            if (item.previousIndex == null) {
                // new item
                isMeasurementRequired = true;
                this._collection.splice(currentIndex, 0, item.item);
            } else if (currentIndex == null) {
                // remove item
                isMeasurementRequired = true;
                this._collection.splice(adjustedPreviousIndex, 1);
            } else {
                // move item
                this._collection.splice(currentIndex, 0, this._collection.splice(adjustedPreviousIndex, 1)[0]);
            }
        });
        changes.forEachIdentityChange((record: any) => {
            this._collection[record.currentIndex] = record.item;
        });

        if (isMeasurementRequired) {
            this.requestMeasure();
        }

        this.requestLayout();
    }
}

Instead of directly react on data changes, we need to store the whole data set into a collection because we may use it later,But IterableDiffer is still a useful tool to manipulate our data collection without need to learn the actual data structure of source data.when any changes of data happen, we mark a isMeasurementRequired to determine whether we need to recalculate the list-holder height.This is needed when we change the size of collection. Whenever a change happen, a layout is requested.

Consider when we should do the layout. By learn the feature of our component, we can find three timing to do layout:

• After a measurement. (data set size changes, container dimension changes)
• scroll event happens.
• data changes

The actual layout is the core process. we will break it into several parts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

private layout() {
    if (this._isInLayout || !this._collection || this._collection.length === 0) {
        return;
    }
    this._isInLayout = true;
    let {width, height} = this._infiniteList.measure();
    this._containerWidth = width;
    this._containerHeight = height;
    this.findPositionInRange();
    for (let i = 0; i < this._viewContainerRef.length; i++) {
        let child = <EmbeddedViewRef<InfiniteRow>> this._viewContainerRef.get(i);
        this._viewContainerRef.detach(i);
        this._recycler.recycleView(child.context.index, child);
        i--;
    }
    this.insertViews();
    this._recycler.pruneScrapViews();
    this._isInLayout = false;
    this._invalidate = false;
}

we first check the prerequisites, we should not do layout when:

• A layout is performing.
• Collection is empty.

Then update containerHeight because we need this in findPositionInRange,After we do findPositionInRange( which is actually calculate the first and last index need to be in list-holder). we detach our existed viewsin list-holder. and re insert needed views back into it. after all job is done, we also prune the recycle bin to make sure it will not bloat too big.

How we implement findPositionInRange has been explained in the previous section. the start index and end index is exactly follow those formula to calculate.So the next important thing is adding views back to list-holder. the getView method first try to get views from recycle bin, if not find, create a new EmbeddedView with InfiniteRow object, this object is a data structure provide the data and some information like index, count. it has important property $implicit which is used by angular core to binding our data to view.

Once we get the view, dispatchLayout method will do the rest job to place views (applyStyle and insert).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

private insertViews() {
    for (let i = this._firstItemPosition; i <= this._lastItemPosition; i++) {
        let view = this.getView(i);
        this.dispatchLayout(i, view, false);
    }
}

private getView(position: number): ViewRef {
    let view = this._recycler.getView(position);
    let item = this._collection[position];
    let count = this._collection.length;
    if (!view) {
        view = this._template.createEmbeddedView(new InfiniteRow(item, position, count));
    } else {
        (view as EmbeddedViewRef<InfiniteRow>).context.$implicit = item;
        (view as EmbeddedViewRef<InfiniteRow>).context.index = position;
        (view as EmbeddedViewRef<InfiniteRow>).context.count = count;
    }
    return view;
}

private applyStyles(viewElement: HTMLElement, y: number) {
    viewElement.style.transform = `translate3d(0, ${y}px, 0)`;
    viewElement.style.webkitTransform = `translate3d(0, ${y}px, 0)`;
    viewElement.style.width = `${this._containerWidth}px`;
    viewElement.style.height = `${this._infiniteList.rowHeight}px`;
    viewElement.style.position = 'absolute';
}

private dispatchLayout(position: number, view: ViewRef, addBefore: boolean) {
    let startPosY = position * this._infiniteList.rowHeight;
    this.applyStyles((view as EmbeddedViewRef<InfiniteRow>).rootNodes[0], startPosY);
    if (addBefore) {
        this._viewContainerRef.insert(view, 0);
    } else {
        this._viewContainerRef.insert(view);
    }
    view.reattach();
}

We have nearly all done. But because we separate the component into two pieces. we haven’t implement the container component InfiniteList.It is responsible for listen to scroll event, resize event and set the height to list-holder, it has a simple dom structure:

1
2
3
4
5
6
7

<!-- infinite-list.html -->
<div class="infinite-list" #listContainer
     [ngClass]="scrollbarStyle">
    <div class="infinite-list-holder" [style.height]="holderHeightInPx">
        <ng-content></ng-content>
    </div>
</div>

By using ng-content we can put all element generated by InfiniteForOf directive. The important thing behind the html is a css definition.We must make infinite-list overflow-y: auto and give it a limit height (if you container element have a height, you can use 100%)

1
2
3
4
5
6
7
8
9
10
11

.infinite-list {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  contain: layout;          // this is performance trick, you can lookup this css property in MDN
  -webkit-overflow-scrolling: touch; // make a touch scroll has resilient.
  .infinite-list-holder {
    width: 100%;
    position: relative;     // relative is also a very important property. because of all its children will be position: absolute;
  }
}

In the InfiniteList class we heavily use the Observable from RxJS, if you are not familiar rxjs, you can find some material from the internet. There some important notice when implement this component.

• Do all DOM event binding in AfterViewInit lifecycle hook. and besides, you should use setTimeout() to trigger a immediate measurement. Becausethis operation will change _containerWidth and _containerHeight in one tick which will cause an error in zone.js. so we need to schedule it to next tick.
• scrollPosition subject is a BehaviorSubject, it has a convenience that a initial value will be emitted without need the scroll event. This is helpful toinitialize the layout of InfiniteForOf.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

@Component({
    selector: 'infinite-list',
    templateUrl: 'infinite-list.html',
    styleUrls: ['infinite-list.less']
})
export class InfiniteList implements AfterViewInit, OnDestroy {
    private _holderHeight: number;
    private _containerWidth: number;
    private _containerHeight: number;

    private _subscription: Subscription = new Subscription();

    private _scrollPosition: BehaviorSubject<number> = new BehaviorSubject(0);
    private _sizeChange: BehaviorSubject<number[]> = new BehaviorSubject([0, 0]);

    @ViewChild('listContainer') listContainer: ElementRef;

    set holderHeight(height: number) {
        if (height) {
            this._holderHeight = height;
        }
    }

    get holderHeight(): number {
        return this._holderHeight;
    }

    get holderHeightInPx(): string {
        if (this.holderHeight) {
            return this.holderHeight + 'px';
        }
        return '100%';
    }

    /**
     * current scroll position.
     * @type {number}
     */
    get scrollPosition(): Observable<number> {
        return this._scrollPosition.asObservable();
    }

    /**
     * list container width and height.
     */
    get sizeChange(): Observable<number[]> {
        return this._sizeChange.asObservable();
    }

    @Input() rowHeight: number;

    ngAfterViewInit(): void {
        if (window) {
            this._subscription.add(Observable.fromEvent(window, 'resize')
                .subscribe(() => {
                    let {width, height} = this.measure();
                    this._sizeChange.next([width, height]);
                }));
        }
        this._subscription.add(Observable.fromEvent(this.listContainer.nativeElement, 'scroll')
            .map(() => {
                return this.listContainer.nativeElement.scrollTop;
            })
            .subscribe((scrollY: number) => {
                this._scrollPosition.next(scrollY);
            }));

        setTimeout(() => {
            let {width, height} = this.measure();
            this._sizeChange.next([width, height]);
        });
    }

    ngOnDestroy(): void {
        this._subscription.unsubscribe();
    }

    measure():{width: number, height: number} {
        if (this.listContainer && this.listContainer.nativeElement) {
            let rect = this.listContainer.nativeElement.getBoundingClientRect();
            this._containerWidth = rect.width - this.scrollbarWidth;
            this._containerHeight = rect.height;
            return {width: this._containerWidth, height: this._containerHeight};
        }
        return {width: 0, height: 0};
    }
}

By now, we have all done. let’s use our component and directive together to make a list with infinite smooth scroll.

1
2
3
4
5
6
7

<div class="demo-container" *ngIf="collection">
    <infinite-list [rowHeight]="140">
        <list-item-example *infiniteFor="let row of collection; let i = index" [item]="row" [index]="i">

        </list-item-example>
    </infinite-list>
</div>

In this case, we give the view height 140 to InfiniteList component and pass row local variable to ListItemExample component, the actual list item willbe rendered by ListItemExample component.

The demo can be found at GitHub.

The real component has some additional feature which can tell the list item component current scroll state. This will be helpful to make some decision when user is performing a fast scroll and avoid unnecessary resource loading.

I’v also encountered this issue when joining a new team. And I think I can’t change the API definition. So the only way to save time is do some tricky.And this issue can be easily solved by using $http interceptors.

Assume that I have an API which return an object like this.

1
2
3
4
5
6

{
    "status": 0, // 0 indicates an successful request, otherwise the request is a failure one.
    "data": {
    },           // this is what the real data resides in.
    "message": null // If status isn't 0, this message will contain the error information.
}

Well, this API definition is very straightforward though it is not follow the RESTful style. What I need do is to intercept every response made from this APIand check the value of status. If it is not 0, change the statusCode of the response object to >=400. Besides, that I also want to make an global interceptorto achieve this so I can get rid of writing same check code everywhere.

Let’s start to see what $http interceptors can help.

According to AngularJS Document Interceptors are factory which can modify request and response.You need define some interceptors and push them into $httpProvider.interceptors array in your config function.

Let’s define an interceptor to check the status and reject the response if status code is not 0.Assume we have an API pattern is /api/:someTarget (:someTarget is an parameter which can be changed by need).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var restInterceptor = angular.module('RestInterceptor', []);

restInterceptor.factory('RestInterceptor', function($q) {
    return {
        // response function will be invoked when request responds with successful status.
        // This is usually means the status code is 200~299 or an redirect response
        response: function(response) {
            var apiPattern = /^(?:\/api\/)\S+/;
            // we need filter the config object to ensure only check our API response.
            if(apiPattern.test(response.config.url) && typeof response.data.status !== 'undefined' && response.data.status !== 0) {
                //here we modify the http status code to 400 indicates this should be treated as an error.
                response.status = 400;
                // reject this response will let the end point caller's error handler be called. also, you can
                // chain an responseError interceptor to handle this error.
                return $q.reject(response);
            }

            return response;
        }
    }
});

This code snippet create an interceptor to check the normal response whose HTTP status code is usually 200, but modify an response if its data.status doesn’tequal 0. and modify the HTTP status code to 400. so we can treat the API as an RESTful API and All the facility provided by angular or three party dependencycan be used directly without redundant check code.

The rest job is to make the interceptor work, we need to push this factory into $httpProvider.interceptors. Note that the invoke order of response and responseErrorinterceptors are in reverse registration order. This is not clearly documented in official document.

1
2
3
4
5
6

var app = angular.module('myApp', ['RestInterceptor']);
app.config(function($httpProvider, RestInterceptor) {
    // if you have other interceptors to handle error response, make sure to push "RestInterceptor" at last.
    $httpProvider.interceptors.push('OtherErrorHandlerInterceptor');
    $httpProvider.interceptors.push('RestInterceptor');
})

Now you can write your code without need to check whether you got an error in your success handler.

1
2
3
4
5
6
7
8
9
10
11
12

var app = angular.module('myApp');
app.controller('SomeController', function($scope, $http){
    $http.get('/api/first-item')
        .success(function(data, status, headers, config) {
            // write your code for successful request
            // result object will be always valid.
            console.log(data);
        })
        .error(function(data, status, headers, config) {
            console.log(status); // will print 400 when data.data.status != 0
        });
});

Next time, I will use interceptor to write a notification module which will automatically make a toast notification to user when an API requesthas failed. And will combine with the RestInterceptor I just have wrote.

I have a directive nya-bootstrap-select which using a value attribute on list element. I give this attributea new meaning that its value will be the option value for predefined options. It works well in AngularJS apps until I tried to add some e2e test onit using Protractor.

In Protractor elements are selected by the webdriver api and I hasn’t look into the implementation of selenium, but I can sure it may take the W3C standardand make its own implementation to retrieve the value of value attribute.

As the W3C standards says:

This integer attributes indicates the current ordinal value of the item in the list as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).

The list element has a value attribute which only accepts integer value. Although I can use a String value in my AngularJS app but this is not warrantedby standard and can varies between implementations. Just as the selenium implementation, the WebElement.getAttribute(‘value’) on my directive alwaysreturn 0. This is not my expected.

In conclusion, It is recommended for those who want to use some predefined attribute on their own directive to look up the standard whether its behavior has already been defined toavoid conflicts and variants between implementations.

If anyone have ever used yeoman to generate an angular project. You may find a grunt task in the generated Gruntfile called usemin.This task combined with several other task can concatenate your stylesheet andjavascript files then minimize those files, at last a file revision task is executed internally. The key of busting cache is the file revision task which will calculate your files’ hash value and use the value torename your file, this will totally solve the cache issue. whenever your file changes, the hash value changes and you get a different filename of assets.

Back to the hexo theme project, I found it is hard to use the grunt task directly in my project because those task will modify the html or template file to update the script and link tag in order torevision the assets file name. But hexo template file should only be modifed by programmer and generate html file by hexo. So I think it’s time to write a similar procedure by myself using hexo api.

Hexo provide two api helper and generator to generate tags in template and generate files with specified path. I will use this two api to keep the reference in template update and generate the new file with hash prefix file name.Because I can’t ensure the execution order of these two api, the concat and minified operation are abandoned.First let’s write a file hash method. This method accepts two arguments: file absolute path and hash digit length. because we don’t need the entire hash string to name asset file. the return value will be the new file name prefixed with a hash string

1
2
3
4
5
6
7
8
9

var fs = require('fs'),
  path = require('path'),
  crypto = require('crypto');
// modules above will be shared in the following two code blocks.
function filehash(filepath, digitlength) {
  var hash = crypto.createHash('md5').update(fs.readFileSync(filepath)).digest('hex');
  var prefix = hash.slice(0, digitlength);
  return prefix + '.' + path.basename(filepath);
}

This method will be called by helper and generator to get the assets files’ hash value file name.

Now let’s begin from the generator. this api will let me to provide an array which tell hexo to write some files with specified path. I can copy the assets file with hashed file name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var themeSourcePath = path.resolve(__dirname, '../source'); // we need the theme source path to find the assets folder
var hashLength = 8;
// this is define of the generator.
hexo.extend.generator.register('filerev', function(locals) {
  // find all directories in theme source directory.
  var directories = fs.readdirSync(themeSourcePath);
  var outputData = [];
  directories.filter(function(dir){
    return dir === 'css' || dir === 'js';
  }).forEach(function(dir){
    var files = fs.readdirSync(path.join(themeSourcePath, dir));
    outputData = outputData.concat(files.map(function(file) {
      return {
        path: dir + '/' + filehash(path.join(themeSourcePath, dir, file), hashLength),  // call filehash method we write before.
        data: function() {
          return fs.createReadStream(path.join(themeSourcePath, dir, file));
        }
      };
    }));
  });

  return outputData;
});

This generator will generate a set of new file with the hash prefix and its original folder structure in public folder when you run hexo generate.

With the hash prefixed file generated properly, we have to update the reference in script and link tag. here we using helper to define an ejs helper called usemin to generate our script and link tag.

1
2
3
4
5
6
7
8

hexo.extend.helper.register('usemin', function(input) {
  var filepath = path.join(themeSourcePath, input);
  var dir = input.split('/');
  var ext = path.extname(input);
  var newFilename = filehash(filepath, hashLength);
  var newPath = path.resolve('/', path.join(dir.slice(0, dir.length - 1).join('/'), newFilename));
  return ext === '.js' ? '<script type="text/javascript" src="' + newPath + '"></script>' : '<link rel="stylesheet" href="' + newPath + '">';
});

Put this scripts file in scripts folder under my theme directory, the script will be loaded by hexo automatically. Now there are only one step to get the goal, modify template using the usemin helper

In head.ejs

1
2
3
4
5

<head>
  <!-- other tags... -->
  <%- usemin('css/styles.css') %>
  <%- css('fancybox/source/jquery.fancybox.css') %>
</head>

In scripts.ejs

1
2
3
4

<!-- other tags... -->
<%- usemin('js/jquery.js') %>
<%- js('fancybox/source/jquery.fancybox.js') %> <!-- we can't process this file, so use the js helper -->
<%- usemin('js/caption.js') %>

When I run hexo generate, the index.html will be generated by hexo which contains head.ejs and scripts.ejs part

1
2
3
4
5
6
7
8
9
10
11

<head>
  <!-- omit other tags... -->
  <link rel="stylesheet" href="/css/2bb849c6.styles.css">
  <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css">
</head>
<body>
  <!-- omit other tags... -->
  <script type="text/javascript" src="/js/cf26f8f0.jquery.js"></script>
  <script src="/fancybox/source/jquery.fancybox.js" type="text/javascript"></script>
  <script type="text/javascript" src="/js/33415e49.caption.js"></script>
</body>

From caniuse.com I know that the 3d transform property although is supported by Safari and iOS, but it is still needed a vendor prefix to make it work. After add the -webkit- prefix. the bugon iOS disappeared. For convenience, I using a grunt task grunt-autoprefixer to do this automatically.

This theme is made from ground. Almost everything, I have to learn from hexo official site, where its document is not very detailed.To save time, I made a decision that I would use the technology which I already handled of. So this theme is designed with Adobe Edge Reflow CC, made with less, ejs and a little jquery. Also, I use grunt to build a early preview version to check the design and some css styles. In fact, it’s not a good practice to develop a hexo theme.

It is worth to talk about the interesting things when developing this theme, Some of these may have someone to not make a mistake.

This theme is design with Adobe Edge Reflow CC, this means I’ll to make a responsive design at very first. so I’ll have to develop with both desktop and mobile screen. Luckly, Chrome has a emulator can provide different device screen size to preview the result. But when I previewed with that, All of my fonts became very big (almost scaled 3 times bigger) and the content were out of screen on mobile devices. Debug this wasted a lot of time until I found I missed a meta tag to declare the viewport and initial-scale factor.

Then I add this meta tag then everything looks good.

1

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

To make the navigation bar more accessible on mobile devices. I want to make a drawer navigator which may be very similar to the drawer of Android app.At first, I made this very jquery, write some code and debug, this was time waste. Then I found a method called checkbox hack which is far more easy to create a navigator drawer and with no javascript need! The mystery is you can make a invisible checkbox (whether make it opacity=0 or move it out of screen) and then attach one or more labels with it, these labels are clickable and styleable. Another key technology is general sibling selectors which make it possible to use the :checked pseudo class to define a different styles for the drawer and backdrop element based on the checkbox state.

it is almost like this:

1
2
3
4

<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" class="drawer-label">Drawer Button</label>
<div class="drawer"></div>
<label for="drawer-toggle" class="backdrop"></label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#drawer-toggle {
    opacity: 0;
    position: absolute;
}

.drawer-label {
    // you can make any styles what you want your drawer toggle button to be.
}

.drawer {
    transition: transform 0.2s ease-out;
    transform: translate3d(-100px, 0, 0); // we move the drawer out of screen when initialized.
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
}

.backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

// then came the interesting part.

#drawer-toggle:checked ~ .drawer {
    transform: translate3d(0, 0, 0);
}

#drawer-toggle:checked ~ .backdrop {
    display:block;
}

This technology has very good browser compatibility. even with IE9 but If you want to be compatible with the older browser, You may consider a javascript version. But I don’t care.

After I almost complete the styles and layout development and began to convert html to ejs template. I finally found a project called hexo-theme-unit-test. Which is actually a sample blog with every type of post. What I need is copy may theme into its themes folder. and modify the _config.yml. But, when I run the command hexo server it didn’t work! After tried serveral times, I found this unit-test project lack some dependency declarations in its package.json. This would result in the ejs template not being rendered. after installed the dependencies. it works well. If you want to develop a theme, you should work with this project, no need to config a grunt task. and write a pure html file.

This hexo theme is still in development, some pages and functions are not available, the styles need to be tweaked, I’ll continue work with this.

Just add a style windowActionBarOverlay and set it true. The snippet is copied from android developer.

1
2
3
4
5
6
7
8
9
10

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.AppCompat">
        <item name="android:windowActionBarOverlay">true</item>

        <!-- Support library compatibility -->
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

But the training material from android developer site isn’t use an ListView or GridView with ActionBar overlay. When you just follow its instruction to set paddingTop on your ListView or GridView.You may not get expected effect. the scrolling content is just cut from the air. like the left side show on the figure.

To achieve the right effect like the right side. Android Developers Official G+ page give a tip on G+ https://plus.google.com/+AndroidDevelopers/posts/LpAA7q4jw9M

Add an attribute android:clipToPadding to your ListView or GridView and set it false. then you can set your paddingTop on your ListView or GridView as your ActionBar height.

1
2
3
4

<ListView
    …
    android:clipToPadding="false"
    android:scrollbarStyle="outsideOverlay" />

You can simply commented those Log.v out or Using a ProGuard to remove any verbose log statements directly from the bytecode of your compiled JAR executable. This method is described in Christopher’s answer in the StackOverflow post

The easiest way is to run your compiled JAR through ProGuard before deployment, with a config like:

1
2
3

-assumenosideeffects class android.util.Log {
    public static int v(...);
}

That will – aside from all the other ProGuard optimisations – remove any verbose log statements directly from the bytecode.

由于Brackets基于webkit写成的，所以可以按照开发web的方法来编写插件。而Themes插件则利用CodeMirror来编写主题。不过里面自带的Monokai过于鲜亮，加上Brackets在Mac下有字体渲染bug（后面会解释如何修复这个问题），所以我决定按照Webstorm的monokai主题配色方案来修改一个Brackets的monokai主题。

不过修改起来才发现，Brackets的功能还是略弱，比如不能按照语言来定义颜色，不能区分很具体的变量用法（比如未使用的局部变量），在修改配色的时候首先照顾javascript，然后才是css，所以css最后效果和正常的monokai差距较大，是个遗憾之处。

总的来说修改之后的monokai主题有以下优点：

• 和默认的monokai-dark-soda相比，对比度降低了一些，不那么刺眼了，虽然还是优点略亮。
• 此外还解决了mac下字体显示的问题

###效果预览：####

JS代码效果：

HTML代码效果：

CSS代码效果：

###下载地址：###https://gist.github.com/lordfriend/858e369f8e9f7cd9861c

欢迎试用与反馈bug

###使用方法：###

• 安装Brackets的Themes扩展：https://github.com/MiguelCastillo/Brackets-Themes
• 然后打开扩展的文件夹（Help菜单->show Extensions Folder)，进入user/themes/theme，然后将下载的monokai-webstorm.css放到里面，重启Brackets，在Themes菜单里选择monokai-webstorm主题即可。

###如何修复mac下字体显示问题###

mac下字体显示问题是因为brackets自己加了一个 -webkit-font-smoothing: antialiased 属性导致的。这个属性本来是为了让windows下字体显示更平滑，不过 antialiased 这个值在mac下却导致了字体显示变成点阵一样的效果。解决办法就是使用 subpixel-antialiased 值来代替默认值。

如果你要定义自己的主题。那么在 .CodeMirror里加上这样一句就可以了：

1
2
3

.CodeMirror {
    -webkit-font-smoothing: subpixel-antialiased;
}

由于nya-bootstrap-select依赖bootstra-select这个jQuery插件，而该插件需要使用select标签来定义下拉选框。但Angular内部已经把select标签作为了一个directive，并且定义了一些列特殊行为。这些行为导致了目前各种冲突，其中一个问题就是，当我们使用ng-options来生成选项的时候。select directive会先生成一个?值的option作为默认选项，一开始为了保持美观和一致性，我删除了这个选项，但我发现angular内部似乎会错误的引用位置，导致当select的值由无变成确定值时，删除后的第一个实际option被删除。这带来了严重的问题，最后不得已，我只能保留那个？的option，但这样很难看。看起来避免使用select标签才是根本解决之道。

1
2
3
4
5
6
7
8
9

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

是不是感觉很恐怖，随着嵌套的回调函数增加，结尾会有大量的花括号和圆括号 }); 出现。

###Promise###在javascript中实现异步最简单的方式是Callback。遗憾的是，这种编程方式牺牲了控制流，同时你也不能throw new Error()并在外部捕获异常。Promise的出现解决了这两个需求，又保持了javascript异步的优势，不同于Fiber这种多线程的实现方式，Promise只是一种编程方式的变化。而无须在底层改变。

CommonJS的规范提到了多种Promise，我们只介绍其中一种的实现q (https://github.com/kriskowal/q)

我们在这里不讲解抽象的Promise规范，这多半是实现者应该关心的，我们直接从示例入手，如果你有兴趣，可以参见Promise/A+。

q的核心是一个promise对象的then方法，他接受两个回调方法，一个promise被定义之后有3种状态，pending（过渡状态），fullfilled（完成状态），rejected(错误状态)。一个promise只能是这三种状态种的一种，而无法是他们的混合状态。

• pending状态可以理解为promise还没有获得确定值，就相当于一个任务还没有完成。
• fullfilled状态可以理解为完成并返回结果。这时then(onFullfilled, onRejected)的onFullfilled方法会被调用。
• rejected状态可以理解为错误，并结束。返回错误。这时then(onFullfilled, onRejected)的onRejected方法会被调用。

了解了核心思想后，我们来看一个例子，在这个例子中我们先读取一个json文本文件，然后将其解析成javascript对象，最后这个对象进行修改再保存回去。按照传统的callback写法，有如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

fs.readFile('example.json', function(err, data){
  if(err) {
    console.log(err):
  } else {
    try {
      var obj = JSON.parse(data);
      obj.prop = 'something new';
      fs.writeFile('example.json', JSON.stringify(obj), function(error){
        if(err) {
          console.log(error);
        } else {
          console.log('success');
        }
      });
    } catch(e) {
      console.log(e);
    }

  }
});

在这个例子中，控制流被切割成多个部分（每次异步都要处理一次错误），并且 JSON.parse 的错误必须在内部捕获，但却不能跑到外部。因为在异步回调中无法抛出异常。现在当我们使用promise的时候，假设我们有个能够返回一个 promise 对象的 readFile 和 writeFile 方法。那么上面的代码就可以变成如下形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var promise = readFile();
promise
  .then(function(data){
  // we don't need to catch error. in other words. we can throw error in this callback.
  var obj = JSON.parse(data);
  obj.prop = 'something new';
  // return a promise. so we can chain the then() method.
  return writeFile(JSON.stringify(obj));
  })
  .then(function(){
    console.log('success');
  }, function(err){
    // all error will fall down here.
    console.log(err);
  });

上面的例子中，我们首先从 readFile() 方法里获得了一个返回的 promise 对象，然后使用这个对象的 then() 方法。在这里，我们只传入了一个 onFullfilled 回调方法，根据Promise/A+的文档。then() 一定会返回一个 promise 对象，所以我们又连接了一个 then() ，由于这个 then() 是最后一个，所以我们需要在这里提供一个 onRejected() 回调方法来处理所有的错误。在第一个 onFullfilled() 回调方法中，我们返回了一个 promise ，这个 promise 的处理结果将会在下一个 then() 的 onFullfilled() 方法中取得。

这段代码执行的时候，当任意位置抛出异常的时候，最后一个then的 onRejected 回调会被执行。否则一切按照从上至下的顺序执行，整个控制流都十分简洁明了。

因为 then() 方法必须返回一个promise，实际上我们也可以结合同步方法返回一个已经fullfilled的promise比如下面这个例子

1
2
3
4
5
6
7
8
9
10
11

var promise = readFile();
promise
  .then(function(data){
    return JSON.parse(data);
  })
  .then(function(obj){
    obj.prop = 'something new';
    console.log(obj);
  },function(err){
    console.log(err);
  });

上面例子中第二个then会在第一个then返回之后被执行，因为第一个then返回的时候，由于JSON.parse是同步方法，所以返回了一个值，这个值会被包装成一个fullfilled的promise.

###制作promise的API###

上面例子中我们知道了如何使用promise提供的核心方法 then() 。但是对于平时使用的fs等异步的库我们要怎么才能利用promise呢。在q的文档中介绍了q-io库，里面将常用的io方法都用promise的模式包装了一遍，在实际使用中，你可以使用那个库的方法。不过我们在这里简单的对fs进行包装，让其支持promise，这样以后遇到任何异步方法，你都可以将其转化。

首先定义改一个readFile方法，返回promise，这里利用了 Q 的 defer() 方法，创建一个 deferred 对象。这个对象有连个关键的方法 resolve 和 reject() 。当resolve(value)执行之后，promise变成fullfilled状态，fullfilled的值就是value当 reject(reason) 执行之后，promise变成了rejected状态，reason会被传递到onRejected()方法。

1
2
3
4
5
6
7
8
9
10
11
12

var Q = require('q');
function readFile(callback){
  var deferred = Q.defer();
  fs.readFile('example.json', function(err, data){
    if(err){
      deferred.reject(err);
    } else {
      deferred.resolve(data);
    }
  });
  return deferred.promise.nodeify(callback);
}

注意到这里面我们依然提供了一个callback，用于提供一些需要callback的场合的兼容性，我们利用 promise 对象的nodeify方法来调用这个callback，这个callback可以为undefined。

另外一点需要注意的是，一个promise状态改变之后，不能再次改变，所以，你只能调用一次reject或resolve。

有了这个API，我们便可以像前面例子里那样，使用promise来执行读取文件的操作了。其他异步回调转化成返回promise的异步方法基本上都可以参照这个模式来做。

###一次处理多个promise的###

如果你有几个异步方法，他们都返回promise，并且当这些方法都处理完之后，你才能进行下一步，Q提供了一个all()方法来帮助你消化多个promise。

1
2
3
4
5
6
7
8
9
10
11

Q.all([
  readFile('file1.json'),
  readFile('file2.json')
  ])
  .then(function(dataArray){
    for(var i = 0; i < dataArray.length; i++){
      console.log(dataArray[i]);
    }
  }, function(err){
    console.log(err);
  });

在这里例子里，我们将一个promise数组传给 all() all返回一个promise，当数组里面的所有promise都为fullfilled状态时，我们的then()方法才会被调用。这时fullfilled值是一个数组，每个元素对应前面promise的fullfilled值。当任意一个promise变成rejected状态的时候，all的promise会立即reject而不等其他的完成。

###利用promise改写你的项目###

最佳的理解方法便是事件，你可以把一些nodejs的基本异步方法包装成promise，这样你就可以在整个程序的多个地方使用这些方法。并且让你的程序的异步代码看起来更整洁，更容易理解。阅读 Q的文档 了解更多的API和方法。并在程序中使用这些方法，使你的代码更优美，逻辑更健壮。阅读 Promise/A+ 。了解promise原理。

nya-bootstrap-select 是一个对bootstrap-select的包装，让这个功能强大的jquery插件可以用angularjs特有的风格在angularjs程序中使用。

依赖： AngularJS 1.0+(这个是当然的） bootstrap-select 1.3+ bootstrap css （支持2.x和3.x）

安装：推荐使用bower来安装，可以帮助你自动处理依赖关系。

1

bower install nya-bootstrap-select

将src/nya-bootstrap-select.js加入到你的页面里

1

<script src="bower_components/nya-bootstrap-select/src/nya-bootstrap-select.js"></script>

将 nya.bootstrap.select作为angular app的依赖

1

angular.module('yourApp', ['nya.bootstrap.select']);

现在可以开始使用了。本文就只列举一个例子，更多例子请参考文档 http://nya.io/nya-bootstrap-select/

在select标签里，加入class nya-selectpicker 也可以作为属性加入。 然后将你的scope变量绑定到ng-model上，这样你可以获取到选择的值。假设你的$scope.myOptions就是选项的条件

1
2
3

<select class="nya-selectpicker" data-container="body" ng-model="myModel" ng-options="c.value for c in myOptions">

</select>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function bindJQuery() {
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // reset to jQuery or default to us.
  if (jQuery) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });
    // Method signature:
    //     jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments)
    jqLitePatchJQueryRemove('remove', true, true, false);
    jqLitePatchJQueryRemove('empty', false, false, false);
    jqLitePatchJQueryRemove('html', false, false, true);
  } else {
    jqLite = JQLite;
  }
  angular.element = jqLite;
}

Angular在加载到内存之后便会执行这段代码。以后所有的angular.element()创建或包装的对象都是jqLite对象。如果弄错了加载顺序，那么使用$()创建出来的对象与angular的jqLite对象便存在兼容性问题，导致一些奇怪的现象。

###正确的做法###如果你要在项目中同时使用jQuery与AngularJS那么，一定要让jQuery在angularjs之前加载。比如下面这样写才能保证程序不出现奇怪的问题：

1
2

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

###我们需要哪些Grunt插件？###

过去这个任务需要connect-livereload, grunt-contrib-connect, grunt-contrib-watch来配合完成. 感谢connect和grunt插件的开发者，我们现在只需要2个插件就可以做到这一切了：

• grunt-contrib-connect, 用来充当一个静态文件服务器，本身集成了livereload功能，因此不再需要connect-livereload中间件
• grunt-contrib-watch, 用来监视文件的改变，然后执行一些任务，同时保持 grunt-contrib-connect 的服务器一直开启

为了不用不厌其烦的写grunt.loadNpmTask()，我们使用 load-grunt-tasks 来帮助我们自动加载这些插件，为了能看到grunt任务执行时间，我们加入了 time-grunt 插件，这几个插件对于本文的目的来说都不是必须的

下面是配置好的package.json

1
2
3
4
5
6
7
8
9
10
11

{
  "name": "grunt-livereload-demo",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "load-grunt-tasks": "~0.3.0",
    "time-grunt": "~0.2.9"
  }
}

接下来运行 npm install 来安装就可以了。

###配置Gruntfile###

现在假设你已经知道Gruntfile的结构。那么让我们开始先搭建一个可以serve静态文件的服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

module.exports = function(grunt) {

  // Load all grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long grunt task take. Can help when optimizing build times
  require('time-grunt')(grunt);

  //Configure grunt
  grunt.initConfig({

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost', // Change this to '0.0.0.0' to access the server from outside.
        keepalive: true // keep the server alive. so the grunt task won't stop
      },
      all: {
        options: {
          open: true,
          base: [
            'examples' // This is the base file folder. we suppose our index.html is located in this folder
                       // replace with the directory you want the files served from
          ]
        }
      }
    }
  });

  // Creates the 'serve' task
  grunt.registerTask('serve', [
    'connect:all'
  ]);
};

我们用grunt-contrib-connect创建了一个静态服务器，并且能自动打开浏览器。我们把配置好的任务加入到自己创建的serve任务里，别在意这里只有一个子任务，我们接下来会加入其他任务到这个serve任务里。现在你可以在命令行里运行 grunt serve （从Gruntfile所在的目录）。grunt会自动打开浏览器并访问 http://localhost:9000 并保持服务器一直运行下去（任务不会结束）。

###Watch和livereload###

虽然我们已经配置好了一个静态文件服务器。但是 grunt-contrib-connect 并不会帮助我们监视文件变化并自动加载，我们需要 grunt-contrib-watch 来完成这项工作，并触发 grunt-contrib-connect 里面的livereload功能。所以我们要修改一下Gruntfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

module.exports = function(grunt) {

  // Load all grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long grunt task take. Can help when optimizing build times
  require('time-grunt')(grunt);

  //Configure grunt
  grunt.initConfig({

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729 // This does not perform live reloading. this port is used by watch task to trigger a live reloading action.
      },
      all: {
        options: {
          open: true,
          base: [
            'examples'
          ]
        }
      }
    },

    //Watch files for changes, and run tasks base on the changed files.
    watch: {

      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>' // this port must be same with the connect livereload port
        },
        // Watch whatever files you needed.
        files: [
          'examples/*.html',
          'examples/styles/{,*/}*.css',
          'examples/scripts/(,*/}*.js',
          'examples/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    }
  });

  // Creates the 'serve' task
  grunt.registerTask('serve', [
    'connect:all',
    'watch'
  ]);
};

我们新修改的配置把connect任务的keepalive选项去掉了，换成livereload。因为watch会帮我们让grunt task挂起而不停止，所以不再需要keepalive。这里我们将livereload的端口号设置为35729。你也可以设置成其他的端口，不过必须要在watch的livereload选项里设置成相同的端口。新加入了一个watch任务，这里我们配置了livereload的端口。配置了需要监视的文件。当这些文件发生改变时，watch任务就会触发livereload。让浏览器刷新页面。最后，我们把这两个任务按照先后顺序组合成serve任务，注意watch必须在后面，因为watch之后的任务永远不会被执行，同时我们也需要watch帮我们保持服务器一直运行。

接下来运行 grunt serve 就可以看到一个跟刚才一样的页面在浏览器窗口中打开了。不同的是，这次你修改任何监视范围内的文件，都会实时的反映在浏览器上，可以说做到的了实时预览。当你需要结束服务器的时候，使用Ctrl+C。watch并不止能做这些，它还可以让less自动编译，自动运行jshint检查js文件的语法。connect还可以和grunt-connect-proxy结合来制作本地代理访问其他域名的api而不用处理跨域问题。当你觉得某种开发方式不够酷的时候，想想grunt吧。如果你没有找到合适的插件，就自己编写一个。Have a good day!

说起来，这个域名起的也很随便，一开始只是想要一个又短又好记的域名，没想到这个域名可以满足全部的要求，只是现在都没想好站名。索性就叫nyanyanya好了。域名注册过程要感谢Phenix Nemo的帮助，他提供了域名注册的代理服务和域名挂靠的服务。另外hexo这个好用的工具也是他推荐的。没有他的帮助，这个blog也不会这么快的搭建起来。

最近我在为公司制作一个统计系统的前端页面，用到了Yeoman，AngularJS，Bootstrap，NodeJS，expressjs这些工具和技术，所以近期会尝试写一些关于这方面的文章吧。鉴于本人水平有限，如果有什么错误或者不够清晰的地方，希望能够批评指正。