AngularJSディレクティブに基づいた自己登録項目を備えた適応型マルチレベルサイトメニュー

1. AngularJSは、 MVVMアプリケーションアーキテクチャデザインパターンを実装するGoogleのスーパーヒーローフレームワークです。
2. UIルーターはAngularモジュールであり、これがないと、 状態ベースのアプリケーションを設計することは考えられません。
3. 角度許可 -角度モジュール（ui-routerと連携してのみ動作します）、クライアント側でのアクセス制御と承認を簡素化します。
4. ブートストラップ3-レスポンシブページのレイアウトを高速化するCSSフレームワーク。
5. Yeoman Generatorは、プロジェクト構造を自動的に構築するためのコンソールユーティリティです。
6. Bowerは、プロジェクトの依存関係のインストールと更新を簡素化するパッケージマネージャーです。
7. GulpはストリーミングJSプロジェクトビルダーです。
8. NodeJSはサーバー側の開発環境です。

PS ：ポイント5〜8はオプションですが、最新のフロントエンド開発者の生活を大幅に簡素化します。

1. 論理否定（false、0、undefined、null、または空の文字列）に等しい値を持つparamsオブジェクトのフィールドがある場合、UI-routerの最新バージョンは失敗します。 問題の解決策が見つからなかったため、「0.2.13」の最新の作業バージョンにロールバックしました。
2. Yeomanジェネレーターは、将来のアプリケーションに非常に便利な構造を提供します。 サービスディレクトリに加えて、プロジェクト自体のsrcディレクトリがルートディレクトリに作成されます。 メインのhtmlページと3つのディレクトリが含まれています。
   
   
   
   app-アプリケーションの状態が含まれるディレクトリ（状態ごとにフォルダを割り当てることをお勧めします）。
   
   アセット -静的コンテンツを含むフォルダー。
   
   components-繰り返し使用できるアプリケーション要素のフォルダー（この場合、これらはディレクティブ、サービス、ファクトリー、プロバイダーなどです）。
   
   この構造に従って、Yeomanジェネレーターは変更を監視し、実行中のアプリケーションにファイルを添付するようにgulpを構成します（すべてが自動的に行われるため、依存関係をHTMLページに手動で接続する必要はありません）。
   
   ジェネレーターの最新バージョンでは、componentsフォルダーがappディレクトリーに移動され、それに応じてgulp設定が変更されました。 プロジェクトがコンポーネントフォルダーを表示し、navbarモジュールが存在しないことについて開発者コンソールにエラーを表示しないように、gulpフォルダー内の次のファイルを編集します。
   
   
   • inject.jsスクリプト
     
     
     
     injectScripts配列に要素を追加します
     
     

     options.src + '/components/**/*.js'
           
           
     
             
             
             
           
     
         
             
             
             
           
           
     
             
             
             
           
     
         
          

     
     
     injectStyles配列に要素を追加します
     
     

      options.src + '/components/**/*.css'
           
           
     
             
             
             
           
     
         
             
             
             
           
           
     
             
             
             
           
     
         
          

     
     
     
   • watch.jsスクリプト-次のルールを追加します。
     
     
     
     

      gulp.watch(options.src + '/components/**/*.css', function(event) { if(isOnlyChange(event)) { browserSync.reload(event.path); } else { gulp.start('inject'); } }); gulp.watch(options.src + '/components/**/*.js', function(event) { if(isOnlyChange(event)) { gulp.start('scripts'); } else { gulp.start('inject'); } }); gulp.watch(options.src + '/components/**/*.html', function(event) { browserSync.reload(event.path); });
           
           
     
             
             
             
           
     
         
             
             
             
           
           
     
             
             
             
           
     
         
          

     
     
     
   
   
   
3. ディレクティブはブートストラップで記述されているため、当然、そのコンポーネント、特にjQueryライブラリが必要です。 プロジェクトを作成するとき、Yeomanはjquery、bootstrapを接続する必要性と、それを操作する方法（angular ui-bootstrapまたはAngularStrapディレクティブ、jQueryまたはpure CSSでのbootstrapの公式使用）を尋ねます。 小さなキャッチがあります。 インストール時に、上記のオプションを選択する前でも、jQueryをプロジェクトに追加するように求められます。 必ずこのオプションを選択してください。そうしないと、重要な依存関係がなくなり、すべてが壊れます。
   
   PS ：実際、瞬間を修正することは難しくありません。 必要なのは、ディレクティブ自体のコードをシャーマナイズすることだけで、jQueryなしでも実行できますが、彼らが言うように、「動作します-触れないでください」。
   
   
   
   
4. Yeomanがプロジェクトに含めることを提案しているGoogleの角材でプロジェクトを楽しみたい場合は、この場合、古いバージョンのライブラリが接続されることを知っておく必要があります。公式サイトのドキュメントは適切ではありません。 したがって、正しいオプションは、bowerに--saveオプションを使用してライブラリを接続することです。

 <div class="container" ng-mouseleave="closeMenu($event)"> <div class="navbar-header"> <button type="button" class="navbar-toggle" ng-click="collapseMenu($event)"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="link-kukuri" href="#" ui-sref="{{::sref}}" data-letters="{{::name}}">{{::name}}</a> </div> <div id="navbar" class="collapse navbar-collapse" aria-expanded="false" ng-class="navCollapsed"> <ul class="nav navbar-nav navbar-right"> <li ng-repeat="items in navbar" class="{{::menuClass(items.name, 'firstLevel')}} list-status"> <a href="#" ng-if="!items.name.pop" ui-sref="{{items.state}}" ng-mouseenter="closeOnMoveMenu()">{{items.name}}</a> <a href="#" ng-if="items.name.pop" class="dropdown-toggle dropdown-toggle-firstLevel" dropdown-toggle aria-expanded="false" ng-click="expandMenu($event)" ng-mouseenter="expandMenu($event)" ng-mouseleave="closeSubMenu($event)"> {{::items.name[0]}}<b class="caret"></b> </a> <ul ng-if="items.name.pop" class="dropdown-menu" ng-include="'submenu.template'"></ul> </li> </ul> </div> </div> <script type="text/ng-template" id="submenu.template"> <li ng-repeat="items in items.name" ng-if="$index !== 0" class="{{::menuClass(items.name)}} sub-menu"> <a href="#" class="sub-link" ng-if="!items.name.pop" ui-sref="{{::items.state}}" ng-mouseenter="closeOnMoveSubMenu($event)"> {{::items.name}}</a> <a href="#" ng-if="items.name.pop" class="dropdown-toggle" data-toggle="dropdown" ng-click="expandSubMenu($event)" ng-mouseenter="expandSubMenu($event)"> {{::items.name[0]}} </a> <ul ng-if="items.name.pop" class="dropdown-menu" ng-include="'submenu.template'"> </ul> </li> </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1. メニュー項目のリストは、 ng-repeatディレクティブを使用して生成されます。ng-repeatディレクティブは、準備されたhtmlテンプレートを複製し、現在のディレクティブスコープで定義されたメニュー項目の配列からデータを置き換えます。 このテンプレートでは、変数の近くに2つのポイントがある構文（たとえば{{:: name}} ）が、1回限りの割り当てと呼ばれることに注意してください。 実際には、角度ごとに個別のリスナー（ウォッチャー）が作成され、各ダイジェストでその変更が確認されます（値が変更される限り、現在のスコープ内のすべての変数の変更を確認し、最後にDOMは新しい値で描画されます） 。 メニューの項目は定数値であるため、リスナーの数を減らして生産性を高めながら、一度だけ描画するのが理にかなっています。
   
   
   
   
2. ネストされたサブアイテムは、 ng-includeを使用して再帰的に収集されます 。 テンプレートの再帰部分は、属性type = "text / ng-template"で scriptタグに保存されます 。 ブラウザはこのタイプのスクリプトを認識せず、DOMのこの部分を処理しませんが、ng-includeディレクティブはスクリプトのコンテンツのみを適切な場所に挿入します。これにより、ブラウザは通常DOM要素を処理できます。
   
   ネスト自体はng-ifディレクティブによって制御されます。ng-ifディレクティブは、現在の要素がアイテムの配列であるか、アイテムの名前を持つ文字列であるかをチェックします。 チェックは、いわゆる「 アヒルタイピング 」を使用して実行されます 。配列がある場合、配列メソッド（プッシュ、ポップなど）があり、それにアクセスすることで（）が論理trueに等しい関数を返します。 文字列がある場合、配列メソッドへのそのようなアピールは未定義を返します。
   
   
   
   
3. 角度ディレクティブを操作するための暗黙のルールがあり、「ディレクティブはDOMツリーの要素をその要素の外側で変更してはならない」と述べています。 ポップアップメニュー項目を機能させるには、カーソルで要素をクリック、ポイント、および離れるイベントを追跡するリスナーが必要です。 DOMツリー要素のセレクターによる通常の要素検索を使用し、リスナーをそれらにハングさせることができます。 しかし、大規模なプロジェクトでは、他の誰かが同じセレクター名を使用する可能性があります。 そのようなイベントの結果は予測不能です:)そのような場合、ディレクティブng-click、ng-mouseenterおよびng-mouseleaveが提供され、対応する要素に掛けられました。

