🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →

Book a Demo Install Sign in

angularjs-responsive-navbar

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angularjs-responsive-navbar

A responsive navbar component for angular 1.x

1.0.1

latest

Source

npm

Version published: 8 years ago

Weekly downloads: 2

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

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

Keywords

FAQs

Package last updated on 05 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

angularjs-responsive-navbar