krouter

27
kRouter https://github.com/kelp404/kRouter

Upload: kelp-chen

Post on 27-Jan-2015

109 views

Category:

Technology


0 download

DESCRIPTION

AngularJS router without location.hash. https://github.com/kelp404/kRouter

TRANSCRIPT

Page 1: kRouter

kRouterhttps://github.com/kelp404/kRouter

Page 2: kRouter

Kelp

github/kelp404!� iOS App Developer!� Front-end Developer!Objective-C, CoffeeScript, Python

Page 3: kRouter

kRouter

Reason!CoffeeScript!kRouter!Unit Test!Conclusion

Page 4: kRouter

kRouter

SEO!location.hash `#`

Page 5: kRouter

CoffeeScript

���������

Page 6: kRouter

CoffeeScript

Page 7: kRouter

JavaScript

https://github.com/madrobby/semicolon.js

Page 8: kRouter

CoffeeScript

Page 9: kRouter

JavaScript

}}

}}

Page 10: kRouter

CoffeeScript

Page 11: kRouter

JavaScript

return {,

,

};

id: 1002 name: ‘Kelp’ email: ‘[email protected]

Page 12: kRouter

CoffeeScript

id: 1002 name: ‘Kelp’ email: ‘[email protected]

Page 13: kRouter

JavaScript

function (members, name) { var result = []; for (var index = 0; index < members.length; index++) { if (members[index].name == name) { result.push(members[index]); } } return result; }

Page 14: kRouter

CoffeeScript

(members, name) ->x for x in members when x.name is name

Page 15: kRouter

JavaScript

$(function () {$(document).on(‘click’, ‘#link’, function () {

var s = $(‘#text’).text();$(this).html(‘Hello ‘ + s + ‘!!’);

});});

Page 16: kRouter

CoffeeScript

$ ->$(document).on ‘click’, ‘#link’, ->

s = $(‘#text’).text()$(@).html “Hello #{s}!!”

Page 17: kRouter

JavaScript

angular.module(‘app’, []).controller(‘HomeController’, function ($scope) {

$scope.text = ‘hello’;});

Page 18: kRouter

CoffeeScript

a = angular.module ‘app’, []a.controller ‘HomeController’, ($scope) ->

$scope.text = ‘hello’

Page 19: kRouter

CoffeeScript

npm install -g coffee-script

Page 20: kRouter

kRouter

Routes!history.pushState()!window.onpopstate

Page 21: kRouter

kRouter

common.coffee!directive.coffee!module.coffee!provider.coffee

Page 22: kRouter

common.coffee

getUri: (href=location.href) ->!matchRoute: (url, routes) ->!parseQueryString: (queryString) ->

Page 23: kRouter

directive.coffee

kr-view!kr-go

Page 24: kRouter

module.coffee

angular.module 'kRouter', [ 'kRouter.provider', 'kRouter.directive' ]

Page 25: kRouter

provider.coffee

$kRouterProvider.register = (name, args={}) ->!routers: []!state: current: {} params: {}!go: (href, push=true) ->

Page 26: kRouter

Unit Test

Travis CI!karma!jasmine

Page 27: kRouter

Conclusion

npm install -g coffee-script!git clone https://github.com/kelp404/kRouter.git cd kRoutergit submodule update --init