如何继承页面外观?

时间:2014-07-08 12:55:46

标签: angularjs

我的网站上有几页。 我的网站有一个通用框架:顶部,底部和一般css对于所有页面都是相同的。 在所有页面之间共享框架的便捷方式是什么,以便它们看起来都一样。

1 个答案:

答案 0 :(得分:0)

用于实现此目的的 AngularJS方式是通过使用ng-view和路由。

为此,您必须在应用中加入angular-route文件并注入ngRoute。按照示例:

<强>的index.html

<!DOCTYPE html>
<html ata-ng-app="myApp">
<head>
  <meta charset="utf-8" />
  <title>My App</title>
</head>
<body>
  <header><h1> Header for all pages </h1></header>

  <div data-ng-view></div> <!-- your files will be rendered here -->

  <footer>...</footer>

  <script src="path/to/angular.min.js"></script>
  <script src="path/to/angular-route.min.js"></script>
  <script src="path/to/app.js"></script>
</body>
</html>

<强> app.js

angular.module('myApp', ['ngRoute'])
  .controller('PageCtrl', ['$scope', function($scope) {
    $scope.title = "The Title";
  }])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
      when("/", {
        templateUrl: "path/to/page.html",
        controller: "PageCtrl"
      }).
   }]);

<强> page.html中

<h3> {{ scope.title }} </h3>