My main html page is given below index.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">{{airport.code}}-{{airport.city}}</a>
-<a href="" ng-click="editAirport(airport.code)">Edit</a>
</li>
</ul>
<p ng-show="currentAirport">currentAirport:{{currentAirport.name}}</p>
</div>
<p ng-show="editing.name"><input type="text" ng-model="editing.name" value=""/></p>
<div ng-include="sidebyURL"></div>
<div ng-include="formURL"></div>
</div>
</body>
</html>
and I am using javascript file as given below app.js which present inside js/controllers folder
function AppCtrl($scope) {
$scope.airports = {
"PDX" : {
"code" : "PDX",
"name" : "Portland International Airport",
"city" : "Portland",
"destinations" : [ "LAX", "SFO" ]
},
"STL" : {
"code" : "STL",
"name" : "Lampbert-St. Louis International Airport",
"city" : "St. Louis",
"destinations" : [ "LAX", "MKE" ]
},
"MCI" : {
"code" : "MCI",
"name" : "Kansas City International Airport",
"city" : "Kansas City",
"destinations" : [ "SFO", "LAX" ]
},
};
$scope.currentAirport=null;
$scope.sidebyURL='partials/airport.html';
$scope.formURL='partials/form.html';
$scope.setAirport = function(code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function(code) {
$scope.editing = $scope.airports[code];
};
}
and I am including 2 html files in the main index.html file that 2 files airport.html is
<div ng-show="currentAirport">
<h3>{{currentAirport.name}}</h3>
<h4>Destinations</h4>
<ul>
<li ng-repeat="destination in currentAirport.destinations">
{{destination}}
</li>
</ul>
</div>
and another form.html is
<div ng-show="editing">
<h3>Edit Airport</h3>
<input type="text" ng-model="editing.name" value=""/>
</div>
and my 2 remaining html files are present in the folder partials and while executing index.html I am not able to include form.html and airport.html inside index.html file if you have any idea about these let me know thank you.....
$scope.sidebyURL='/partials/airport.html';– Pankaj Parkar Feb 2 '15 at 10:17