132
rated 0 times
[
135]
[
3]
/ answers: 1 / hits: 103738
/ 10 Years ago, thu, april 10, 2014, 12:00:00
Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.
Here's my tree:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html:
<!DOCTYPE html>
<html ng-app=app>
<head>
<title>AngularJS Test</title>
<script src=/assets/js/vendor/angular.js></script>
<script src=/assets/js/vendor/route.js></script>
<script src=/assets/js/vendor/resource.js></script>
<script src=/assets/js/main.js></script>
</head>
<body>
<div ng-include src=partials/structure/header.url></div>
<div ng-include src=partials/structure/navigation.url></div>
<div id=view ng-view></div>
<div ng-include src=partials/structure/footer.url></div>
</body>
</html>
main.js
var app = angular.module(app, [ngResource, ngRoute]);
app.config(function($routeProvider) {
$routeProvider.when(/login, {
templateUrl: login.html,
controller: LoginController
});
$routeProvider.when(/home, {
templateUrl: home.html,
controller: HomeController
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller(HomeController, function($scope) {
$scope.title = Home;
});
home.html
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
When i go on the home.html page, my header, nav and footer are not appearing.
More From » html
