程序的結構圖
index.html
<!DOCTYPE html> <html ng-app="bookStoreApp"> <head lang="en"> <meta charset="UTF-8"> <title>BookStore</title> <script src="framework/angular.js"></script> <script src="framework/angular-route.js"></script> <script src="js/app.js"></script><!-- 必須先加載bookList-ctrl.js和hello-ctrl.js然后再加載app.js --> </head> <body ng-controller="firstController"> {{name}} <div ng-show="cat"> <div ng-include src="'tpls/cat.html'" ></div> </div> <div> <button ng-click="showCat()">顯示貓咪</button> </div> </body> </html>
index.html 對應的app.js
var bookStoreApp = angular.module('bookStoreApp',['ngRoute']); bookStoreApp.controller('firstController',function($scope){ $scope.name = 'ms'; $scope.cat = false; $scope.showCat = function(){ $scope.cat = !$scope.cat; } });
cat.html
<img src="picture/cat.jpg">
由上圖的結構可以看出index.html中ng-include 包含的路徑cat.html 是相對於index.html這個路徑的相對路徑 但是有沒有發現cat.html中的圖片的路徑是怎么寫的？？是相對於index.html 的相對路徑，可以這樣理解A頁面包含B頁面 B頁面中的包含的一些東西的路徑要寫成相對於A的路徑的相對路徑。如果單獨加載B頁面當然B頁面中的東西要寫成相對於B頁面中的相對路徑。