您的位置：首页 > Web前端 > JavaScript

关于Angular js的文件引用和模板问题（ng-view,ng-include）

2017-08-31 12:24 549 查看

1.ng-view和ng-include的区别

首先先说一下这两个指令的区别，ng-view这个方法通过使用路由控制，可以方便的实现页面组合。但这个方法也有一个重大缺点，就是一个html文件中，只能有一个ng-view。虽然有变通之法。他是可以被ctl控制的。

ng-include就是将多个页面的公共页面提取出来，如header.html，footer.html等，在每个页面用

<dv
ng-include="'header.html'"></div>

来引入。

2.代码体现

首先要定义一个主页面，这个页面只有一个<div ng-view></div>用来接收路由的页面，其他所有的css文件和js文件都要引入

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>支付宝</title>
<link rel="stylesheet" href="../css/yue-hua.css">
<script src="../quotejs/jquery.js"></script>
<script src="../quotejs/angular.js"></script>
<script src="../quotejs/angular-route.js"></script>
<script src="../quotejs/angular-animate.js"></script>
<script src="../js/yue-hua.js"></script>
</head>
<body ng-app="app">
<div ng-view></div>
</body>
</html>

2.创建模板页面，分为header.html footer.html content.html

3.配置路由，这里我只让让main.html始终显示，

angular.module("app",['ng','ngRoute','ngAnimate']).
controller("footer",function($scope){

}).
controller("header",function($scope){

}).
controller("main",function($scope){

}).
config(function($routeProvider){
$routeProvider.
when("/main",{
templateUrl:'../tpl/main.html',
controller:"main"
}).otherwise({
redirectTo:"/main"
})
})

4.到这里时页面显示的只是main部分的内容，那么我们不想这样，我们想让main里面还要显示出header.html 和footer.html的内容，而让整个页面变得完整，这时需要用到ng-include在模板main.html里面进行引入------看代码

<div ng-include="'../tpl/header.html'"></div>
<div>
main
</div>
<div ng-include="'../tpl/footer.html'"></div>

5.好了，这样就能将几个模板整合到一个页面了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航