❤
npm
Sign UpSign In

angularjs-responsive-navbar

1.0.1 • Public • Published

angularjs-responsive-navbar

npm version

angular JS responsive navbar screen shot

Github Pages Demo. NPM Module Link.

A responsive navbar for Angular 1.x. Requires Angular ui-router, and uses flexbox. Should be compatible with IE 10+, and all major browsers. Currently, the project has no tests. Though, the Github Pages Demo can be used for manual testing of the latest master.

Usage

Install to the project:

npm install --save angularjs-responsive-navbar

Add the following to the project:

index.html

<head>
  <!-- Angular JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js" type="text/javascript">
  </script> 
  <!-- Angular ui-router -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js" type="text/javascript">
  </script> 
  <!-- angularjs-responsive-navbar -->
  <script src="node_modules/angularjs-responsive-navbar/bin/angularJSNavbar.js" type="text/javascript">
  </script> 
 
  <!-- Your JS here... -->
  <script src="./index.js" type="text/javascript">
  </script> 
 
 
  <!-- angularjs-responsive-navbar CSS -->
  <link rel="stylesheet" href="node_modules/angularjs-responsive-navbar/bin/angularJSNavbar.css" type="text/css">
 
 
  <!-- Your CSS here... -->
  <link rel="stylesheet" href="./index.css" type="text/css">
 
</head>
<body>
  <!-- The angularjs-responsive-navbar component -->
  <angular-js-navbar></angular-js-navbar>
 
  <!-- Your application HTML Here -->
 
</body>

index.js (Or whever your angular app is bootstrapped)

const app = angular.module(/* YOUR MODULE NAME */, ['angularJSNavbar', 'ui.router' /* YOUR OTHER IMPORTED MODULES*/]);
app.config($stateProvider => {
  /* Define your ui-router states here */
  const homeState = {
    name: 'home',
    url: '/',
    templateUrl: './README.html'
  }
 
  const testState = {
    name: 'test',
    url: '/test',
    template: '<h3>I am the test route!</h3>'
  }
 
  $stateProvider.state(homeState);
  $stateProvider.state(testState);
});
app.run((navbarRouteService) => {
 
  // Set your site title
  navbarRouteService.setTitle('angular-js-navbar', {
    title: 'Home',
    state: 'home',
    url: '/'
  });
 
  // Set your application routes, should be similar to defined ui-router states
  navbarRouteService.setRoutes([{
    title: 'Home',
    state: 'home',
    url: '/'
  },
  {
    title: 'Test',
    state: 'test',
    url: '/test'
  }]);
});

Please see the docs/ folder to see how the project is utilized in a simple static project.

Services API

navbarRouteService:

Objects:

{route} objects are defined as:

{
  "title": "The string to be displayed on the navbar",
  "state": "the ui-router state to link to",
  "url": "the url to navigate to"
}

Methods:

setTitle('string', {route}) - Sets the displayed title on the navbar. Optional second argument will make the title link to the passed route object.

setRoutes([{route}]) - Sets the routes that are displayed in the navbar. Accepts an array of route objects.

getRoutes() - Returns the currently set routes in the navbar

enableAlwaysMobile() - Sets the navbar to always show the mobile layout

enableAlwaysDesktop - Sets the navbar to always show the desktop layout

Contributing

Clone the project:

git clone https://github.com/torch2424/angularjs-responsive-navbar.git

Install devDependencies:

npm install

Host the project at localhost:8080, livereload, and watch for changes:

npm run start

Build the project with:

npm run build

LICENSE

MIT

Readme

Keywords

Package Sidebar

Install

npm i angularjs-responsive-navbar

Repository

github.com/torch2424/angularjs-responsive-navbar

Homepage

github.com/torch2424/angularjs-responsive-navbar#readme

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • torch2424
Try on RunKit
Report malware