Angular2学习
1.新建项目
2.新建Model
public class TodoItem
{
public int Id { get; set; }
public string Key { get; set; }
public string Name { get; set; }
public bool IsComplete { get; set; }
public string Desc { get; set; }
}
3.数据访问接口
public interface ITodoRepository
{
IEnumerable<TodoItem> GetAll();
void Add(TodoItem item);
TodoItem Find(string key);
TodoItem Remove(string key);
void Update(TodoItem item);
}
4.接口实现
public class TodoRepository : ITodoRepository
{
//fake datasource
static ConcurrentDictionary<string, TodoItem> _todos = new ConcurrentDictionary<string, TodoItem>();
//constructor
public TodoRepository()
{
TodoItem item = new TodoItem()
{
Id=1,
Key = Guid.NewGuid().ToString(),
Name = "first todo item",
IsComplete = false,
Desc="desc content from first todo"
};
_todos.TryAdd(item.Key, item);
}
//get all items
public IEnumerable<TodoItem> GetAll()
{
return _todos.Values;
}
//add new item
public void Add(TodoItem item)
{
item.Id = 1;
item.Key = Guid.NewGuid().ToString();
item.Name = Guid.NewGuid().ToString().Split('-')[0].ToUpper();
_todos[item.Key] = item;
}
//find the item by key
public TodoItem Find(string key)
{
TodoItem item;
_todos.TryGetValue(key, out item);
return item;
}
//remove the item by key
public TodoItem Remove(string key)
{
TodoItem item;
_todos.TryGetValue(key, out item);
_todos.TryRemove(key, out item);
return item;
}
//update the item by key
public void Update(TodoItem item)
{
_todos[item.Key] = item;
}
}
5.api
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ToDoApi.Models;
namespace ToDoApi.Controllers
{
[Route("api/[controller]")]
public class TodoController:Controller
{
public ITodoRepository _TodoRepository { get; set; }
public TodoController(ITodoRepository todoRepository)
{
_TodoRepository = todoRepository;
}
//get:api/todo
public IEnumerable<TodoItem> GetAll()
{
return _TodoRepository.GetAll();
}
//get:api/todo/id
[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(string id)
{
var item = _TodoRepository.Find(id);
if (item == null)
{
return NotFound();
}
return new ObjectResult(item);
}
//put: api/todo
[HttpPost]
//[HostAuthentication(DefaultAuthenticationTypes.ExternalBearer)]
public IActionResult Create(TodoItem item)
{
if (item == null)
{
return BadRequest();
}
_TodoRepository.Add(item);
return CreatedAtRoute("GetTodo", new { controller = "Todo", id = item.Key }, item);
}
//Update
[HttpPut("{id}")]
public IActionResult Update(string id, [FromBody] TodoItem item)
{
if (item == null || item.Key != id)
{
return BadRequest();
}
var todo = _TodoRepository.Find(id);
if (todo == null)
{
return NotFound();
}
_TodoRepository.Update(item);
return new NoContentResult();
}
//delete:api/todo/id
[HttpDelete("{id}")]
public void Delete(string id)
{
_TodoRepository.Remove(id);
}
}
}
6.Gulp文件
var gulp = require('gulp'),
path = require("path"),
livereload = require('gulp-livereload'),
connect = require('gulp-connect'),
open = require('open'),
watch=require('gulp-watch'),
port=9000;
var PATHS = {
src: 'app/**/*.ts',
typings: 'node_modules/angular2/bundles/typings/**/*.d.ts',
libs: [
"node_modules/angular2/bundles/angular2.dev.js",
"node_modules/angular2/bundles/angular2-polyfills.js",
"node_modules/angular2/bundles/router.dev.js",
"node_modules/angular2/bundles/http.dev.js",
"node_modules/systemjs/dist/system.src.js",
"node_modules/rxjs/bundles/Rx.js"
],
html: 'app/**/*.html',
dist: "dist"
};
gulp.task('clean', function (done) {
var del = require('del');
del(['dist'], done);
});
gulp.task("libs", function(){
gulp.src(PATHS.libs).pipe(gulp.dest(PATHS.dist + "/libs"));
})
gulp.task("html", function(){
gulp.src(PATHS.html).pipe(gulp.dest(PATHS.dist));
// .pipe(watch())
//.pipe(connect.reload());
})
gulp.task('ts2js', function () {
var typescript = require('gulp-typescript');
var tsResult = gulp.src([PATHS.src, PATHS.typings])
.pipe(typescript({
noImplicitAny: true,
module: 'system',
target: 'ES5',
emitDecoratorMetadata: true,
experimentalDecorators: true
}));
return tsResult.js.pipe(gulp.dest(PATHS.dist));
});
gulp.task('play', ['html', 'libs', 'ts2js'], function () {
var http = require('http');
var _connect = require('connect');
var serveStatic = require('serve-static');
gulp.watch(PATHS.src, ['ts2js']);
gulp.watch(PATHS.html, ['html']);
var app = _connect().use( serveStatic(path.join(__dirname, PATHS.dist)) );
http.createServer(app).listen(port, function () {
open('http://localhost:' + port);
});
});
// 自动刷新不可用
gulp.task('server',['html', 'libs', 'ts2js'],function(){
gulp.watch(PATHS.src, ['ts2js']);
gulp.watch(PATHS.html, ['html']);
open('http://192.168.2.120:' + port);
connect.server({
port: port,
root:PATHS.dist,
livereload: true
});
})
7.People模块为例， people-service.ts
import { Injectable } from "angular2/core";
import { Http,Response,Headers,RequestOptions } from 'angular2/http';
@Injectable()
export class PeopleService{
names:Array<string>;
url:string="http://localhost:10003/api/todo/";
constructor(private _http:Http){
// //fade initialize
// this.names=[
// {Id:100,Key:"",Name:"Lisa",IsComplete:false,Desc:"homeless can you here me."},
// {Id:101,Key:"",Name:"Miskovsky",IsComplete:false,Desc:"calling back little bird."},
// {Id:102,Key:"",Name:"Jennifer",IsComplete:false,Desc:"Seattle is sunshine now."},
// {Id:103,Key:"",Name:"Lana Del Ray",IsComplete:false,Desc:"<<Summertime Sadness>>"},
// {Id:104,Key:"",Name:"Aili",IsComplete:false,Desc:"weibo english"},
// {Id:105,Key:"",Name:"July",IsComplete:false,Desc:"come with back love"},
// {Id:106,Key:"",Name:"Rlogue",IsComplete:false,Desc:"fall with you"}
// ];
}
//get from local
getPeopleList(){
console.log("get date from server !");
return this.names;
}
//get info from local
getPersonDetail(id:number){
return this.names.find(function(p){
return p.Id==id;
});
}
//get data from webapi
getPeople(){
return this._http.get(this.url);
// .map(res=>res.json.data)
// .catch(function(error:Response){ console.log(error); });
}
//get info from webapi
getPerson(key:string){
return this._http.get(this.url+key);
}
addPerson(){
let body = JSON.stringify({
Id: 2,
"Key": "dba980a7-555b-44b8-9043-91fc22adc00b",
Name: "first todo item",
"IsComplete": false,
Desc: "desc content from first todo"
});
let headers = new Headers({'Content-type': 'application/json;'});
let options = new RequestOptions({ headers: headers });
console.log(body);
console.log(headers);
console.log(options);
return this._http.post(this.url, body, options).subscribe(resp=>console.info(resp););
}
};
8.people列表模块 people.ts
import { Component } from "angular2/core";
import { bootstrap } from "angular2/platform/browser";
import { HTTP_PROVIDERS } from "angular2/http";
import { PeopleService } from "people/people-service.js";
import { ROUTER_PROVIDERS,RouteParams,Router} from "angular2/router";
import { InfiniteScroll } from "components/infinite-scroll/infinite-scroll.js";
@Component({
selector:"app-people",
providers:[HTTP_PROVIDERS,PeopleService,Location],
templateUrl:"people/people.html",
// template:"<h1>PEOPLE</h1>",
directives:[InfiniteScroll],
styles:[`button {border: 1px solid Red;}`]
})
export class _People implements OnInit{
name:string;
age:number;
names:Array<string>;
isBusy:boolean=false;
constructor(private _people_service:PeopleService,private _router:Router){
this.name="Lisa Miskovsky";
this.age=27;
//Observable
_people_service.getPeople().subscribe(resp=>this.names=resp.json());
}
SayHello(private _name:string){
this.name=_name;
console.log("Hello IM:"+_name);
}
viewInfo(private _id:number){
this._router.navigate( ["Person", { id:_id }] );
}
onScroll(){
console.log("scrolled :"+new Date().getTime());
if(this.isBusy) return;
this.isBusy=true;
console.log("busy:"+this.isBusy);
// this.names=this.names.concat(this._people_service.getPeopleList());
this._people_service.getPeople().subscribe(resp=>this.names=this.names.concat(resp.json());
this.isBusy=false;
console.log("busy:"+this.isBusy);
console.log("load more over !");
}
}
export function render_people(){
bootstrap(_People, [ROUTER_PROVIDERS]).catch(err=>console.log(err));
}
9.people模块的页面展现(模拟滚动加载)
<section style="margin-top: 20px;">
<div infinite-scroll style="height:500px;overflow-y: scroll;"
[infiniteScrollDistance]="1"
[infiniteScrollThrottle]="500"
(scrolled)="onScroll()"
[scrollWindow]="false">
<div *ngFor="#person of names;#_index=index">
<p *ngIf="person" style="height:auto;border:1px solid #000;padding:5px;">
{{_index+1}}、{{person.Id}}-{{person.Name}} <br/>
<span>{{person.Key}}</span><br/>
<span>{{person.Desc}}</span><br/>
<button (click)="SayHello(person.Name)">SayHello</button>
<button (click)="viewInfo(person.Key)">ViewInfo</button>
</p>
</div>
</div>
</section>
11.源码
http://git.oschina.net/gaojinbogit/ng2-demo
12.angualr2 typescript学习资料
--ng2.0
文件上传api http://valor-software.com/ng2-file-upload/
系列博客 http://www.cnblogs.com/1wen/p/5446863.html
快速上手 http://cnodejs.org/topic/55af2bc4911fb957520eacef
推酷站点 http://www.tuicool.com/articles/mi6rmuB
中文社区 http://www.angularjs.cn/A2pG
语法清单 https://segmentfault.com/a/1190000004071388
深度开源 http://www.open-open.com/lib/list/396
一些资料 https://segmentfault.com/a/1190000003761054
大量资料 https://github.com/timjacobi/angular2-education
1.x升级2 http://www.wtoutiao.com/p/C34jXG.html
--typescript
ES6简介 http://es6.ruanyifeng.com/#docs/intro
博客 http://www.cnblogs.com/smartkid/archive/2012/10/05/A_First_Look_Of_TypeScript.html
系列教程 http://www.cnblogs.com/tansm/p/TypeScript_Handbook_Enums.html
GitBook https://www.gitbook.com/book/zhongsp/typescript-handbook/details
tsc转职 http://www.cnblogs.com/crazylights/p/5234884.html
