Лучше воспользуйтесь UI Router. С помощью этого компонента вы сможете добиться желаемого.
==== Пример ====
Шаблон файла index.html
<html>
<head></head>
<body>
<ui-view></ui-view>
</body>
</html>
Шаблон файла content.html
<ui-view name="header"></ui-view>
<ui-view name="content"></ui-view>
<ui-view name="footer"></ui-view>
Пример конфигурирования ui-router'а:
$stateProvider
.state("app", {
abstract: true,
url: "/",
controller: "AppController as vm",
templateUrl: "app/views/content.html"
})
.state("app.index", {
url: "",
data: { pageTitle: "Главная страница" },
views: {
"header": { templateUrl: "app/views/index/header.html" },
"content": { templateUrl: "app/views/index/content.html" },
"footer": { templateUrl: "app/views/index/footer.html" }
}
})
.state("app.news", {
url: "/news",
data: { pageTitle: "Новости" },
views: {
"header": { templateUrl: "app/views/news/header.html" },
"content": { templateUrl: "app/views/news/content.html" },
"footer": { templateUrl: "app/views/news/footer.html" }
}
})
Что собственно происходит:
1) При старте приложения загружается состояние app
и содержимое content.html
загружается в index.html
.
2) При загрузке url - http://domain/
- загружается состояние app.index
. При этом в файл context.html
в соответствующие элементы по name
загружаются кусочки страницы. Кусочки берутся по указанным в конфиге ссылкам.
3) При загрузке url - http://domain/news
- загружается состояние app.news
. При этом в файл context.html
в соответствующие элементы по name
загружаются кусочки страницы. Кусочки берутся по указанным в конфиге ссылкам.
ng-include
разве нет?