AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

最新推荐文章于 2024-02-20 04:45:00 发布

weixin_30381317

最新推荐文章于 2024-02-20 04:45:00 发布

阅读量66

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/final-elysion/p/6072893.html

版权

AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

核心代码如下

1.index.html

    <!DOCTYPE html>
    <html lang="en" style="height:100%">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="基础导航实现">
        <meta name="author" content="0o晓月メ">
        <title>博客</title>
        <!-- bootstrap -->
        <link href="libs/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">

        <script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="libs/bootstrap-3.3.5/dist/js/bootstrap.js"></script>
        <!-- less  -->
        <link href="resources/less/main.less" rel="stylesheet/less" type="text/css">
        <script src="libs/less/less.min.js" type="text/javascript"></script>
        <!-- angular-->
        <script src="libs/angular-ui-router/node_modules/angular/angular.js"></script>
        <script src="libs/angular-ui-router/release/angular-ui-router.js"></script>
        
        <script src="app/app.js"></script>
      </head>

      <body ng-app="MyApp" style="height:100%" class="main-body">
        <div ui-view></div>
      </body>
    </html>

2.viewport.html

    <div class ="container" style="padding-top: 150px;">
        <ul class="nav nav-pills">
            <li role="presentation" ng-class="{ active:'home'== currentType }" >
                <a ui-sref="app.home" ng-click="changeTab('home')">主页</a>
            </li>
            <li role="presentation" ng-class="{ active:'article'== currentType }">
                <a ui-sref="app.article" ng-click="changeTab('article')">文章</a>
            </li>
            <li role="presentation" ng-class="{ active:'photo'== currentType }">
                <a ui-sref="app.photo" ng-click="changeTab('photo')">相册</a>
            </li>
            <li role="presentation" ng-class="{ active:'music'== currentType }">
                <a ui-sref="app.music" ng-click="changeTab('music')">音乐</a>
            </li>
            <li role="presentation" ng-class="{ active:'comment'== currentType }">
                <a ui-sref="app.comment" ng-click="changeTab('comment')">留言板</a>
            </li>
        </ul>
    </div>
    <div ui-view class ="container"></div>

3.app.js

    angular.module('MyApp', ['ui.router'])
        .controller('MainController', ['$scope',function($scope) {
            console.log('init ctrl');
            $scope.currentType = 'home';
            $scope.changeTab = function(type){
                $scope.currentType = type;
            };
        }])
        .config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/app/home");
            $stateProvider.state('app', {
                url: "/app",
                abstract:true,
                templateUrl: "app/viewport.html",
                controller: 'MainController'
            })
            .state('app.home', {
              url: "/home",
              templateUrl: "app/home/home.html"
            })
            .state('app.article', {
              url: "/article",
              template: "文章"
            })
            .state('app.photo', {
              url: "/photo",
              template: "相册"
            })
            .state('app.music', {
              url: "/music",
              template: "音乐"
            })
            .state('app.comment', {
              url: "/comment",
              template: "留言板"
            })
    });