Question

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

Scripts
    Sample
        SampleModel.js 
        SampleService.js
        SampleController.js

    Sample1
        Sample1Model.js 
        Sample1Service.js
        Sample1Controller.js

和我的视图文件如下

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})
    ;
})

如何组织AngularJS中常用的视图（HTML）文件？

1 个答案: