javascript - 如何组织AngularJS中常用的 View (HTML)文件？

Question

我正在使用 AngularJS 创建一个大型应用程序，它是一个单页应用程序。我将所有脚本文件保存在 Scripts 文件夹下，如下所示。

Scripts
    Sample
        SampleModel.js 
        SampleService.js
        SampleController.js

    Sample1
        Sample1Model.js 
        Sample1Service.js
        Sample1Controller.js

我的 View 文件如下

Views
    Sample
        sample.html
        sampleheader.html
        samplefooter.html
    Sample1
        sample1.html
        sampleheader.html
        samplefooter.html

我在 Sample 和 Sample1 文件夹中的页眉和页脚内容相同。我想让它对于我要创建的所有屏幕来说都是通用的。

请告知组织常用 HTML 文件的最佳方式？

Answer 1

我建议这样的结构:

Views
  Samples
    sample.html
    sample1.html
    Common
      sampleheader.html
      samplefooter.html

并像这样构建你的主视图:

<div ng-view>
  <!-- your app routing routes to sample.html, sample1.html, ... -->
</div>

“sample.html”的内容:

<div ng-include="'Views/Samples/Common/sampleheader.html'"></div>
<!-- your special sample code here -->
<div ng-include="'Views/Samples/Common/samplefooter.html'"></div>

路由看起来像这样:

angular.module('myApp', ['ngRoute']).config(function($routeProvider){
  $routeProvider
    .when('/sample', 
       {templateUrl: 'Views/Sample/sample.html', controller: SampleController})
     .when('/sample1', 
       {templateUrl: 'Views/Sample/sample1.html', controller: SampleController})
    ;
})