文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在不同的文件夹中链接html和css文件

问在不同的文件夹中链接html和css文件
EN

Stack Overflow用户
提问于 2016-10-11 08:45:33
回答 3查看 427关注 0票数 0

我从一个链接下载了源代码，并试图了解它们是如何相互链接的。我不熟悉html，css，js等Web应用工具，所以我很难理解。

文件夹结构是

代码语言：javascript
运行
复制
-public_html
            |_index.html
            |_home
                  |_controllers
                               |_HomeCtrl.js
                  |_views
                         |_home.html
                  |_module.js

index.html有

代码语言：javascript
运行
复制
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Basic Styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="styles/fonts/line-icons/line-icons.css">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/jasny-bootstrap.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/material-kit.css">
         <!-- Main Styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/main.css">
        <!-- custom Styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/custom.css">
         <!-- Responsive CSS Styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/responsive.css">
        <!-- Slicknav js -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/slicknav.css">
        <!-- Bootstrap Select -->
        <link rel="stylesheet" type="text/css" media="screen" href="styles/css/bootstrap-select.min.css">


        <link rel="shortcut icon" href="styles/img/favicon/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon" href="styles/img/splash/sptouch-icon-iphone.png">
        <link rel="apple-touch-icon" sizes="76x76" href="styles/img/splash/touch-icon-ipad.png">
        <link rel="apple-touch-icon" sizes="120x120" href="styles/img/splash/touch-icon-iphone-retina.png">
        <link rel="apple-touch-icon" sizes="152x152" href="styles/img/splash/touch-icon-ipad-retina.png">

        <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- Startup image for web apps -->
        <!-- 
        <link rel="apple-touch-startup-image" href="styles/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
        <link rel="apple-touch-startup-image" href="styles/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="styles/img/splash/iphone.png" media="screen and (max-device-width: 320px)">
        -->
    </head>
    <body>
        <div><?php include('/app/home/views/home.html'); ?></div>

    </body>
</html>

HomeCtrl.js有

代码语言：javascript
运行
复制
'use strict';

angular.module('app.home').controller('HomeController', function ($scope) {


});

home.html有

代码语言：javascript
运行
复制
<!-- Start intro section -->
<section id="intro" class="section-intro">
  <div class="overlay">
    <div class="container">
      <div class="main-text">
        <h1 class="intro-title">Welcome To <span ><strong>Test</strong>Page</span></h1>
        <p class="sub-title">Search for property, jobs and more</p>

        <!-- Start Search box -->
        <div class="row row-centered">
          <div class="search-bar col-centered">
            <div class="advanced-search">
              <div class="row row-centered">
                  <div class="col-md-6 col-sm-6 col-xs-12 col-centered">
                    <button class="btn btn-common btn-search btn-block"><strong>Model</strong></button>
                  </div>
                  <div class="col-md-6 col-sm-6 col-xs-12 col-centered">
                    <button class="btn btn-common btn-search btn-block"><strong>Actress</strong></button>
                  </div>
               </div>
              <form class="search-form" method="get"></form>
            </div>
            <!-- </form> -->
          </div>
        </div>
        <!-- End Search box -->
      </div>
    </div>
  </div>
</section>
<!-- end intro section -->

