Question

我尝试学习Web技术（HTML，JS，角度等等，创建页面需要什么）。为了练习，我下载了某种网站模板，发现在不同的html文件（页面）中有很多相同的代码。

例如我们有页面：login，main，about。每个页面都有相同的<header/>和<footer>，差异仅在<section/>之间。

那么有可能有这样的结构：主页包含header和footer，而菜单点击只更改它们之间的部分？它看起来像单页应用程序。

当我使用angularjs时，我知道有ng-view这样的属性但是我不确定它是否适合这里，当我们调用时，内页也有这个属性。（我试过RangeError: Maximum call stack size exceeded不确定可能会出现某种不定式循环。

那么在特定情况下最好的解决方案是什么，我不确定我建议的结构是否合适，但我不想在每个页面中都有相同的代码块，或者它应该是HTML格式的？

我使用HTML，angular，JS，bootsrap作为主题。

Examle

我将两个页面作为示例复制到plunker，因此您可以看到很多代码是相同的，所以我想在login.html（行：172）中显示index.html，但在login.html我也有ng-view（第177行）。也许有人可以用小代码样本向我展示它是如何制作的？ http://plnkr.co/edit/iJrg2FJgwr9xxKTWMouX?p=preview

Answer 1

是的，使用AngularJs是可能的，事实上使用ng-view或ui-view（来自ui-router）很容易。

根据您的专业水平，我建议您查看具有所有ng-router功能的ui-router甚至更多。

Answer 2

使用 ngRoute 的应用的简单路由设置就是这样的。

angular.module('stack-app', ['ngRoute']);
// set up the views at configure time
angular.module('stack-app').configure(['$routeProvider',
  function($routeProvider) {
    $routeProvider.when('/view1', { // http://website.com/view1
      controller: 'View1Controller', // the controller for view1
      templateUrl: 'view1.html' // this is a partial view 
    });

    $routeProvider.when('/view2', { // http://website.com/view2
      controller: 'View2Controller', // controller for view 2
      template: '<div>inline template should do just fine</div>'
    });

   $routeProvider.otherwise('/view1'); // http://website.com/anythingelse points to /view1
  }
]);

angular.module('stack-app').controller('StackMainController', function() {});

angular.module('stack-app').controller('View1Controller', function() {});
angular.module('stack-app').controller('View2Controller', function() {});

index.html 在这里你可以放置公共部分，标题等。

<html ng-app="stack-app">

<body ng-controller="StackMainController">
  <!-- this will be replaced by the partial views -->
  <ng-view></ng-view> 
</body>

</html>

在收到 / view1 或 / view2 的请求时，您必须配置用于提供 index.html 的服务器。另外，不要忘记在项目中导入 angular-route.js 文件。

您也可以在自己的配置方法中使用其他模块注册路由，不需要集中配置。

Answer 3

您可以使用ui-router来实现此目的。您可以使用ui-router定义状态和模板。然后，对于每个州，您可以将视图注入模板中标记为ui-view的部分。看看这个例子。

var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function($stateProvider) {
  $stateProvider
    .state('main', {
      url: '/',
      template: 'Main Page'
    })
    .state('list1', {
      url: 'list1',
      template: '<div>List1 {{test}}</div>',
      controller: function($scope) {
        $scope.test = "List 1";
      }
    })
    .state('list2', {
      url: 'list2',
      template: '<div>List2 {{test}}</div>',
      controller: function($scope) {
        $scope.test = "List 2";
      }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<html ng-app="myApp">

<body>
  <div><a ui-sref="main">Header</a> <a ui-sref="list1">List1</a>  <a ui-sref="list2">List2</a>
  </div>
  <div ui-view=""></div>
  <div>Footer</div>

</body>

</html>

HTML避免处理代码块

3 个答案: