Detailed description of Angular 2 Table Control and angular Table Control

Detailed description of Angular 2 Table Control and angular Table Control

Front-end frameworks have been a hot topic in recent years, especially Angular 2 has many fans. After Angular 2 was officially released in September 2016, a large number of fans began to invest in Angular 2. Of course, this includes me. If you want to know about Angular 2, we recommend the official website: English and Chinese. Through quick start, you can quickly experience Angular 2.

A company project is intended to be developed based on Angular 2 version 2.4 and is still in the preliminary research phase. My task is to study Angular 2-based UI controls and list many resources that support Angular 2 on the official website. We found that Wijmo's Flexgrid Control has supported Angular 2 2.4, initially meeting our needs.

I. Environment Construction

Angular 2 is not only different in functionality from Angular 1, but also in Environment setup. Many beginners report that the code of Angular 2 is difficult to run. Angular2 is developed based on ES6, so there will be many third-party dependencies. Because many Browsers Do not support ES6, Angular2 introduces many polyfill or shim, which leads to third-party dependency. The following uses FlexGrid as an example to describe how to build a runtime environment.

1. Install NodeJS

You can download https://nodejs.org/en/download/from the Node official website /.

2. Create a directory to store the project

Mkdir ng2-flexGrid

Cd ng2-flexGrid

3. Configuration File

Package. json

Used to mark the npm dependency package required by the project.

{ "name": "wj-ng2-flexgrid", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w" }, "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "dependencies": { "@angular/common": "~2.1.1", "@angular/compiler": "~2.1.1", "@angular/core": "~2.1.1", "@angular/forms": "~2.1.1", "@angular/http": "~2.1.1", "@angular/platform-browser": "~2.1.1", "@angular/platform-browser-dynamic": "~2.1.1", "@angular/router": "~3.1.1", "@angular/upgrade": "~2.1.1", "angular-in-memory-web-api": "~0.1.13", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25" }, "devDependencies": { "@types/core-js": "^0.9.34", "@types/node": "^6.0.45", "concurrently": "^3.0.0", "lite-server": "^2.2.2", "typescript": "^2.0.3" }}

Tsconfig. json

The configuration file of TypeScript, which defines how the TypeScript compiler generates JavaScript code from the project source file.

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }}

Systemjs. config. js

It provides the SystemJS (module loader) with information on the application module and registers all necessary dependent packages.

/*** System configuration for Angular samples* Adjust as necessary for your application needs.*/(function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', // other libraries 'rxjs':   'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } });})(this);

4. Run npm install

 

NPM will install the package according to the package. json package. A node_modules directory is generated. Put these packages here.

Now, the Environment setup task has been completed. The following uses FlexGrid as an example to describe how to support Angular 2.

2. How to Use table controls supporting Angular 2

1. HTML

<Html> 
On the HTML host page, in addition to the required components in Angular 2, you also need to introduce the Wijmo script.
2. Write Data Services
'use strict'import { Injectable } from '@angular/core';@Injectable()export class DataService { getData(count: number): wijmo.collections.ObservableArray { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),  data = new wijmo.collections.ObservableArray(); for (var i = 0; i < count; i++) {  data.push({  id: i,  country: countries[i % countries.length],  date: new Date(2014, i % 12, i % 28),  amount: Math.random() * 10000,  active: i % 4 == 0  }); } return data; }}
3. Compile the root component
Now we write the first component of the application: the root component app. component, which is also the only component of this program. In this Component, we need to introduce two metadata tags: Component and Inject. You also need to inject the defined data Service data. Service.
App. component. ts:
import { Component, Inject } from '@angular/core';import { DataService } from '../services/data.service';@Component ({ selector:'app-cmp', templateUrl:'app/components/app.component.html',})export class AppComponent{ protected dataSvc:DataService; data: wijmo.collections.CollectionView; constructor(@Inject(DataService) dataSvc:DataService){ this.dataSvc = dataSvc; this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(50)); }}
App.component.html:
<Div class = "header"> 
Here, you only need to introduce the wj-flex-grid tag to create the FlexGrid Control. The wj-flex-grid component is a child component that is injected into the app. module. ItemsSource is bound to a data source. This itemsSource is an encapsulated attribute of flexgrid.
The biggest benefit of using FlexGrid in Angular 2 is that Angular 2 provides the ability to declare controls using markup language. Declarative markup follows the MVVM design pattern, and we can configure our components completely through View (Markup Language. FlexGrid supports the use of Angular 2 markup language to declare the complete API. You can use markup language to set attributes, add events, and configure sub-components.
4. Compile the root Module
Inject components in the root module. All referenced components and modules must be injected.
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { WjGridModule } from 'wijmo/wijmo.angular2.grid';import { AppComponent } from './components/app.component';import { DataService } from './services/data.service';@NgModule({ imports: [ WjGridModule, BrowserModule], declarations: [AppComponent], providers:[DataService], bootstrap: [AppComponent],})export class AppModule { }
5. BOOT program
Main. ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import {enableProdMode} from '@angular/core';import { AppModule } from './app.module';enableProdMode();platformBrowserDynamic().bootstrapModule(AppModule);
Iii. Running
Run npm start on the command line. The program automatically opens the default browser and renders the page.
The start command is to execute the scripts command defined in the package. json file. The ts code is compiled into Native js and a static server is started. This server detects file changes. When the file changes, the ts code is automatically compiled.
The running result is as follows:

FlexGrid has built-in basic functions such as sorting, filtering, grouping, and editing. It also provides other functions through optional extensions. Compared with other products, FlexGrid has good performance. Its file size is relatively small, and the compression is about 25 K.
Download source code: http://xiazai.jb51.net/201701/yuanma/ng2-flexGrid_jb51.rar
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!