<div class="wrapper">
  <!-- Categories Homepage Section Start -->
  <section id="categories-homepage">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h3 class="section-title">Browse Ads from 8 Categories</h3>
        </div>          
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-1 wow fadeInUpQuick" data-wow-delay="0.3s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-store color-1"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                <div class="category-body"><h3 class="col-centered">Lady</h3></div>

            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-5 wow fadeInUpQuick" data-wow-delay="1.5s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-briefcase color-5"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Business</h3></div>
            </div>
          </div>
        </div> 
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-6 wow fadeInUpQuick" data-wow-delay="1.8s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-graduation-hat color-6"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Men</h3></div>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-7 wow fadeInUpQuick" data-wow-delay="2.1s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-apartment color-7"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Kids</h3></div>
            </div>
          </div>
        </div>            
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-8 wow fadeInUpQuick" data-wow-delay="2.3s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-car color-8"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Travel</h3></div>
            </div>
          </div>
        </div> 
         <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-2 wow fadeInUpQuick" data-wow-delay="0.6s">
            <div class="icon">
              <a href="#"><i class="fa fa-laptop fa-5x color-2" aria-hidden="true"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
              <div class="category-body"><h3 class="col-centered">Actors</h3></div>
            </div>
          </div>
        </div>  
            <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-4 wow fadeInUpQuick" data-wow-delay="1.2s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-cart color-4"></i></a>
            </div>
            <div class="category-header">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Shopping</h3></div>
            </div>
          </div>
        </div> 
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="category-box border-3 wow fadeInUpQuick" data-wow-delay="0.9s">
            <div class="icon">
              <a href="#"><i class="lnr lnr-cog color-3"></i></a>
            </div>
            <div class="category-header ">  
              <a href="#"></a>
            </div>
            <div class="category-content row-centered">
                  <div class="category-body"><h3 class="col-centered">Services</h3></div>
            </div>
          </div>
        </div>   
      </div>
    </div>
  </section>
  <!-- Categories Homepage Section End -->
</div>

<!-- Counter Section Start -->
<section id="counter">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="counting wow fadeInDownQuick" data-wow-delay=".5s">
          <div class="icon">
            <span>
              <i class="lnr lnr-tag"></i>
            </span>
          </div>
          <div class="desc">
            <h3 class="counter">12090</h3>
            <p>Regular Ads</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="counting wow fadeInDownQuick" data-wow-delay="1s">
          <div class="icon">
            <span>
              <i class="lnr lnr-map"></i>
            </span>
          </div>
          <div class="desc">
            <h3 class="counter">350</h3>
            <p>Locations</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="counting wow fadeInDownQuick" data-wow-delay="1.5s">
          <div class="icon">
            <span>
              <i class="lnr lnr-users"></i>
            </span>
          </div>
          <div class="desc">
            <h3 class="counter">23453</h3>
            <p>Reguler Members</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="counting wow fadeInDownQuick" data-wow-delay="2s">
          <div class="icon">
            <span>
              <i class="lnr lnr-license"></i>
            </span>
          </div>
          <div class="desc">
            <h3 class="counter">150</h3>
            <p>Premium Ads</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Counter Section End -->

module.js有

代码语言：javascript
运行
复制
"use strict";


angular.module('app.home', ['ui.router'])
.config(function ($stateProvider) {

    $stateProvider
        .state('app.home', {
            url: '/home',
            data: {
                title: 'Blank'
            },
            views: {
                "content@app": {
                    templateUrl: 'app/home/views/home.html',
                    controller: 'HomeController'
                }
            }
        })
});

如果我将home.html的所有内容复制并包含到index.html中，我可以看到主页。但是，我只想使用<div><?php include(); ?></div>来包含文件名，我尝试将其作为<div><?php include(/home/views/home.html); ?></div>来包含，但是什么也没有出来。

有人能解释一下吗

(1)将文件夹拆分为控制器和家庭内部视图的好处是什么？

(2)这些js文件、HomeCtrl.js和module.js的目的是什么？

(3)如何从home.html调用index.html？

谢谢

EDIT1:我有另一个文件app.js，它有

代码语言：javascript
运行
复制
'use strict';

/**
 * @ngdoc overview
 * @name app [smartadminApp]
 * @description
 * # app [smartadminApp]
 *
 * Main module of the application.
 */

