Angularjs全栈的应用 [英] Angularjs full stack application

查看:106
本文介绍了Angularjs全栈的应用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好即时通讯使用angularjs完整的堆栈(yoeman + EX preSS + mongodb的)应用程序的发展,即时通讯发展所提供的样品支架的应用程序。项目结构是

Hi guys im using angularjs full stack (yoeman+express+mongodb) application for development, im developing the application in the sample scaffold provided. Structure of project is

app
 -scripts
 -styles
 -views
   -- admin
   --partials
   --404.html
   --index.html
lib

现在我的问题是谐音文件夹中包含navbar.html和foter.html,包含在index.html页面

now my issue is partials folder contains navbar.html and foter.html , which is included in index.html page

<div ng-include="'partials/navbar'"></div>
<div style="height:48px;" id="spacer"></div>
<!-- Add your site or application content here -->
<div ng-view=""></div>
<div ng-include="'partials/footer'"></div>

在谐音的所有html页面导航栏都和页脚那好吧,但我想管理文件夹页,不含任何这些导航栏和页脚。检查后,所有的app.js和route.js即时通讯无法找到什么是必须要做的,以便所有的管理文件夹的页面不应该有index.html页面结构的设置。

all the html page in partials have navbar and footer thats ok , but i want admin folder pages to not contain any of these navbar and footer. after checking all the app.js and route.js im not able to find what is the setting to be done so that all the admin folder pages should not have index.html page structure.

推荐答案

我会建议使用角UI路由器,但如果你坚持使用 ngRoute 那么你可以做类似如下:

I would recommend using angular-ui-router, but if you're stuck with using ngRoute then you could do something like the following:

<!doctype html>
<html>

<head>
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>

  <script>
    var app = angular.module('myApp', ['ngRoute']);

    app.config(function ($routeProvider) {
      $routeProvider.when('/', {
        templateUrl: 'landing.html'
      }).when('/admin', {
        templateUrl: 'admin.html',
        data: {
          headerFooterVisible: false
        }
      });
    });

    function MainCtrl($scope) {
      $scope.$on('$routeChangeSuccess', function (e, current, prev) {
        $scope.headerFooterVisible = !current.data || current.data.headerFooterVisible;
      });
    }
  </script>
</head>

<body ng-app="myApp" ng-controller="MainCtrl">
  <div ng-show="headerFooterVisible" ng-include="'header.html'"></div>
  <div ng-view></div>
  <div ng-show="headerFooterVisible" ng-include="'footer.html'"></div>
</body>

</html>

这个方法可以让你在路由器配置哪些路由应该隐藏页眉和页脚注明。只需添加 headerFooterVisible:路由配置为​​您不想头路由的虚假数据部分和页脚可见。

This way allows you to specify in the router config which routes should hide the header and footer. Just add headerFooterVisible: false to the data section of the route config for the routes that you don't want the header and footer visible.

这篇关于Angularjs全栈的应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