stackoom
  简体   繁体   中英

Linking html and css files in different folders

 原文  2016-10-11 08:45:33  7   3    javascript/ php/ html

Question

I have source code downloaded from a link and trying to understand how they link each other. I am not familiar with Web application tools like html, css, js etc. So that I have difficulty to understand.

The folder structure is 

-public_html
            |_index.html
            |_home
                  |_controllers
                               |_HomeCtrl.js
                  |_views
                         |_home.html
                  |_module.js

index.html has 

<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 has 

'use strict';

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


});

home.html has 

<!-- 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 has 

"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'
                }
            }
        })
});

If I copy and include all contents of home.html into body inside index.html, I can see the home page. But I just want to include the file name using <div><?php include(); ?></div> <div><?php include(); ?></div> I tried to include as <div><?php include(/home/views/home.html); ?></div> <div><?php include(/home/views/home.html); ?></div> But nothing comes out.

Can somebody explain me

(1)what is the advantage of splitting folders as controllers, and views inside home?

(2)What are the purposes of these js files, HomeCtrl.js and module.js?

(3)How to call home.html from index.html?

Thanks

EDIT1: I have another file app.js and it has 

'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)

3 answers

solution1
 1 ACCPTED  2016-10-11 08:58:49

1 - What is the advantage of splitting folders as controllers, and views inside home?

The goal of the hierarchy is to have (you can almost do want you want):

  • Modules/
    • Controllers/
    • Views/

it's a common pattern, try to search about MVC 'Module/View/Controller'

2 - What are the purposes of these js files, HomeCtrl.js and module.js?

You have to learn AngularJS

Here module.js is the configuration file for the module Home It also contains routing for this module.

And HomeCtrl.js is the controller it's here you have to put the logic between your data and your UI

3 - How to call home.html from index.html?

First you have to load all of your JS file in <script> tag Then your body have to looks like something like this 

<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>

solution2
 1  2016-10-11 09:08:44

Seems you are using angularJS, according to the function name.

Model / View / Controller is a method to allow programmer / designer to focus on what they are best with, they don't need to know everything in the system to do the modifications and development.

IN BRIEF (Not always correct since the term MVC already has lots of explanation)

Model / Controller: The backend (server-side) stuff. View: Design what interfaces users will actually see. It display variants and information provided by controller, or pass user inputs to controller to do something.

In this case,

Web designers will only have to do UI and CSS parts, when they need something from database they just add a tag within their HTML/CSS/JS.

As contrast, code / back end developers will not have to care how to build beautiful UI, but only have to concentrate on output necessary strings to front end.

Read about articles related with "Model–view–controller" should help you to have better understanding on how and why they are doing so.

solution3
 1  2016-10-11 09:11:45

Okay, I'll answer you, but will provide part of the answer as links, because it sounds like what you really need is to read a bit about the subjects.

First, change the index.html into index.php, and change the tags where needed; The server doesn't recognize the when you put it into a html document (unless you modify the htaccess file, but just make it a php file instead).

The advantage of splitting the code into different folders/classes is that it becomes clearer to someone who knows MVC architecture (you can find an intro to what it is on eg wikipedia), where what functionality is placed. In my opinion you're doing yourself a favour learning the basics of it . Although it was originally developed for Java and its use in web-development is somewhat controversial. The MVC architecture/pattern can also help facilitate low-coupling and high-cohesion.

What the .js files does... Well, it would initially seem to me like it was using Angular.js (a framework), but I can't find the include where I'd expect it. But if you want to learn a bit about using Angular, you can do so here .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Best practice for linking images/files in different web folders Trouble linking css and js files in html head linking css files in php Koa - error, file not found - when html and css are in different folders CSS are not linking with HTML in WordPress How to write a JS function that is used by .html files in different folders? Linking Html files with javascript CSS isn't linking to HTML CSS/JS not linking to HTML page How to handle linking to script and css files in a multiple page HTML/jquery only app
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM