關於Angular js的檔案引用和模板問題（ng-view,ng-include）
阿新 • • 發佈：2018-12-13
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.好了，這樣就能將幾個模板整合到一個頁面了