var app = angular.module('app', [
    'ngSanitize',
    'ngAnimate',

    'restangular',
    'ui.router',
    'ui.bootstrap',

    // Smartadmin Angular Common Module
    'SmartAdmin',

    // App
    'app.auth',
    'app.layout',
    'app.consumers',
    //'app.chat',
    //'app.dashboard',
    //'app.calendar',
    //'app.inbox',
    //'app.graphs',
    //'app.tables',
    //'app.forms',
    //'app.ui',
    //'app.widgets',
    //'app.maps',
    //'app.appViews',
    //'app.misc',
    //'app.smartAdmin',
    //'app.eCommerce'
    'app.home'
])
    .config(function ($provide, $httpProvider, RestangularProvider) {


        // Intercept http calls.
        $provide.factory('ErrorHttpInterceptor', function ($q) {
            var errorCounter = 0;
            function notifyError(rejection) {
                console.log(rejection);
                $.bigBox({
                    title: rejection.status + ' ' + rejection.statusText,
                    content: rejection.data,
                    color: "#C46A69",
                    icon: "fa fa-warning shake animated",
                    number: ++errorCounter,
                    timeout: 6000
                });
            }

            return {
                // On request failure
                requestError: function (rejection) {
                    // show notification
                    notifyError(rejection);

                    // Return the promise rejection.
                    return $q.reject(rejection);
                },

                // On response failure
                responseError: function (rejection) {
                    // show notification
                    notifyError(rejection);
                    // Return the promise rejection.
                    return $q.reject(rejection);
                }
            };
        });

        // Add the interceptor to the $httpProvider.
        $httpProvider.interceptors.push('ErrorHttpInterceptor');

        RestangularProvider.setBaseUrl(location.pathname.replace(/[^\/]+?$/, ''));

    })
    .constant('APP_CONFIG', window.appConfig)

    .run(function ($rootScope
        , $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;

        // editableOptions.theme = 'bs3';

    });
var httpApiConfig = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;',
        headers: { 'Content-Type': 'application/json' },
    }
};
app.constant('httpApiConfig', httpApiConfig)
javascript
php
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-10-11 08:58:49

1 -将文件夹拆分为控制器和家庭内部视图的优点是什么？

层次结构的目标是拥有(您几乎可以想要)：

  • 模块/
    • 管制员/
    • 意见/

​

这是一种常见的模式，尝试搜索MVC‘模块/视图/控制器’

2 -这些js文件、HomeCtrl.js和module.js?的用途是什么？

你必须学习AngularJS

这里，module.js是模块Home的配置文件，它还包含该模块的路由。

HomeCtrl.js是控制器，在这里，你必须把逻辑放在你的data和UI之间

3 -如何从index.html?调用home.html

首先，您必须在<script>标记中加载所有JS文件，然后您的身体必须看起来像这样

代码语言：javascript
运行
复制
<body ng-app="app">
    <div ui-view="content"></div>

    <!-- put below all of you js files -->
    <!-- angular.js / main.js /app.js / controllerFiles.js etc ... -->
</body>
票数 1
EN

Stack Overflow用户

发布于 2016-10-11 09:08:44

似乎您正在使用angularJS，根据函数的名称。

模型/视图/控制器是一种允许程序员/设计人员专注于他们最擅长的东西的方法，他们不需要知道系统中的所有东西就可以进行修改和开发。

简而言之(因为MVC这个术语已经有了很多解释，所以并不总是正确的)

模型/控制器:后端(服务器端)的东西。视图:设计用户将实际看到的界面。它显示控制器提供的变体和信息，或者将用户输入传递给控制器来做一些事情。

在这种情况下，

Web设计人员只需做UI和CSS部件，当他们需要从数据库中得到一些东西时，他们只需在HTML/CSS/JS中添加一个标记。

相反，代码/后端开发人员不必关心如何构建漂亮的UI，而只需集中精力输出前端所需的字符串即可。

阅读与“模型-视图-控制器”相关的文章可以帮助您更好地理解他们是如何和为什么这样做的。

票数 1
EN

Stack Overflow用户

发布于 2016-10-11 09:11:45

好的，我会回答你，但会提供部分答案作为链接，因为听起来你真正需要的是阅读一些关于主题的内容。

首先，将index.html更改为index.php，并在需要时更改标记；服务器不识别何时将其放入html文档(除非您修改htaccess文件，而是将其改为php文件)。

将代码分成不同的文件夹/类的好处是，对于了解MVC体系结构的人(您可以在维基百科( wikipedia)上找到它的简介)，在哪里放置什么功能，这一点就变得更加清晰了。在我看来，您正在帮助自己学习它的基础知识。虽然它最初是为Java而开发的，而且它在web开发中的使用也有些争议。MVC架构/模式还可以帮助促进低耦合和高内聚力。

.js文件做什么..。嗯，在我看来，最初它似乎是在使用Angular.js (一个框架)，但是我找不到我期望它的包含。但是，如果您想学习使用角，您可以这样做这里。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39973507

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档