angular:angularjs:directive:ng-include []

Это старая версия документа!

Директивы шаблонов ng-include

Директива ng-include получает с веб-сервера фрагмент кода HTML, обрабатывает его и добавляет на html-страницу. Подобные фрагменты называются частичными представлениями. Создадим в одной папке рядом с главной страницей index.html новый файл phonesList.html со следующим содержимым:

<ul>
<li ng-repeat="phone in phones">
<b>{{phone.name}}</b>
<p>Цена: {{phone.price}} $</p>
<p>Производитель: {{phone.company.name}}</p>
</li>
</ul>

Теперь подключим этот файл на главную страницу:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="phoneController">
    <ng-include src="'phonesList.html'"></ng-include>
</div>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
<script src="js/controllers/phonesController.js"></script>
</body>
</html>

Директива ng-include может принимать три параметра:

src: url загружаемого файла
onload: определяет выражение, которое рендерится при загрузке файла
autoscroll: определяет, допускается ли прокрутка во время загрузки файла

В папке js/controllers/ по-прежнему будет файл phonesController.js с определением контроллера, из которого данные будут передаваться в представление:

var myApp=angular.module('myApp', []);
myApp.controller('phoneController', function($scope) {
 
  $scope.phones = [{
        name: 'Nokia Lumia 630',
        year: 2014,
        price: 200,
        company: {
            name: 'Nokia',
            country: 'Финляндия'
        }
    },{
        name: 'Samsung Galaxy S 4',
        year: 2014,
        price: 400,
        company: {
            name: 'Samsung',
            country: 'Республика Корея'
        }
    },{
        name: 'Mi 5',
        year: 2015,
        price: 300,
        company: {
            name: 'Xiaomi',
            country: 'Китай'
        }
    }];
});

То есть в итоге весь проект будет выглядеть следующим образом:

Поскольку для загрузки представления, в частности, файла phonesList.html AngularJS использует Ajax, то мы не сможем напрямую кинуть файл веб-страицы в веб-браузер. Нам надо обращаться к нему через веб-сервер:

Динамическая загрузка представлений

Изменим приложение. Допустим, нам динамически надо подгружать одно из представлений в зависимости от выбора пользователя. Для начала изменим контроллер phoneController:

var myApp=angular.module('myApp');
myApp.controller('phoneController', function($scope) {
 
  $scope.phones = [{
        name: 'Nokia Lumia 630',
        year: 2014,
        price: 200,
        company: 'Nokia'
    },{
        name: 'Samsung Galaxy S 4',
        year: 2014,
        price: 400,
        company: 'Samsung'
    },{
        name: 'Mi 5',
        year: 2015,
        price: 300,
        company: 'Xiaomi'
    }];
    $scope.tablets = [{
        name: 'Samsung Galaxy Tab S4',
        year: 2014,
        price: 300,
        company: 'Samsung'
    },{
        name: 'LG G PAD 8.3',
        year: 2013,
        price: 180,
        company: 'LG'
    },{
        name: 'IdeaTab A8',
        year: 2014,
        price: 220,
        company: 'Lenovo'
    }];
  $scope.data = {};
  $scope.setFile = function () {
    if($scope.data.mode=='Tablets')
        return 'tabletsList.html';
    else if($scope.data.mode=='Phones')
        return 'phonesList.html';
};
  $scope.modes = [{
      value: 'Tablets',
      label: 'Планшеты'
  },{
      value: 'Phones',
      label: 'Смартфоны'
  }];
});

Теперь контроллер передает в представление два разных списка - для смартфонов и планшетов. Также есть список modes, который содержит режимы выбора и пустой объект data. Кроме того, в $scope определена функция setFile, которая возвращает нужный файл в зависимости от значения $scope.data.mode
Файл phonesList.html был сделан выше. А файл tabletsList.html будет выглядеть аналогично:

<ul>
<li ng-repeat="tablet in tablets">
<b>{{tablet.name}}</b>
<p>Цена: {{tablet.price}} $</p>
<p>Производитель: {{tablet.company}}</p>
</li>
</ul>
<code>
 
Теперь изменим главную страницу:
 
<code html>
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="phoneController">
    <div ng-repeat="button in modes">
        <label>
            <input type="radio" ng-model="data.mode" value="{{button.value}}" name="modes" />
            {{button.label}}
        </label>
    </div>
    <div ng-include="setFile()"></div>
</div>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
<script src="js/controllers/phonesController.js"></script>
</body>
</html>

Теперь привязка идет к результату метода setFile: <div ng-include=«setFile()»>. Для переключения между представлениями определены две радиокнопки: <input type="radio" ng-model="data.mode" value="{{button.value}}". С помощью директивы ng-model=«data.mode» происходит привязка свойства data.mode к значению радиокнопки, которое берется из button.value.

Инструменты пользователя

Инструменты сайта

Боковая панель

Директивы шаблонов ng-include

Динамическая загрузка представлений

Инструменты страницы