Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cironunes/angular-off-canvas
easily add an off-canvas navigation to your angular app
https://github.com/cironunes/angular-off-canvas
Last synced: 2 months ago
JSON representation
easily add an off-canvas navigation to your angular app
- Host: GitHub
- URL: https://github.com/cironunes/angular-off-canvas
- Owner: cironunes
- Archived: true
- Created: 2013-12-31T18:57:24.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-11-16T21:10:07.000Z (about 7 years ago)
- Last Synced: 2024-10-16T07:33:13.846Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 350 KB
- Stars: 66
- Watchers: 3
- Forks: 20
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- starred-awesome - angular-off-canvas - easily add an off-canvas navigation to your angular app (JavaScript)
README
# angular-off-canvas
[](https://travis-ci.org/cironunes/angular-off-canvas)
[](https://david-dm.org/cironunes/angular-off-canvas#info=devDependencies&view=table)
An off-canvas nav factory service for AngularJS that makes it easy to add off-canvas navs to your app.
[Plunker demo](http://plnkr.co/edit/arcXHcQgdWiHVB2a7IXA?p=preview)
## Install
```shell
bower install angular-off-canvas
```
## Usage
1. Include the `off-canvas.js` script provided by this component into your app.
2. *Optional:* Include the `off-canvas.css` style provided by this component into your html.
3. Add `cn.offCanvas` as a module dependency to your app.
### Typical Use
> app.js
```javascript
angular.module('myApp', ['cn.offCanvas']).
// let's make a nav called `myOffCanvas`
factory('myOffCanvas', function (cnOffCanvas) {
return cnOffCanvas({
controller: 'MyOffCanvasCtrl',
controllerAs: 'offCanvas',
templateUrl: 'my-off-canvas.html'
});
}).
// typically you'll inject the offCanvas service into its own
// controller so that the nav can toggle itself
controller('MyOffCanvasCtrl', function (myOffCanvas) {
this.toggle = myOffCanvas.toggle;
}).
```
> my-off-canvas.html
```html
```
> index.html
```html
```
### Cleaning up
If you add any listeners within the nav's controller that are **outside the nav's `scope`**,
you should remove them with `$scope.$on('$destroy', fn () { ... })` to avoid creating a memory leak.
### Inline Options
**Note:** The best practice is to use a separate file for the template and a separate declaration for
the controller, but inlining these options might be more pragmatic for cases where the template or
controller is just a couple lines.
```javascript
angular.module('myApp', ['cn.offCanvas']).
// let's make a nav called myOffCanvas
factory('myOffCanvas', function (btfModal) {
return btfModal({
controller: function () {
this.name = 'World';
},
controllerAs: 'ctrl',
template: '
Hello {{ctrl.name}}'
});
}).
controller('MyCtrl', function (myOffCanvas) {
this.toggle = myOffCanvas.toggle;
});
```
```html
```
## API
### `cnOffCanvas`
The nav `factory`. Takes a configuration object as a parameter:
```javascript
var navService = cnOffCanvas({
/* options */
})
```
And returns a `navService` object that you can use to toggle the nav (described below).
The config object **must** either have a `template` or a `templateUrl` option.
These options work just like the [route configuration in Angular's
`$routeProvider`](http://docs.angularjs.org/api/ngRoute.$routeProvider#methods_when).
#### `config.template`
**string:** HTML string of the template to be used for this modal.
Unless the template is very simple, you should probably use `config.templateUrl` instead.
#### `config.templateUrl`
**string (recommended):** URL to the HTML template to be used for this modal.
#### `config.controller`
**string|function (optional):** The name of a controller or a controller function.
#### `config.controllerAs`
**string (optional, recommended):** Makes the controller available on the scope of the modal as the given name.
#### `config.container`
**DOM Node (optional):** DOM node to prepend. Defaults to `document.body`.
#### `config.containerClass`
**string (optional):** HTML class to add to the container. Defaults to `is-off-canvas-opened`.
### `navService`
A `navService` has only one method: `toggle` which enable us to show/hide the nav.
#### `navService.toggle`
Add or remove a class to open/hide the nav with CSS.
## Contributing
Please see the [contributing guidelines](https://github.com/cironunes/angular-off-canvas/blob/master/CONTRIBUTING.md)
## Tests
You can run the tests with [`karma`](http://karma-runner.github.io/0.10/index.html):
```shell
karma start
```
## License
MIT