angularjs中的随页面变化的导航

看看这是不是你要的：nav.html<!DOCTYPE html><html lang="en"><head>     <meta charset="UTF-8">     <title>Nav</title>     <link rel="stylesheet" href="css/nav.css"></head><body ng-app="navApp" ng-controller="navCtrl">     <div class="container">         <nav-bar></nav-bar>         <div ui-view class="content"></div>     </div></body><script src="angular/angular.js"></script><script src="angular-ui-router/release/angular-ui-router.js">     </script><script src="js/nav.js"></script></htmltab.html<ul class="nav clearfix">    <li ng-repeat="tab in tabs"><a ui-sref="{{tab|lowercase}}" ui-sref-active="active">{{tab}}</a></li></ul>nav.jsangular.module('navApp',['ui.router'])    .config(function($stateProvider,$urlRouterProvider){        $urlRouterProvider.otherwise('/home');        $stateProvider            .state('home',{                url: '/home',                template: '<div>Welcome to home page!</div>'            })            .state('recommend',{                url: '/recommend',                template: '<div>recommend</div>'            })            .state('videos',{                url: '/videos',                template: '<div>videos</div>'            })            .state('shopping',{                url: '/shopping',                template: '<div>shopping</div>'            })    })    .directive('navBar', function(){        return {            restrict: 'EA',            scope:{},            templateUrl: '../views/tab.html',            controller: function($scope){                $scope.tabs = ['Home','Recommend','Videos','Shopping'];            }        }    })    .controller('navCtrl', function($scope){    })app.jsvar express = require('express');var bodyParser = require('body-parser');var app = express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({    extended: true}));app.use(express.static('./public'));app.use(express.static('./node_modules'));var PORT = process.env.PORT || 8000;app.listen(PORT, ()=>{    console.log('server running on port: ' + PORT);});app.get('/nav', (req,res)=>{    res.sendFile(__dirname + '/public/views/nav.html');});nav.css*{padding: 0;margin: 0;color: #333;}ul{list-style: none;}a{    color: inherit;    text-decoration: none;}.clearfix{zomm:1;clear: both;}.clearfix:after{    content: "";    display: block;    clear: both;    overflow: hidden;    height: 0;}.container{    margin: 100px auto;    width: 400px;    border: 1px solid #ddd;}.nav{margin-bottom: 10px;border-bottom: 1px solid #ddd;}.nav li{    float: left;    width: 25%;    box-sizing: border-box;    text-align: center;    border-right: 1px solid #ddd;}.nav li:last-child{border-right: 0;}.nav li a{display: block;padding: 5px 0;}.nav li a:hover{background-color: lightgray;}.content{    min-height: 200px;}.active{background-color: lightgray;}

angularjs中的随页面变化的导航

1回答