refactor init

demo/ts/features/home/components/subs/about.co.ts → demo/components/home/about.component.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
     template: `
     <h1>About</h1>
     <p><code>angular2-baidu-map</code> is a set of components written in <code>TypeScript</code> which integrate <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> in an Angular applications.</p>
-    <p>It is based on the <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> Javascript API version 2.0, and <a href="https://angular.io" target="_blank">Angular</a> ^version 2.4.3</p>
+    <p>It is based on the <a href="http://lbsyun.baidu.com/" target="_blank">百度地图</a> Javascript API version 2.0, and <a href="https://angular.io" target="_blank">Angular</a> ^version 4.4.1</p>
     `,
 })
-export class About { }
+export class AboutComponent { }

demo/components/home/contribute.component.ts

@@ -0,0 +1,11 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'contribute',
+    template: `
+    <h1>Contributing</h1>
+    <p><code>angular2-baidu-map</code> is hosted on <a href="https://github.com/leftstick/angular2-baidu-map" target="_blank">GitHub</a>. If you find a bug, please use <a href="https://github.com/leftstick/angular2-baidu-map/issues" target="_blank">issue</a> system to report it, or fork this repository, fix it and give a pull request. Contributions are more than welcome</p>
+    `,
+})
+export class ContributeComponent { }

demo/ts/features/home/components/subs/github.co.ts → demo/components/home/github.jparrowsec.cnponent.ts

@@ -1,3 +1,4 @@
+
 import { Component } from '@angular/core';
 
 @Component({
@@ -9,4 +10,4 @@ import { Component } from '@angular/core';
     </div>
     `,
 })
-export class Github { }
+export class GithubComponent { }

demo/ts/features/home/components/home.co.ts → demo/components/home/index.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
-import { Map, MapOptions, Point, MarkerOptions } from '../../../../../src/';
+import { Map, MapOptions, Point, MarkerOptions } from '../../../src';
 
 @Component({
-    selector: 'home',
     template: `
     <h1 class="page-title">angular2-baidu-map</h1>
     <baidu-map [options]="opts" (loaded)="onMapLoad($event)">
         <marker [point]="point" (clicked)="onClickMarker($event)"></marker>
     </baidu-map>
-    <github></github>
+    <github class="section"></github>
+    <div class="home-desc">
+        <about class="section"></about>
+        <version class="section"></version>
+        <contribute class="section"></contribute>
+    </div>
     `,
     styles: [
         `
@@ -34,7 +38,7 @@ import { Map, MapOptions, Point, MarkerOptions } from '../../../../../src/';
         `
     ]
 })
-export class Home {
+export class HomeComponent {
     opts: MapOptions;
     point: Point;
     markerOpts: MarkerOptions;
@@ -61,4 +65,8 @@ export class Home {
     onClickMarker(e: any) {
         console.log('e', e);
     }
-}
+
+    onClickMap(e: any) {
+        console.log('map e', e);
+    }
+}

demo/components/home/index.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+import { BaiduMapModule } from '../../../src';
+
+import { HomeRouteModule } from './route.module';
+
+import { HomeComponent } from './index.component';
+import { GithubComponent } from './github.jparrowsec.cnponent';
+import { VersionComponent } from './version.component';
+import { ContributeComponent } from './contribute.component';
+import { AboutComponent } from './about.component';
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        BaiduMapModule.forRoot({ ak: 'gd0GyxGUxSCoAbmdyQBhyhrZ' }),
+        HomeRouteModule
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: [
+        HomeComponent,
+        GithubComponent,
+        VersionComponent,
+        ContributeComponent,
+        AboutComponent
+    ]
+})
+export class HomeModule { }

demo/components/home/route.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HomeComponent } from './index.component';
+
+const routes: Routes = [
+    {
+        path: 'home',
+        component: HomeComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class HomeRouteModule { }

demo/components/home/version.component.ts

@@ -0,0 +1,16 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'version',
+    template: `
+    <h1>Version</h1>
+    <p>There are 3 major versions available, and each of them is not backwards compatible. Which means you should not writing codes at version 2's instruction, but with version 3 installed. Below are documentation references for previous versions:</p>
+    <br/>
+    <ul>
+        <li><a href="https://github.com/leftstick/angular2-baidu-map/tree/3.x" target="_blank">version 2.x</a></li>
+        <li><a href="https://github.com/leftstick/angular2-baidu-map/tree/3.x" target="_blank">version 3.x</a></li>
+    </ul>
+    `,
+})
+export class VersionComponent { }

demo/ts/features/common/components/menu/menu.co.ts → demo/components/menu.component.ts

@@ -26,12 +26,11 @@ import { Component } from '@angular/core';
     a:hover {
         border-bottom: 3px solid #dd1b16;
     }
-
     @media screen and (max-width: 800px) {
         a {
             padding: 15px 5px 15px 5px;
         }
     }
     `]
 })
