kRouter
0 likes595 views
This document discusses kRouter, a CoffeeScript routing library for AngularJS applications. It introduces kRouter and its key features like handling routes with history.pushState() and window.onpopstate. The document also provides an overview of kRouter's code structure, including common, directive, module, and provider CoffeeScript files. It concludes by explaining how to install CoffeeScript, clone the kRouter git repository, and get started using the library.
![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;?
}](https://image.slidesharecdn.com/krouter-131028164223-phpapp02/85/kRouter-13-320.jpg)
![JavaScript
angular.module(¡®app¡¯, [])
.controller(¡®HomeController¡¯, function ($scope) {
$scope.text = ¡®hello¡¯;
});](https://image.slidesharecdn.com/krouter-131028164223-phpapp02/85/kRouter-17-320.jpg)
![CoffeeScript
a = angular.module ¡®app¡¯, []
a.controller ¡®HomeController¡¯, ($scope) ->
$scope.text = ¡®hello¡¯](https://image.slidesharecdn.com/krouter-131028164223-phpapp02/85/kRouter-18-320.jpg)
![module.coffee
angular.module 'kRouter', [?
'kRouter.provider', 'kRouter.directive'?
]](https://image.slidesharecdn.com/krouter-131028164223-phpapp02/85/kRouter-24-320.jpg)
![provider.coffee
$kRouterProvider.register = (name, args={}) ->!
routers: []!
state:?
current: {}?
params: {}!
go: (href, push=true) ->](https://image.slidesharecdn.com/krouter-131028164223-phpapp02/85/kRouter-25-320.jpg)
kRouter
- 2. Kelp github/kelp404! iOS App Developer! Front-end Developer! Objective-C, CoffeeScript, Python
- 5. CoffeeScript
- 6. CoffeeScript
- 8. CoffeeScript
- 10. CoffeeScript
- 11. JavaScript return { id: 1002? , name: ¡®Kelp¡¯?, email: ¡®°ì±ð±ô±è°ª±è³ó²¹³Ù±ð.´Ç°ù²µ¡¯? };
- 12. CoffeeScript id: 1002? name: ¡®Kelp¡¯? email: ¡®°ì±ð±ô±è°ª±è³ó²¹³Ù±ð.´Ç°ù²µ¡¯?
- 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. CoffeeScript (members, name) -> x for x in members when x.name is name
- 15. JavaScript $(function () { $(document).on(¡®click¡¯, ¡®#link¡¯, function () { var s = $(¡®#text¡¯).text(); $(this).html(¡®Hello ¡® + s + ¡®!!¡¯); }); });
- 16. CoffeeScript $ -> $(document).on ¡®click¡¯, ¡®#link¡¯, -> s = $(¡®#text¡¯).text() $(@).html ¡°Hello #{s}!!¡±
- 17. JavaScript angular.module(¡®app¡¯, []) .controller(¡®HomeController¡¯, function ($scope) { $scope.text = ¡®hello¡¯; });
- 18. CoffeeScript a = angular.module ¡®app¡¯, [] a.controller ¡®HomeController¡¯, ($scope) -> $scope.text = ¡®hello¡¯
- 19. CoffeeScript npm install -g coffee-script
- 22. common.coffee getUri: (href=location.href) ->! matchRoute: (url, routes) ->! parseQueryString: (queryString) ->
- 24. module.coffee angular.module 'kRouter', [? 'kRouter.provider', 'kRouter.directive'? ]
- 25. provider.coffee $kRouterProvider.register = (name, args={}) ->! routers: []! state:? current: {}? params: {}! go: (href, push=true) ->
- 27. Conclusion npm install -g coffee-script! git clone https:/ /github.com/kelp404/kRouter.git? cd kRouter? git submodule update --init