angluar根据链接的url参数的不同实现显示与隐藏

1、绘制效果如下：

2、具体实现代码如下：

 1>静态路由配置

 /** 
 * routes.js 
 */  
  
define([  
    "app"
], function (app) {
    //静态路由设置，控制整个APP的跳转
    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('index.notification_information', {
                url: '/notification/information/',
                views:{
                    'main@index':{
                        templateUrl:'html/notification/notification.html',
                        controller:'notificationCtrl'
                    },
                    'topbar@index':{
                        templateUrl:'html/notification/topbar.html'
                    },
                    '[e-mail]_information':{
                        templateUrl:'html/notification/informationDetail.html'
                    }
                },
                resolve:{}
            })

            .state('index.notification_notice', {
                url: '/notification/notice/',
                views:{
                    'main@index':{
                        templateUrl:'html/notification/notification.html',
                        controller:'notificationCtrl'
                    },
                    'topbar@index':{
                        templateUrl:'html/notification/topbar.html'
                    },
                    '[e-mail]_notice':{
                        templateUrl:'html/notification/noticeDetail.html'
                    }
                },
                resolve:{}
            })

        $urlRouterProvider.otherwise('/index');
    })
})

2>页面布局

<div>
    <div ui-view="topbar"></div>
    <div ui-view="main"></div>
</div>

3>创建topBar页面绘制红色部分，创建notification页面绘制main主体页面,创建noticeDetail与informationDetail绘制右侧深绿色部分，noticeDetail代表左侧的公告，informationDetail代表左侧的通知

注：notification页面 <div class="searchType">
    <div class="left">
                    <label class="firstMenu selected" ng-click="showChildInfo(0)">
                        <div class="picture"><img ng-src="../../img/notification/icon_通知.png"/></div>
                        <div class="word">通知</div>
                    </label>
                    <label class="secondMenu" ng-click="showChildInfo(1)">
                        <div class="picture"><img ng-src="../../img/notification/icon_公告.png"/></div>
                        <div class="word">公告</div>
                    </label>
    </div>
    <div class="right">
    <div ui-view="rightDetail"></div>（对应router.js里配置的rightDetail，根据showChildInfo方法实现右侧显示相应的内容）
    </div>
    </div>

4>configFile配置通知与公告点击后的链接

notificationModuleUrls: {
            //通知
            "notice": "#/index/notification/notice/?module=notice",
            //公告
            "information": "#/index/notification/information/?module=information"
        },

注：在controller层调用方法时window.location.href = configFile.notificationModuleUrls.notice+"&sysManager=" + $scope.canDelete;

5>controller层的部分方法

define(['controllers/controllers','../../config/configFile'],
    function (controllers,configFile) {
        controllers.controller('notificationCtrl', ['$scope','$location','notificationService', 
            function ($scope,$location,notificationService)  {
                $scope.canDelete = $location.search()['sysManager'];
                $scope.cannotDelete = $scope.canDelete == "0" ? false : true;

}

]);

    });