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

本实例使用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','$stateParams','$location',$stateParams,commonTitleFac,$location){
        commonTitleFac.setTitle("广告管理");
    }]);

原文链接：https://www.f2er.com/angularjs/149015.html

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

猜你在找的Angularjs相关文章