Split Angular template into multiple small templates

Question

In my Angular app, I\'m trying to understand what would be the right way to split my page into components.

The page before the change is similar to:

<         


        

Answer 1

Using ng-include you can have different templates and simply inject them into parts of your DOM using it, it's good for times when you want to load different views based on different situations like clicking a nav button or a variable or so, please note that ng-include also compiles the template so you can use controllers and other angular features and directives in the template, here is an example from angularjs docs:

here is your main html:

  
    
    
  
  
    

      
       (blank)
      
      url of the template: {{template.url}}
      

      

    
  

and here is the js:

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
}