@import url（http://fonts.googleapis.com/css?family=Gloria+Hallelujah）;

.navbar-brand {

フォントファミリ：「グロリアハレルヤ」、ベルダナ、タホマ。

フォントサイズ：23px;

}

.sub-menu {

背景色：＃333;

}

.sub-menu> a {

色：＃9d9d9d！重要;

padding-left：10px！重要;

}

.dropdown-menu {

パディング：0px;

マージン左：-1px;

マージン右：-1px;

min-width：90px！重要;

}

.dropdown-submenu {

位置：相対;

}

.dropdown-submenu> .dropdown-menu {

top：0;

右：100％;

マージン上部：6px;

マージン左：-1px;

-webkit-border-radius：0 6px 6px 6px;

-moz-border-radius：0 6px 6px 6px;

ボーダー半径：0 6px 6px 6px;

}

.dropdown-submenu：hover> a：{の後

border-left-color：#ffffff;

}

.dropdown-submenu.pull-left {

float：なし;

}

.dropdown-submenu.pull-left> .dropdown-menu {

左：-100％;

マージン左：10px;

-webkit-border-radius：6px 0 6px 6px;

-moz-border-radius：6px 0 6px 6px;

ボーダー半径：6px 0 6px 6px;

}

.dropdown-submenu> a：before {

ディスプレイ：ブロック;

内容： "";

float：左;

幅：0;

高さ：0;

ボーダースタイル：ソリッド;

border-color：transparent #cccccc transparent transparent;

マージン上部：7px;

マージン左：-5px;

マージン右：10px;

}

.dropdown-submenu-big> a：{

ボーダー幅：4.5px 7.8px 4.5px 0;

}

.dropdown-submenu-small> a：before {

マージン右：7px;

ボーダー左：5pxの透明なソリッド;

ボーダー右：5pxの透明な透明;

border-top：5px solid #cccccc;

}

.dropdown-menu：ホバー、

.dropdown-toggle：フォーカス、

li> [aria-expanded = "true"]、

.navbar-brand：ホバー、

.sub-menu> a：ホバー、

.list-status：ホバー、

.nav .open> a {

色：#fff！重要;

背景色：＃004444！重要;

}

.menu-active、

.menu-active> a {

フォントの太さ：太字！重要;

テキスト装飾：下線。

}

.navbar-cheat {

幅：100％;

高さ：45px;

}

.sub-link：before {

ディスプレイ：ブロック;

内容： "";

float：左;

幅：12px;

高さ：5px;

}

/ *くくり* /

.link-kukuri {

フォントファミリー：「グロリア・ハレルヤ」。

アウトライン：なし;

テキスト装飾：なし！重要;

位置：相対;

フォントサイズ：23px;

行の高さ：2;

色：＃c5c2b8;

表示：インラインブロック。

}

.link-kukuri：ホバー{

色：＃c5c2b8;

}

.link-kukuri：ホバー::後{

-webkit-transform：translate3d（100％、0,0）;

transform：translate3d（100％、0,0）;

}

.link-kukuri :: before {

内容：attr（データ文字）;

位置：絶対;

z-index：2;

オーバーフロー：非表示。

色：＃424242;

空白：nowrap;

幅：0％;

-webkit-transition：幅0.4s 0.0s;

遷移：幅0.4s 0.0s;

}

.link-kukuri：ホバー::の前{

幅：100％;

}

.link-kukuri：フォーカス{

色：＃9e9ba4;

}

 'use strict'; (function () { angular.module('navbar') .directive('navbar', function ($document, $state, navbarList, navPermission) { return { restrict: 'A', scope: { name: '@', sref: '@' }, templateUrl: '/components/navbar.directive/navbar.template.html', link: function (scope, elem) { var openedMenu = null, openedSubMenu = null, username = navPermission.getUser($state.params); //   DOM        bootstrap elem.addClass('navbar navbar-inverse navbar-fixed-top'); elem.attr('role', 'navigation'); //             scope  if(username) { navPermission.acceptPermission(navbarList.list, username); } scope.navbar = navbarList.list; // /         scope.collapseMenu = function ($event) { var navbar = elem.find('#navbar'), expanded = navbar.hasClass('in'); navbar.attr('aria-expanded', !expanded); scope.navCollapsed = (expanded) ? '' : 'in'; closeAllMenu(); stopBubleAndPropagation($event); }; //          ,     scope.menuClass = function (item, level) { var status = false, activePage = getActivePage($state.current.name), currentPage = (item.pop) ? item[0] : item, classList = (level === 'firstLevel') ? 'dropdown dropdown-firstLevel ' : 'menu-item dropdown dropdown-submenu ', activeClass = (currentPage === activePage || isActive(item, activePage, status) ) ? 'menu-active' : ''; if(item.pop) { return classList + activeClass; } else { return activeClass; } }; //           () function getActivePage(state, currentList) { var name; if(!currentList) { currentList = scope.navbar; } for(var i = (currentList[0].name) ? 0 : 1; i < currentList.length; i++) { if(currentList[i].state === state) { return currentList[i].name; } else if(currentList[i].name.pop) { name = getActivePage(state, currentList[i].name); } } return name; } // ,      function isActive (item, activePage, status) { if(item.pop) { for(var i = 1; i < item.length; i++) { if(item[i].name.pop) { status = isActive(item[i].name, activePage, status); } else if(item[i].name === activePage) { return true; } } } else if(item === activePage) { return true; } return status; } //          ( , ..     ) scope.expandMenu = function ($event) { var clickedElem = $($event.currentTarget), parentClicked = $($event.currentTarget.parentElement), expanded = clickedElem.attr('aria-expanded'), isOpened = parentClicked.hasClass('open'), attrExpanded = (expanded === 'false'), allOpenedMenu = parentClicked.parent().find('.open'), smallWindow = window.innerWidth < 768, eventMouseEnter = $event.type === 'mouseenter', subMenuAll = elem.find('.dropdown-submenu'); if(!smallWindow || !eventMouseEnter) { allOpenedMenu.removeClass('open'); clickedElem.attr('aria-expanded', attrExpanded); if(isOpened && !eventMouseEnter) { parentClicked.removeClass('open'); } else { parentClicked.addClass('open'); openedMenu = clickedElem; //** } } subMenuAll.removeClass('dropdown-submenu-small dropdown-submenu-big'); if(smallWindow) { subMenuAll.addClass('dropdown-submenu-small'); } else { subMenuAll.addClass('dropdown-submenu-big'); } stopBubleAndPropagation($event); }; //           scope.closeOnMoveMenu = function () { var smallWindow = window.innerWidth < 768; if(openedMenu && !smallWindow) { var clickedLink = openedMenu, clickedElement = clickedLink.parent(); clickedElement.removeClass('open'); clickedLink.attr('aria-expanded', false); openedMenu = null; } }; //     (   92 ) scope.expandSubMenu = function ($event) { var elemClicked = $($event.currentTarget.parentElement), smallWindow = window.innerWidth < 768, eMouseEnter = $event.type === 'mouseenter', sameElement = elemClicked.hasClass('open'); if(!smallWindow || !eMouseEnter) { //     if(!sameElement && !eMouseEnter || !eMouseEnter || !sameElement) { elemClicked.parent().find('.open').removeClass('open'); } if(!sameElement) { elemClicked.addClass('open'); openedSubMenu = elemClicked; } } stopBubleAndPropagation($event); }; //          (  :)) scope.closeOnMoveSubMenu = function ($event) { var smallWindow = window.innerWidth < 768; if(openedSubMenu && !smallWindow) { var clickedElement = openedSubMenu, savedList = clickedElement.parent(), currentList = $($event.target).parent().parent(); if(savedList[0] === currentList[0]) { clickedElement.removeClass('open'); openedSubMenu = null; } } }; scope.closeMenu = closeMenu; //         var $body = $document.find('html'); elem.bind('$destroy', function() { $body.unbind(); //      }); //     -     $body.bind('click', closeMenu); function closeMenu ($event) { var elemClicked = $event.relatedTarget || $event.target; if(isClickOutNavbar(elemClicked)) { closeAllMenu(); } } //     ,  ,       function isClickOutNavbar(elem) { if($(elem).hasClass('dropdown-firstLevel')) { return false; } if(elem.parentElement !== null) { return isClickOutNavbar(elem.parentElement); } else { return true; } } //        function closeAllMenu() { elem.find('.open').removeClass('open'); elem.find('[aria-expanded=true]').attr('aria-expanded', false); } //          function stopBubleAndPropagation($event) { $event.stopPropagation(); $event.preventDefault(); } } }; }); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 'use strict'; (function () { angular.module('navbar') .provider('navbarList', function () { var list = []; //       this.add = function (obj) { //        if(obj.location) { if(obj.location.place.length !== obj.location.priority.length || !obj.location.place.pop || !obj.location.priority.pop) { console.log('Warning! Bad location params for menu "' + obj.name + '". Skip item'); return; } } //          if(!obj.location) { var name = obj.name; for(var i = 0; i < list.length; i++) { //        var currentName = (list[i].name.pop) ? list[i].name[0] : list[i].name; if(currentName === name) { console.log('Warning! Duplicate menu "' + name + '". Skip item'); return; } } list.push(obj); list.sort(sortByPriority); return; } //  ,        var place = obj.location.place.shift(), priority = obj.location.priority.shift(); for(i = 0; i < list.length; i++) { //   ,  i    JS var currentSubName = (list[i].name.pop) ? list[i].name[0] : null; if(place === currentSubName) { list[i].name = changeExistPart(obj, list[i].name); if(priority !== list[i].priority) { console.log('Warning! Priority of menu "' + list[i].name + '" has been changed from "' + list[i].priority + '" to "' + priority + '"'); list[i].priority = priority; list.sort(sortByPriority); } return; } currentName = list[i].name; if(place === currentName) { console.log('Warning! Duplicate submenu "' + place + '". Skip item'); return; } } //      ,       list.push( { name: [place, makeOriginalPart(obj)], priority: priority } ); list.sort(sortByPriority); }; //           function changeExistPart(obj, list) { var place = obj.location.place.shift(), priority = obj.location.priority.shift(), //      searchName = (place) ? place : obj.name; for(var i = 1; i < list.length; i++) { var currentName = (list[i].name.pop) ? list[i].name[0] : list[i].name; if(searchName === currentName) { if(!list[i].name.pop || (!place && list[i].name.pop) ) { console.log('Warning! Duplicate menu "' + searchName + '". Skip item'); return list; } else { list[i].name = changeExistPart(obj, list[i].name); if(priority !== list[i].priority) { console.log('Warning! Priority of menu "' + list[i].name + '" has been changed from "' + list[i].priority + '" to "' + priority + '"'); list[i].priority = priority; list.sort(sortByPriority); } return list; } } } if(!place) { delete obj.location; list.push(obj); } else { list.push({ name: [place, makeOriginalPart(obj)], priority: priority }); } list.sort(sortByPriority); return list; } //   ,       function makeOriginalPart (obj) { var place = obj.location.place.shift(), priority = obj.location.priority.shift(); if(place) { var menu = { priority: priority, name: [place, makeOriginalPart(obj)] }; } else { delete obj.location; menu = obj; } return menu; } //       function sortByPriority(a, b) { return a.priority - b.priority; } //      angularJS this.$get = function () { return { list: list, add: this.add }; }; }); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 'use strict'; (function () { angular.module('navbar') .factory('navPermission', function (Permission, $q) { //          function getUser(params) { var users = Permission.roleValidations, names = Object.keys(users), promisesArr = []; for(var i = 0; i < names.length; i++) { var current = names[i], validUser = $q.when( users[current](params) ); promisesArr.push(validUser); } return $q.all(promisesArr).then(function (users) { for(var i = 0; i < users.length; i++) { if(users[i]) { return names[i]; } } return null; }); } //   ,      ,   -    function acceptPermission (list, username) { if(!username.then) { return changeList(list, username); } else { return username.then(function (username) { return changeList(list, username); }); } } //        ,      function changeList(list, username) { for(var i = (list[0].name) ? 0 : 1; i < list.length; i++) { if(list[i].permissions) { if(list[i].permissions.except) { var except = list[i].permissions.except; for(var j = 0; j < except.length; j++) { if(except[j] === username) { list.splice(i--, 1); } } } else if(list[i].permissions.only) { var only = list[i].permissions.only, accessDenided = true; for(j = 0; j < only.length; j++) { if(only[j] === username) { accessDenided = false; } } if(accessDenided) { list.splice(i--, 1); } } } else if(list[i].name.pop) { list[i].name = changeList( list[i].name, username); if(list[i].name.length === 1 ) { list.splice(i--, 1); } } } return list; } //     return { getUser: getUser, acceptPermission: acceptPermission }; }); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 'use strict'; (function() { angular.module('navbar') .config(function ($stateProvider, navbarListProvider) { //    state     $stateProvider.decorator('state', function (obj) { var menu = obj.menu, permissions = (obj.data) ? obj.data.permissions : null; //           -    if(!menu) { return; } menu.state = obj.name; //        if(permissions) { menu.permissions = {}; if(permissions.except) { menu.permissions.except = permissions.except; } else if(permissions.only) { menu.permissions.only = permissions.only; } else { delete menu.permissions; } } //       menu navbarListProvider.add(menu); }); }); })();