Лента (Ribbon Bar) на AngularJS

Задача: создать интерфейс типа "Лента".
Скачать пример проекта

В приложенном веб-приложении Visual Studio 2013 создано два проекта:
1) Проект клиента AngularJS
2)  WEB API проект, хостящийся на локальном IIS (Express) и использующий встроенную базу данных (в директории App_Data).


Также имеется пара представлений (Views): grid.html, что загружает шаблон в контент дивайдера страницы index.html.

Убедитесь, что в свойствах запуска проекта указаны следующие параметры: WEB API должен стартовать раньше, чем веб-клиент. Страница index.html будет стартовой.

Исходный код AngularJS Ribbon использует jQuery (файл jquery.officebar.js), вся остальная логика в HTML\CSS и AngularJS.

Итак, давайте сделаем следующий элемент ленты (Home):

<ul>
    <li class="current">
        <a href="#" rel="home">Home</a>
          <ul>
             <li>
             </li>
          </ul>
     </li>
</ul>

Добавим также вкладку для работы с буфером обмена:

<ul>
    <li class="current">
       <a href="#" rel="home">Home</a>
           <ul>
               <li>
                  <span>Clipboard</span>
                </li>
          </ul>
     </li>
</ul>

Еще вкладку Show с разделителем:

<ul>
            <li class="current">
                <a href="#" rel="home">Home</a>
                <ul>
                    <li>
                        <span>Clipboard</span>
                        <div class="button split">
                            <a href="#" rel="paste">                                
                                <img src="Content/ribbon/images/paste32.png" 
                                alt="" /><span>Show</span>
                            </a>
                            <div>
                                <ul>
                                    <li class="menutitle">Paste Options</li>
                                    <li><a href="#">
                                    <img src="Content/ribbon/images/paste16.gif" 
                                    alt="" />Paste</a></li>
                                    <li><a href="#">Paste special...</a></li>
                                    <li class="separator"><a href="#">
                                    <img src="Content/ribbon/images/link16.gif" 
                                    alt="" />Paste link</a></li>
                                    <li class="menutitle">Clipboard options</li>
                                    <li><a href="#">Clear clipboard</a></li>
                                    <li><a href="#">
                                    <img src="Content/ribbon/images/pasteall16.gif" 
                                    alt="" />View clipboard content</a></li>
                                    <li><a href="#">Another</a></li>
                                </ul>
                            </div>
                        </div>

                  </li>
          </ul>
     </li>
</ul>

Теперь добавим атрибуты AngularJS:

Директивы (ng-click, ng-hide, ng-init)

Контроллер

Сопоставления

Т.к. AngularJS построен на MVC, поэтому мы можем менять компоненты без затрагивания других элементов интерфейса.

Мы может указать сопоставления с контроллером, используя объектную модель $scope:

$scope.isHidden = false;
$scope.PasteTitle = 'Сервис';        
$scope.TextToHide = "Щелкните для скрытия";
$scope.isButtonHidden = true;

Отработка события клика на кнопке, вызов сервиса WEB API и сопоставление возвращаемых результатов в сетку шаблона:

/*================================================================================
        Author      : Bert O'Neill
        Method      : buttonClick
        Parameters  : N\A
        Date        : 01-Sep-2015
        History     : Initial Draft (01-Sep-2015)
        Description : Public method that will get activated when 
                      ng-click event triggered on button object within UI.
                      Call service to pull back all customer related data from database.
                      Bind results to parent scope, which in turn is bound to UI control
        Test Prj.   : N\A
        ================================================================================*/
        $scope.buttonClick = function (value) {
            $log.debug('Enter buttonClick');
            blockUI.start(); // block UI
            
            alert('Capture button click event of \'' + value + '\'');
            
            // change button caption
            $scope.isHidden = !$scope.isHidden;
            if ($scope.isHidden) $scope.PasteTitle = 'Show';
            else $scope.PasteTitle = 'Service';
            
            // call service
            ribbonService.getBurnfootBridgendBaghdadData() // pass back the promise and 
            // handle in controller (service is only a pass through\shared logic between ctrls)
                .then(function (results) {
                    $scope.$parent.people = results.data // update the parent scope 
                       // as you have nested controllers in view
                },
                function (results) {
                    alert("Failed customer data request"); // log error
                });

            // redirect to display grid (partial) view
            $location.path('/grid');

            blockUI.stop(); // unblock UI
            $log.debug('Exit buttonClick');
        }

Обработка события клика на вкладке:

/*================================================================================
         Author      : Bert O'Neill
         Method      : tabClick
         Parameters  : N\A
         Date        : 01-Sep-2015
         History     : Initial Draft (01-Sep-2015)
         Description : Public method that will get activated when 
                       ng-click event triggered on tab object within UI.
                       Call service to pull back all customer related data from database.
                       Bind results to parent scope, which in turn is bound to UI control
         Test Prj.   : N\A
         ================================================================================*/
        $scope.tabClick = function (value) {
            $log.debug('Enter tabClick');
            blockUI.start(); // block UI

            alert('Capture tab click event of \'' + value + '\'');
          
            blockUI.stop(); // unblock UI
            $log.debug('Exit tabClick');
        }

Оригинал на англ.: http://www.codeproject.com/Articles/1024688/AngularJS-RibbonBar