ng-include

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




{{phone.name}}
Цена: {{phone.price}} $
Производитель: {{phone.company.name}}

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

Директива //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: 'Китай'
        }
    }];
});

То есть в итоге весь проект будет выглядеть следующим образом: {{:angular:angularjs:directive:include.png?200|}} Поскольку для загрузки представления, в частности, файла phonesList.html AngularJS использует Ajax, то мы не сможем напрямую кинуть файл веб-страицы в веб-браузер. Нам надо обращаться к нему через веб-сервер:\\ {{ :angular:angularjs:directive:17.png?400 |}} ====Динамическая загрузка представлений==== Изменим приложение. Допустим, нам динамически надо подгружать одно из представлений в зависимости от выбора пользователя. Для начала изменим контроллер **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// будет выглядеть аналогично:




{{tablet.name}}
Цена: {{tablet.price}} $
Производитель: {{tablet.company}}




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










    
        
            
            {{button.label}}
        
    
    








{{ :angular:angularjs:directive:include2.png?400 }}

Теперь привязка идет к результату метода setFile: . Для переключения между представлениями определены две радиокнопки: %%



    ng-include
    
    
    
    
    


    
        Tasks List
        
            
                
                    
                    Switch the view
                
            
        
        
        
        
    





{{ :angular:angularjs:directive:include3.png?600 |}}