CODEWITHSUNDEEP
javascripthtmlangularjs
Aravindh Venkat
Aravindh Venkat

Reputation: 115

How to organize the commonly used view (HTML) files in AngularJS?

I am creating a large scale application using AngularJS which is a Single Page App. I kept all the script files under the folder Scripts like below. 

Scripts
    Sample
        SampleModel.js 
        SampleService.js
        SampleController.js

    Sample1
        Sample1Model.js 
        Sample1Service.js
        Sample1Controller.js

and my view files as below

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

I have same content for header and footer in both the Sample and Sample1 folder. I want to make it as common for all the screens which I am going to create.

Please advise the best way, to organize the commonly used HTML files?

Upvotes: 1

Views: 335

Answers (1)

angabriel
angabriel

Reputation: 5028

I would suggest a structure like this:

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

And build up your main view like this:

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

Content of a "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>

The routing would look like this:

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

Upvotes: 1

Related Questions