ANGULAR+BOOTSTRAP3 navigation Menu

ANGULAR+BOOTSTRAP3 navigation Menu

The ANGULARJS experiential Programming series will show you how to build a powerful web front-end system with ANGULARJS. Angularjs is a very good web front-end framework developed by the Google team. Under so many web frameworks, Angularjs can stand out from architecture design on superior, bidirectional data binding, dependency injection, directives, MVC, templates. Angular.js innovative back-office technology into the front-end development, swept away jquery once the light. Using Angularjs is like writing background code, more standardized, more structured, and more controllable.

About the author

• Zhang Dan (Conan), programmer Java,r,php,javascript
• Weibo: @Conan_Z
• Blog:http://blog.fens.me
• Email: [Email protected]

Reprint please specify the source:
http://blog.fens.me/bootstrap-angularjs-navbar/

Objective

Navigation menu is a necessary component of a Web site, not only to provide users with convenient site navigation guidelines, but also to provide a good SEO crawl path. ANGULARJS+BOOTSTRAP3-based sites are becoming more and more popular, how should the navigation menu be implemented? See the introduction of this article.

Directory

1. The navigation menu in BOOTSTRAP3
2. Navigation menu in ANGULARJS – click events
3. Navigation menu in Angularjs – passing events

1. Navigation menu in BOOTSTRAP3

From the BOOTSTRAP3 documentation we can see that the default provided navigation menu supports the dropdown feature, click Trigger, Support Level 2 menu, as shown in.

Implementation of the effect in the document, we can quickly create a static HTML project, create details not much explanation, reference article: Quickly build a Web environment Angularjs + EXPRESS3 + bootstrap3,bower to solve JS dependency management

Create a project directory

~ mkdir D:\workspace\javascript\angular-navbar~ cd D:\workspace\javascript\angular-navbar

To create a dependency configuration file Bower.json

~ vi D:\workspace\javascript\angular-navbar\bower.json{    "name": "angular-navbar",    "version": "0.0.1",    "author": "Conan Zhang<[email protected]>",    "dependencies": {    }}

Download Dependent packages

~ D:\workspace\javascript\angular-navbar>bower install bootstrap --savebower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.1.1bower bootstrap#*             validate 3.1.1 against git://github.com/twbs/bootstrap.git#*bower jquery#>= 1.9.0           cached git://github.com/jquery/jquery.git#2.1.1bower jquery#>= 1.9.0         validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0bower bootstrap#~3.1.1         install bootstrap#3.1.1bower jquery#>= 1.9.0          install jquery#2.1.1bower                          no-json No bower.json file to save to, use bower init to create onebootstrap#3.1.1 bower_components\bootstrap└── jquery#2.1.1

Create HTML file: page1.html

~ VI d:\workspace\javascript\angular-navbar\page1.html<! DOCTYPE html>

Project directory Structure:


Start a static server and see a preview of the page1.html effect.

~ D:\workspace\javascript\angular-navbar>anywhereRunning at http://192.168.1.12:8000

The first step is to be realistic. BOOTSTRAP3 's navigation menu.

2. Navigation menu in ANGULARJS – click events

Next, we transform the project into a Angularjs project, and let Bootstrap work with ANGULARJS, achieve the effect of the navigation menu, and process the menu click event, by toggling the selected menu style.

Increase the ANGULARJS dependency package

~ D:\workspace\javascript\angular-navbar>bower install angular --save~ D:\workspace\javascript\angular-navbar>bower install angular-route --save~ D:\workspace\javascript\angular-navbar>bower install angular-bootstrap --save

Creates a new HTML file page2.html, with Ng-class, to set the selected style of the navigation menu.

~ VI d:\workspace\javascript\angular-navbar\page2.html<! DOCTYPE html>

New Angularjs file Control app.js

~ vi D:\workspace\javascript\angular-navbar\js\page2.html‘use strict‘;var page2 = angular.module(‘page2‘, [‘ui.bootstrap‘, ‘ngRoute‘]);page2.config([‘$routeProvider‘, ‘$locationProvider‘, ‘$sceProvider‘, function ($routeProvider, $locationProvider, $sceProvider) { $routeProvider .when(‘/‘, {controller: ‘DemoCtrl‘}) .when(‘/abc‘, {controller: ‘DemoCtrl‘}) .when(‘/123‘, {controller: ‘DemoCtrl‘}) .otherwise({redirectTo: ‘/‘}); $locationProvider.html5Mode(true);}]);page2.controller(‘NavbarCtrl‘, function ($scope, $location) { $scope.isActive = function (route) { if ($location.path().indexOf(‘/dropdown‘) == 0) { return route === ‘/dropdown‘; } return route === $location.path(); }});page2.controller(‘DemoCtrl‘, function () { // nothing});

Look at the effect of the operation so that you can achieve the menu selection effect!


3. Navigation menu Mouse passing event

With the ANGULARJS framework, the navigation menu implements dynamic features, which can be toggled by clicking to implement the style. The dropdown control requires a mouse click to pull out the level two menu, if the mouse passing event on the trigger may be more convenient, then continue to the drop-down list control modification.

There are several implementations, such as increasing the interception of mouse passing events through jquery, or developing a Angularjs plugin. However, there is a simpler way to do this, which is to control it through CSS.

We added a piece of CSS code.

.dropdown:hover .dropdown-menu {    display: block;}

A simple line of definition is done, and then look at the effect. When the mouse is passing dropdown, the drop-down menu pops up automatically.

The code has been uploaded to Github:https://github.com/bsspirit/angular-navbar, the students can download it as needed, or they can download the code directly from the command.

git clone https://github.com/bsspirit/angular-navbar.gitcd angular-navbarbower installanywhere

This article describes the use of navigation menus in Angularjs and BOOTSTRAP3, which is just the first step, and the next article will introduce BOOTSTRAP3 multilevel navigation menus.

Reprint please specify the source:
http://blog.fens.me/bootstrap-angularjs-navbar/

ANGULAR+BOOTSTRAP3 navigation Menu