New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

angularjs-responsive-navbar

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

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
  • Socket score

Version published
Weekly downloads
2
decreased by-50%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 05 Sep 2017

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc