Директивы шаблонов в AngularJS

Последнее обновление: 26.04.2017

Рассмотрим еще ряд директив, который позволяют управлять разметкой html.

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: 'Китай'
        }
    }];
});

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

Проект AngularJS и представления html

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

Проект AngularJS и ngInclude

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

Изменим приложение. Допустим, нам динамически надо подгружать одно из представлений в зависимости от выбора пользователя. Для начала изменим контроллер 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>

Теперь изменим главную страницу:

<!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>
Директива ng-include в AngularJS

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850