Home > Developer > Web Develop
Many Web management system side menu is collapsible (accordion style), we in the previous two articles in the HTML template, their own div, CSS to do some processing, the effect is not good. So I asked for a front-end UI framework,UI Bootstrap, to help. Do not look at its name with a bootstrap, but it does not rely on bootstrap, but with ANGULARJS implementation of the native instructions Oh. I hate too much reliance, this I like.
This article is based on the angulardemo of the "angular simple example ", and what I've said about directories follows the default directory structure of the Express app.
UI BootstrapUI Bootstrap has a brief introduction on GitHub:
Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required.
There is a readme, the installation, construction, and so on, I'm not interested, I want to quickly introduce it into node. JS application, so everything manually to do, directly download people build good files.
InstallationMinimum installation required:
I choose the Ui-bootstrap library with the template, that is, with TPLS, this version of the library, template and instructions mixed together, you can not customize the template and style. If you want to customize the look, download it without tpls. Build good files can be downloaded here https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files, choose you like the good.
The 0.13.x version of UI bootstrap requires angular 1.3.x or 1.4.x. I use the 0.13.3 version of UI Bootstrap, 1.4.3 version of Angularjs and Angular-animate.
1.4.3 's angular and animate components can be downloaded here: https://code.angularjs.org/1.4.3/. If you can't open it, turn Qiang or VPN.
Bootstrap CSS file, which can be downloaded here: http://www.bootstrapcdn.com/. Font files Google can download to, or Http://code.taobao.org/svn/mczg/trunk/mczg/WebRoot/bootstrap/fonts/glyphicons-halflings-regular.woff.
After downloading, you need to deal with it.
OK, manual installation is basically ready.
Using the UI bootstrap componentIn order to use UI Bootstrap, to introduce three JS files, a CSS file. The HTML template is probably like this:
<!DOCTYPE html>
Then, you use angular, and at least one JS file that implements the scope model, put it on the "/body" tab.
After adding the relevant files to the HTML, you can learn how to use the relevant components and instructions in the UI bootstrap documentation.
The detailed documentation for UI Bootstrap is here: http://angular-ui.github.io/bootstrap/. In the face of the current support of the instructions are described in detail, there are ready-made examples can take Lai learning. However, to turn Qiang.
Using the UI Bootstrap demoModified two files, admin.html and Admin.js.
Bootstrap-admin.htmlCopy the admin.html in the public directory, rename it to bootstrap-admin.html, open it with notepad++, and modify the contents to the following:
<! DOCTYPE html>
You can compare with the original admin.html, I have the class for the X-sidemenu div element within the item template, with the UI bootstrap accordion and Accordion-group rewrite a bit.
Accordion defines an accordion menu area, the Close-others property can specify whether the expansion of a menu group within the region is mutually exclusive, if the value is true, only one menu group can be expanded at a time, false, and multiple expanded menus may exist. (Note: Here the Word menu is not very accurate, first of all.) ）
Accordion-group defines the collapsible content on the accordion, its heading property specifies the caption of the collapsed area, the Is-open property specifies whether the current menu is open, True when you specify TRUE or False in HTML, is the initial value, and after the user clicks, Will change. You can also associate this attribute with the data in the angular scope model. I quoted the angular.ng-repeatDirective built-in F IRsTGenusSex,byNg ?RePeaTHealthintoof theSectionaaITemof the The first property value is true. So I designed the accordion area to open when the first collapsible menu was initially loaded.
Bootstrap-admin.jsCopy the original admin.js to bootstrap-admin.js and modify the content to the following:
Angular.module (' x-admin ', [' ui.bootstrap ', ' nganimate ']). Controller (' X-controller ', function ($scope, $http) {$ Scope.currentuser= "Zhangsan"; $scope. Content = '/welcome.html '; $scope. Oneatatime = false; $scope. Menus =[{text: "System Management", Enabled:true, submenus:[{text: "User Management", ENABL Ed:true, Action: "/admin/adduser"}, {text: "Role Management", Enabled:true, ACTI On: "/role"}, {text: "Rights Management", enabled:true, Action: "/access" }]}, {text: "Content Management", Enabled:true, submenus:[{text: "Live stream monitoring", E Nabled:true, Action: "/stream-monitor"}, {text: "Appointment Management", Enabled:true, Action: "/book-mgr"}]}, {text: "Push Management", Enabled:true, submenus:[{ Text: "Push list", Enabled:true, ACTIOn: "/push-list"}, {text: "New Push", enabled:true, Action: "/add-push" } ] } ]; $scope. setcontent = function (action) {Console.log (action); $scope. content=action; };});
I set the Oneatatime property to $scope, with the initial value being the Close-others attribute of the accordion element in false,html and the oneatatime binding. So, ultimately our admin menu is available to open multiple at the same time.
The most important change is the first line of code:
angular.module(‘x-admin‘, [‘ui.bootstrap‘, ‘ngAnimate‘]).
The two modules of Ui.bootstrap and nganimate are injected with a dependency.
OK, finally open "http://localhost:3000/bootstrap-admin.html" in the browser, the effect is as follows:
After clicking on content management, the effect is as follows:
See the documentation for more UI bootstrap component usage. More angular UI, see here: Https://github.com/angular-ui.
Other articles:
- Get started with node. JS-Transform Logindemo with MongoDB
- node. JS Development Primer--mongodb and Mongoose
- Get started with node. JS Development-Use cookies to stay signed in
- Getting Started with node. JS-Using ANGULARJS built-in services
- node. JS Development Primer--angular Simple Example
- Introduction to node. JS Development-Using ANGULARJS
- Getting Started with node. JS Development-Using the Jade template engine
- node. JS Development Starter--express Routing and middleware
- node. JS Development Primer--express Installation and use
- node. JS Development Primer--http File Server
- node. JS Development Primer--helloworld Re-analysis
- Introduction to node. JS Development--Environment building and HelloWorld
Copyright NOTICE: This article is Foruok original article, without BO Master permission cannot reprint.
Get started with node. JS Development-Introducing Uibootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
