[英]Linking html and css files in different folders
我有從鏈接下載的源代碼,並試圖了解它們如何相互鏈接。 我不熟悉html,css,js等Web應用程序工具,因此我很難理解。
文件夾結構為
-public_html
|_index.html
|_home
|_controllers
|_HomeCtrl.js
|_views
|_home.html
|_module.js
index.html有
<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有
'use strict';
angular.module('app.home').controller('HomeController', function ($scope) {
});
home.html有
<!-- 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有
"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(); ?></div>
<div><?php include(); ?></div>
我試圖將其包含為<div><?php include(/home/views/home.html); ?></div>
<div><?php include(/home/views/home.html); ?></div>
但是什么也沒出現。
有人可以解釋我嗎
(1)將文件夾拆分為控制器和家庭內部的視圖有什么好處?
(2)這些js文件HomeCtrl.js和module.js的用途是什么?
(3)如何從index.html調用home.html?
謝謝
EDIT1:我還有另一個文件app.js
,它有
'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)
1-將文件夾拆分為控制器和家庭內部的視圖有什么好處?
層次結構的目標是擁有(您幾乎可以想要):
這是一種常見的模式,請嘗試搜索有關MVC“模塊/視圖/控制器”的信息
2-這些js文件HomeCtrl.js和module.js的用途是什么?
您必須學習AngularJS
這里module.js
是模塊Home
的配置文件,還包含該模塊的路由。
而且HomeCtrl.js
是控制器,您必須在這里在data
和UI
之間放置邏輯
3-如何從index.html調用home.html?
首先,您必須在<script>
標記中加載所有JS文件,然后,您的身體必須看起來像這樣
<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>
根據函數名稱,您似乎正在使用angularJS。
模型/視圖/控制器是一種方法,它允許程序員/設計人員專注於他們的最佳選擇,他們不需要了解系統中的所有內容即可進行修改和開發。
簡介(由於MVC術語已經有很多解釋,因此並不總是正確的)
模型/控制器:后端(服務器端)。 視圖:設計用戶將實際看到的界面。 它顯示控制器提供的變量和信息,或將用戶輸入傳遞給控制器以執行某些操作。
在這種情況下,
Web設計人員只需要做UI和CSS部分,當他們需要數據庫中的內容時,他們只需在HTML / CSS / JS中添加標簽即可。
相比之下,代碼/后端開發人員將不必在乎如何構建漂亮的UI,而只需要集中精力向前端輸出必要的字符串即可。
閱讀有關“模型-視圖-控制器”的文章,應該有助於您更好地了解它們的操作方式和原因。
好的,我會回答您,但會提供部分答案作為鏈接,因為聽起來您真正需要的是閱讀一些有關主題的知識。
首先,將index.html更改為index.php,並在需要時更改標簽; 當您將其放入html文檔時,服務器無法識別(除非您修改htaccess文件,而只是將其設為php文件)。
將代碼分為不同的文件夾/類的優點是,對於了解MVC架構的人(您可以在Wikipedia上找到它的介紹),它變得更加清晰,該地方放置了什么功能。 我認為您正在幫忙學習它的基礎。 盡管它最初是為Java開發的,但在Web開發中的使用卻引起了一些爭議。 MVC架構/模式還可以幫助促進低耦合和高內聚。
.js文件的作用...嗯,在我看來,最初似乎是使用Angular.js(框架),但我找不到包含它的地方。 但是,如果您想學習有關使用Angular的知識,可以在此處進行 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.