An open API service indexing awesome lists of open source software.

https://github.com/kelp404/poi-router

An AngularJS router.
https://github.com/kelp404/poi-router

angularjs coffeescript router

Last synced: over 1 year ago
JSON representation

An AngularJS router.

Awesome Lists containing this project

README

          

# poi-router [![circle-ci](https://circleci.com/gh/kelp404/poi-router.png?circle-token=dfe6244905a9da85d07bf56f2190d8e74b0b30c5)](https://circleci.com/gh/kelp404/poi-router)

An AngularJS 1.X router.

## Installation
**bower**
```bash
$ bower install poi-router -S
```
**npm**
```bash
$ npm install poi-router --save
```

## Quick start
**Include poi-router.js at your html**
```html

```

**Add poi-view element at the base html**
```html


Loading...



```

**Register router rules**
```coffee
angular.module 'your-module.routers', ['poi']

.config ['$routerProvider', ($routerProvider) ->
$routerProvider.register 'index',
uri: '/'
resolve:
data: ['$http', ($http) ->
$http(method: 'get', url: '/api/data').then (response) ->
response.data
]
templateUrl: '/template/index.html'
controller: ['$scope', 'data', ($scope, data) ->
$scope.data = data
]
]
```

## Development
```bash
# Install node modules.
$ npm install -g grunt-cli coffee-script nodemon
$ npm install
```

```bash
# Build
$ grunt build
```

```bash
# Test
$ npm test
```

## $router
```coffee
$routerProvider.register = (namespace, args={})->
###
Register the router rule.
@param namespace {string} The name of the rule.
@param args {object} The router rule.
abstract: {bool} This is abstract rule, it will render the child rule.
uri: {string} ex: '/projects/{projectId:[\w-]{20}}/tests/{testId:(?:[\w-]{20}|initial)}'
resolve: {object}
templateUrl: {string}
controller: {string|function} The controller name or angular function.
onEnter: {function} It will be executed before the controller.
###
```

```coffee
$router.go = (namespace, params, options={}) ->
###
Go to the url.
@param namespace {string} The namespace of the rule or the url.
@param params {object} The params of the rule.
@param options {object}
replace: {bool}
reload: {bool} If it is true, it will reload all views.
###
```

```coffee
$router.reload = (reloadParents) ->
###
Reload the current rule.
This method will not reload parent views if reloadParents is null.
@param reloadParents {bool|null}
###
```

## Events
**$stateChangeStart**
```coffee
$scope.$on '$stateChangeStart', (event, toState, fromState, cancel) ->
###
@param event {Event}
@param toState {object}
name: {string} The rule name.
params: {object}
@param fromState {object}
name: {string} The rule name.
params: {object}
@param cancel {function} Call this function to cancel this state change.
###
```

**$stateChangeSuccess**
```coffee
$scope.$on '$stateChangeSuccess', (event, toState, fromState) ->
###
@param event {Event}
@param toState {object}
name: {string} The rule name.
params: {object}
@param fromState {object}
name: {string} The rule name.
params: {object}
###
```

**$stateChangeError**
```coffee
$scope.$on '$stateChangeError', (event, error) ->
###
@param event {Event}
@param error {object}
###
```

## Example
```coffee
# ---------------------------------------------------------
#
# ---------------------------------------------------------
$routerProvider.register 'web',
uri: ''
resolve:
stores: ['$rootScope', '$admin', ($rootScope, $admin) ->
$admin.api.store.getMyStores().then (response) ->
response.data
]
templateUrl: '/views/layout.html'
controller: ['$scope', 'stores', ($scope, stores) ->
$scope.stores = stores
]
# ---------------------------------------------------------
# /stores/:storeId
# ---------------------------------------------------------
$routerProvider.register 'web.store',
abstract: yes
uri: '/stores/{storeId:[\\w-]{20}}'
resolve:
store: ['$admin', '$rootScope', 'params', ($admin, $rootScope, params) ->
$admin.api.store.getStore params.storeId
.success (store) ->
$rootScope.$title = store.title
.then (response) ->
response.data
]
templateUrl: '/views/stores/store.html'
controller: 'StoreController'
$routerProvider.register 'web.store.status',
uri: ''
onEnter: ['$rootScope', 'store', ($rootScope, store) ->
$rootScope.$title = "Status - #{store.title}"
]
templateUrl: '/views/stores/status.html'
controller: 'StoreStatusController'
```