【AngularJs】factory实现简单的网页公共头部

最新推荐文章于 2024-05-15 19:31:45 发布

ian唐

最新推荐文章于 2024-05-15 19:31:45 发布

阅读量3.3k

点赞数 1

分类专栏： AngularJs web 文章标签： angular html 公共页头 js

本文链接：https://blog.csdn.net/tanglei6636/article/details/52276107

版权

web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

AngularJs

1 篇文章 0 订阅

订阅专栏

本实例使用factory配合路由实现最简单的公共页头。

html代码：
    <div ng-controller="commonHeadCtrl">
        <div class="title_wrap">
            <div class="title_l inline-block"></div>
            <h1>{{title}}</h1>
            <div class="title_r block"><a href="">+</a></div>
        </div>
        <hr class="green" />
    </div>

js代码：
    var commonHead = angular.module('commonHead',[]);

    commonHead.factory('commonTitleFac',[ function () {
        var commonTitleFac = {};
        var headTitle;

        commonTitleFac.setTitle = function (title) {
            headTitle = title;      
        };

        commonTitleFac.getTitle = function () {
            return headTitle;
        };
        return commonTitleFac;
    }]);

    commonHead.controller('commonHeadCtrl',['$scope','$state','$http','commonTitleFac',function($scope,$state,$http,commonTitleFac){

        $scope.$watch(commonTitleFac.getTitle, function (newVal, oldVal, scope) {
            $scope.title = newVal;
        });
    }]);

在主页面上因入此js以及用路由引入公共页头。

html代码：
    <!DOCTYPE html>
    <html lang="en" ng-app="adProgramMage">
    <head>
        <meta charset="UTF-8">
        <title>云贴-广告管理</title>
        <link href="/css/base.css" type="text/css" rel="stylesheet" />

        <script src="/js/angular/angular.js" type="text/javascript"></script>
        <script src="/js/angular/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>

        <script src="/js/commonHead.js" type="text/javascript" charset="utf-8"></script>

        <script src="/js/adProgram.js" type="text/javascript" charset="utf-8"></script>
    </head>
        <body>
            <div ui-view="commonHead"></div>

            <div ui-view="adProgramContent"></div>

            <div ui-view="commonFoot"></div>
        </body>
    </html>

js代码：
    'user strict';

    var condition = "";

    var getUserAdProgram = "";

    var adProgramMage = angular.module('adProgramMage',['ui.router','commonHead']);

    adProgramMage.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $urlRouterProvider.otherwise(condition);
        $stateProvider.state('adProgramMage',{
            url:condition,
            views:{
                'adProgramContent':{
                    templateUrl:'/views/adProgramContent.html'
                },
                'commonHead' : {
                    templateUrl:'/views/common/commonHead.html'
                },
                'commonFoot' : {
                    templateUrl:'/views/common/commonFoot.html'
                }
            }
        });
    }]);

    adProgramMage.controller('adProgramCtrl',['$scope','$http','$stateParams','commonTitleFac','$location',function($scope,$http,$stateParams,commonTitleFac,$location){
        commonTitleFac.setTitle("广告管理");
    }]);