kRouter
https:/
/github.com/kelp404/kRouter
Kelp
github/kelp404!
iOS App Developer!
Front-end Developer!
Objective-C, CoffeeScript, Python
kRouter
Reason!
CoffeeScript!
kRouter!
Unit Test!
Conclusion
kRouter

SEO!
location.hash `#`
CoffeeScript
CoffeeScript
JavaScript
https:/
/github.com/madrobby/semicolon.js
CoffeeScript
JavaScript

}
}
}
}
CoffeeScript
JavaScript
return {
id: 1002
 ,
name: ‘Kelp’
,
email: ‘kelp@phate.org’

};
CoffeeScript

id: 1002

name: ‘Kelp’

email: ‘kelp@phate.org’

JavaScript
function (members, name) {

var result = [];

for (var index = 0; index < members.length; index++) {

if (membe...
CoffeeScript

(members, name) ->
x for x in members when x.name is name
JavaScript
$(function () {
$(document).on(‘click’, ‘#link’, function () {
var s = $(‘#text’).text();
$(this).html(‘Hello ‘...
CoffeeScript

$ ->
$(document).on ‘click’, ‘#link’, ->
s = $(‘#text’).text()
$(@).html “Hello #{s}!!”
JavaScript

angular.module(‘app’, [])
.controller(‘HomeController’, function ($scope) {
$scope.text = ‘hello’;
});
CoffeeScript

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

npm install -g coffee-script
kRouter

Routes!
history.pushState()!
window.onpopstate
kRouter
common.coffee!
directive.coffee!
module.coffee!
provider.coffee
common.coffee

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

kr-view!
kr-go
module.coffee

angular.module 'kRouter', [

'kRouter.provider', 'kRouter.directive'

]
provider.coffee
$kRouterProvider.register = (name, args={}) ->!
routers: []!
state:

current: {}

params: {}!
go: (href, p...
Unit Test

Travis CI!
karma!
jasmine
Conclusion

npm install -g coffee-script!
git clone https:/
/github.com/kelp404/kRouter.git

cd kRouter

git submodule upd...
Upcoming SlideShare
Loading in...5
×

kRouter

240

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
240
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "kRouter"

  1. 1. kRouter https:/ /github.com/kelp404/kRouter
  2. 2. Kelp github/kelp404! iOS App Developer! Front-end Developer! Objective-C, CoffeeScript, Python
  3. 3. kRouter Reason! CoffeeScript! kRouter! Unit Test! Conclusion
  4. 4. kRouter SEO! location.hash `#`
  5. 5. CoffeeScript
  6. 6. CoffeeScript
  7. 7. JavaScript https:/ /github.com/madrobby/semicolon.js
  8. 8. CoffeeScript
  9. 9. JavaScript } } } }
  10. 10. CoffeeScript
  11. 11. JavaScript return { id: 1002
 , name: ‘Kelp’
, email: ‘kelp@phate.org’
 };
  12. 12. CoffeeScript id: 1002
 name: ‘Kelp’
 email: ‘kelp@phate.org’

  13. 13. 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;
 }
  14. 14. CoffeeScript (members, name) -> x for x in members when x.name is name
  15. 15. JavaScript $(function () { $(document).on(‘click’, ‘#link’, function () { var s = $(‘#text’).text(); $(this).html(‘Hello ‘ + s + ‘!!’); }); });
  16. 16. CoffeeScript $ -> $(document).on ‘click’, ‘#link’, -> s = $(‘#text’).text() $(@).html “Hello #{s}!!”
  17. 17. JavaScript angular.module(‘app’, []) .controller(‘HomeController’, function ($scope) { $scope.text = ‘hello’; });
  18. 18. CoffeeScript a = angular.module ‘app’, [] a.controller ‘HomeController’, ($scope) -> $scope.text = ‘hello’
  19. 19. CoffeeScript npm install -g coffee-script
  20. 20. kRouter Routes! history.pushState()! window.onpopstate
  21. 21. kRouter common.coffee! directive.coffee! module.coffee! provider.coffee
  22. 22. common.coffee getUri: (href=location.href) ->! matchRoute: (url, routes) ->! parseQueryString: (queryString) ->
  23. 23. directive.coffee kr-view! kr-go
  24. 24. module.coffee angular.module 'kRouter', [
 'kRouter.provider', 'kRouter.directive'
 ]
  25. 25. provider.coffee $kRouterProvider.register = (name, args={}) ->! routers: []! state:
 current: {}
 params: {}! go: (href, push=true) ->
  26. 26. Unit Test Travis CI! karma! jasmine
  27. 27. Conclusion npm install -g coffee-script! git clone https:/ /github.com/kelp404/kRouter.git
 cd kRouter
 git submodule update --init
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×