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

巴特西

Angular2学习

最新文章

热门文章