Jquery 如何在Angular中创建单页应用程序？
我是angular的初学者，现在正在开发单页应用程序。我想在index.html中插入四个页面 它在这里工作正常，但是css不支持这四个页面。我的页眉和页脚部分也不显示相同的页面 注入页面我只创建部分，没有页眉和页脚 请建议我，如果有任何可下载选项的演示链接，请让我知道 'var app=angular.module（“app”，[]）Jquery 如何在Angular中创建单页应用程序？,jquery,angularjs,Jquery,Angularjs,我是angular的初学者，现在正在开发单页应用程序。我想在index.html中插入四个页面 它在这里工作正常，但是css不支持这四个页面。我的页眉和页脚部分也不显示相同的页面 注入页面我只创建部分，没有页眉和页脚 请建议我，如果有任何可下载选项的演示链接，请让我知道 'var app=angular.module（“app”，[]） app.config（函数（$routeProvider）{ $routeProvider .when（“/main”{ templateUrl:'index.
app.config（函数（$routeProvider）{
$routeProvider
.when（“/main”{
templateUrl:'index.html'，
控制器：“主控制器”
})
。当（“/产品”{
templateUrl:'fareproducts.html'，
控制器：“fareproductsController”
})
。当（“/激活”{
templateUrl:'keycardactivation.html'，
控制器：“钥匙卡激活控制器”
})
.when（“/learnmore”{
templateUrl:'learnmore.html'，
控制器：“learnmoreController”
});
});
app.controller（'fareproductsController'，函数（$scope）{
//$scope.message='每个人都来看看我有多好看！'；
});
应用程序控制器（'keycardactivationController'，函数（$scope）{
//$scope.message='看！我是一个关于页面'；
});
应用控制器（'learnmoreController'，函数（$scope）{
//$scope.message='联系我们！JK.这只是一个演示'；
});'
标题
欢迎
切换导航
-
-
-
-
登录旅游
转到Master Card®借记卡
。。。。
....
这是标题
app.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'index.html',
controller : 'mainController'
})
.when('/products', {
templateUrl : 'fareproducts.html',
controller : 'fareproductsController'
})
.when('/activation', {
templateUrl : 'keycardactivation.html',
controller : 'keycardactivationController'
})
.when('/learnmore', {
templateUrl : 'learnmore.html',
controller : 'learnmoreController'
});
});
app.controller('fareproductsController', function($scope) {
//$scope.message = 'Everyone come and see how good I look!';
});
app.controller('keycardactivationController', function($scope) {
//$scope.message = 'Look! I am an about page.';
});
app.controller('learnmoreController', function($scope) {
//$scope.message = 'Contact us! JK. This is just a demo.';
});'
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Smartphone Compatible web design" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- banner -->
<div class="wrapper">
<div class="container-fluid">
<div class="header">
<div class="logo">
<h1 class="text-center">Welcome</h1>
<!-- <h1>{{message}}</h1> -->
</div>
<div class="navigation">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hvr-bounce-to-bottom button"><a href="index.html" class="scroll"><div class="menuImg"><img src="images/1.png" class="iv"/></div><span>Home</span></a>
</li>
<li class="hvr-bounce-to-bottom button"><a href="fareproducts.html" class="scroll"><div class="menuImg"><img src="images/2.png" class="iv"/></div><span>Fare Products</span></a>
</li>
<li class="hvr-bounce-to-bottom button"><a href="parking.html" class="scroll"><div class="menuImg"><img src="images/3.png" class="iv"/></div><span>Parking</span></a>
</li>
<li class="hvr-bounce-to-bottom button"><a href="keycardactivation.html" class="scroll"><div class="menuImg"><img src="images/4.png" class="iv"/></div><span>Master Card® Debit</span></a>
</li>
<li class="hvr-bounce-to-bottom button"><a href="#contact" class="scroll"><div class="menuImg"><img src="images/5.png" class="iv"/></div><span>FAQs</span></a></li>
<li class="hvr-bounce-to-bottom button"><a href="#contact" class="scroll"><div class="menuImg"><img src="images/6.png" class="iv"/></div><span>Search</span></a></li>
</ul>
<div class="clearfix"></div>
</div>
</nav>
</div>
</div>
<div class="content">
<div ng-view="">
<div class="logbtn">
<button class="btn btn-default btn-lg btn-block btn1" name="" value="Learn More"><a href="#learnmore">Learn More</a></button>
<button class="btn btn-default btn-lg btn-block btn2" name="" value="Login To Travel">Login To Travel</button>
<button class="btn btn-default btn-lg btn-block btn3" name="" value="Go to Master Card® Debit">Go to Master Card® Debit</button>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="js/spa.js"></script>
<!--- footer ---->
</body>
</html>
angular.module('myApp')
.directive('header',function(){
return {
restrict: 'A',
template: 'path/to/header.html'
}
}
}
....
<div header></div>
....
<script type="text/ng-template" id="header.html">
This is header
</script>
<div ng-include src="'header.html'"></div>
Hi please have look on [this](http://embed.plnkr.co/uq4gjR5kbiN5Y7HQWJKk/)
Follow code structure like below:
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
------Router
----------mainRouting.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html