Как создать html-страницу или templateUrl из нескольких шаблонов html

Question

Я новичок в angularjs, и у меня уже есть простой webapp, работающий локально на моем компьютере. У меня есть следующий код в файле main.js приложения:

var webApp = angular.module('webApp', ['ngRoute']); 
webApp.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) 
     { 
      $routeProvider. 
      when('/', { 
        templateUrl : '/app/pages/home.phtml', 
        controller : 'mainController' 
      }). 
      when('/signin', { 
        templateUrl : '/app/pages/signin.phtml', 
        controller : 'signinController' 
      }). 
      when('/forgot', { 
        templateUrl : 'app/pages/forgot.phtml', 
        controller : 'forgotController' 
      }). 
      when('/signup', { 
        templateUrl : 'app/pages/home.phtml', 
        controller : 'signupController' 
      }); 
      $locationProvider.html5Mode(true); 
    }]); 

Мне было интересно, что это правильный подход в angularjs для этого конкретного случая: Скажем, я хочу, чтобы создать home.phtml из нескольких HTML файлов (или HTML элементы, которые хранятся в файлах), другими словами, я хочу разбить html-страницу на несколько html-файлов (шаблонов), чтобы я мог объединить/объединить каждый элемент отдельно, когда это необходимо.

• Как я могу это сделать в angularjs?
• Это хорошая практика для создания html-страницы таким образом (производительность)?
• Как кешировать элементы?
• Будет ли это динамическим или статическим? если да, то как я могу создать шаблон url динамически и использовать его? Я прочитал несколько статей, но я не могу поверить в проблему, потому что у меня нет глобальных знаний об угловых.

Answer 1

Вы можете использовать нг-включают в себя от docs

в качестве элемента:

<ng-include 
    src="string" 
    [onload="string"] 
    [autoscroll="string"]> 
    ... 
</ng-include> 

или внутри любого другого элемента:

<ANY 
    ng-include="string" 
    [onload="string"] 
    [autoscroll="string"]> 
    ... 
</ANY> 

или как класс:

<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY> 

в основном, в вашем html-файле, где вы хотите включить другой шаблон, только добавить в <ng-include src="yourtemplate.html"></ng-include>