angular:angularjs:directive:ng-include []

Содержание

Директивы шаблонов ng-include
- Динамическая загрузка представлений
- 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 как атрибут

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>ng-include</title>
    <!--шаблоные директивы используются для того чтобы генерировать html по шаблону, облегчить работу с коллекциями даных и для добавления базовой логики на страницу-->
    <script src="../../angular.min%20.js"></script>
    <link href="../../bootstrap-theme.css" rel="stylesheet" />
    <link href="../../bootstrap.css" rel="stylesheet" />
    <script>
        //директива ng-include превосходно подходит для управления partial view
        //но более часто вам приходится переключатся между небольшими кусками контента который уже содержится в документе и для этого в AngularJS есть директива ng-switch
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.tasks = [
                { action: "Buy flowers", complete: false },
                { action: "Go to gym", complete: true },
                { action: "Buy snickers", complete: true },
                { action: "Buy notebook", complete: false },
                { action: "Call friends", complete: true },
                { action: "Go to cinema", complete: false },
                { action: "Buy Big-Mac", complete: true },
                { action: "Buy a book", complete: false },
                { action: "Call mom", complete: true }
            ];
            $scope.showFile = function () {
                return $scope.list ? "../list.html" : "../table.html";
            };
            $scope.displayMessage = function () {
                console.log("Content: " + $scope.showFile());
            };
        });
    </script>
</head>
<body>
    <div id="tasksPanel" class="panel" ng-controller="studyCtrl">
        <h3 class="panel-header">Tasks List</h3>
        <div class="well">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="list" />
                    Switch the view
                </label>
            </div>
        </div>
        <div ng-include="showFile()" onload="displayMessage()"></div>
        <!--displayMessage() фунция, которая будет вызваться в момент загрузки дива-->
        <!--аттрибут ng-include может быть применен к любому html элементу-->
    </div>
</body>
</html>

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

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

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

Содержание

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

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

ng-include как атрибут

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