-export class MenuComponent { }
+export class MenuComponent { }

demo/components/quickstart/import.component.ts

@@ -0,0 +1,20 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'import',
+    template: `
+    <h1>Import</h1>
+    <ul class="menu" highlight>
+        <li>
+            <div>
+                <div class="type-name">Typescript:</div>
+                <div class="snippet">
+                    <pre><code class="typescript">import &#123; BaiduMapModule &#125; from 'angular2-baidu-map';</code></pre>
+                </div>
+            </div>
+        </li>
+    </ul>
+    `,
+})
+export class ImportComponent { }

demo/components/quickstart/index.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'quickstart',
+    template: `
+    <div class="container">
+        <h1 class="page-title">Quickstart</h1>
+        <p style="margin-bottom: 15px;">To start using <code>angular2-baidu-map</code>, follow these simple steps for module setup. Afterwards, read <a href="#!/apidoc">API documentation</a> to learn about advanced usage.</p>
+        <install class="section"></install>
+        <import class="section"></import>
+        <usage class="section"></usage>
+    </div>
+    `,
+    styles: [
+        `
+        :host {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        baidu-map {
+            width: 800px;
+            height: 290px;
+        }
+        .home-desc {
+            width: 800px;
+        }
+        @media screen and (max-width: 800px) {
+            baidu-map,
+            .home-desc {
+                width: 100%;
+            }
+        }
+        `
+    ]
+})
+export class QuickstartComponent {
+
+    constructor() {
+
+    }
+
+
+}

demo/components/quickstart/install.component.ts

@@ -0,0 +1,20 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'install',
+    template: `
+    <h1>Install</h1>
+    <ul class="menu" highlight>
+        <li>
+            <div>
+                <div class="type-name">Npm:</div>
+                <div class="snippet">
+                    <pre><code class="bash">npm install angular2-baidu-map --save</code></pre>
+                </div>
+            </div>
+        </li>
+    </ul>
+    `,
+})
+export class InstallComponent { }

demo/components/quickstart/usage.component.ts

@@ -0,0 +1,69 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'usage',
+    template: `
+    <h1>Usage</h1>
+    <ul class="menu" highlight>
+        <li>
+            <div>
+                <div class="type-name">Use <code>angular2-baidu-map</code> module:</div>
+                <div class="snippet">
+                    <pre><code class="typescript">import &#123; BaiduMapModule &#125; from 'angular2-baidu-map';
+import &#123; DemoComponent &#125; from './demo.component';
+
+@NgModule(&#123;
+    imports: [
+        BrowserModule,
+        BaiduMapModule.forRoot(&#123; ak: 'your ak' &#125;)
+    ],
+    declarations: [
+        DemoComponent
+    ],
+    bootstrap: [DemoComponent]
+&#125;)
+export class DemoModule &#123; &#125;</code></pre>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <div class="type-name">Use <code>&lt;baidu-map&gt;</code> element:</div>
+                <div class="snippet">
+                    <pre><code class="typescript">import &#123; Component &#125; from '@angular/core';
+import &#123; MapOptions &#125; from 'angular2-baidu-map';
+
+@Component(&#123;
+    selector: 'demo',
+    template: '&lt;baidu-map [options]="opts"&gt;&lt;/baidu-map&gt;',
+    styles: [&#96;
+        baidu-map &#123;
+            width: 800px;
+            height: 290px;
+        &#125;
+    &#96;
+    ]
+&#125;)
+export class DemoComponent &#123;
+    opts: MapOptions;
+
+    constructor() &#123;
+        this.opts = &#123;
+            centerAndZoom: &#123;
+                lng: 121.506191,
+                lat: 31.245554,
+                zoom: 15
+            &#125;
+        &#125;;
+    &#125;
+&#125;
+</code></pre>
+                </div>
+                <blockquote>Map won't be visible if no size specified</blockquote>
+            </div>
+        </li>
+    </ul>
+    `,
+})
+export class UsageComponent { }