Блог

У меня в моем приложении от четырех до пяти представлений вкладок. Итак, нажав на каждую вкладку, я покажу содержимое на основе выбора вкладки.

Я попробовал два подхода ng-route , один и другой ng-show/ng-hide . Я чувствую ng-show/ng-hide себя хорошо на уровне производительности, и я думаю, что я должен следовать тому же. Вот что я попробовал

Первый подход к ng-route

main.php

 var testApp = angular.module("testApp", ["ngRoute"]);
testApp.config(function ($routeProvider) {
$routeProvider.when("/tab1", {
templateUrl: "tab1.php"
});
$routeProvider.when("/tab2", {
templateUrl: "tab2.php"
});
$routeProvider.when("/tab3", {
templateUrl: "tab3.php"
});
$routeProvider.when("/tab4", {
templateUrl: "tab4.php"
});
$routeProvider.otherwise({
templateUrl: "tab1.php"
});
});

testApp.controller('testContr',function($scope){
//controller statements goes here
});


<ul class="nav nav-pills">
    <li class="active" role="presentation"><a href="#/tab1">Tab 1</a></li>
    <li role="presentation"><a href="#/tab2">Tab 2</a></li>
    <li role="presentation"><a href="#/tab3">Tab 5</a></li>
    <li role="presentation"><a href="#/tab4">Tab 4</a></li>
</ul>
  

tab1.php

  <div>
        tab1 content goes here
    </div>
  

tab2.php

 <div>
    tab2 content goes here
</div>
  

tab3.php

 <div>
    tab3 content goes here
</div>
  

tab4.php

 <div>
    tab4 content goes here
</div>
  

Второй подход ng-show / ng-hide

main.php

             var testApp = angular.module("testApp", []);

        testApp.controller('testContr',function($scope){
            $scope.view = 'tab1'// tab1 by default
            $scope.setView = function($newView){
                $scope.view = $newView;
            }
            //controller statements goes here

        });


 <ul class="nav nav-pills">
    <li class="active" role="presentation" ng-click="setView('tab1')"><a href="#">Tab 1</a></li>
    <li role="presentation" ng-click="setView('tab2')"><a href="#">Tab 2</a></li>
    <li role="presentation" ng-click="setView('tab3')"><a href="#">Tab 3</a></li>
    <li role="presentation" ng-click="setView('tab4')"><a href="#">Tab 4</a></li>
    </ul>

    <?php require_once 'tab1.php';
    require_once 'tab2.php';
    require_once 'tab3.php';
    require_once 'tab4.php'; ?>
  

Содержимое в них указано в main.php но при условии с нг-шоу

tab1.php

 <div ng-show="view == 'tab1'">
        tab1 content goes here
        </div>
  

tab2.php

 <div ng-show="view == 'tab2'">
tab2 content goes here
</div>
  

tab3.php

 <div ng-show="view == 'tab3'">
tab3 content goes here
</div>
  

tab4.php

 <div ng-show="view == 'tab4'">
tab4 content goes here
</div>
  

Я вижу преимущества частичного просмотра с ng-route помощью, который является управляемым фрагментом кода. Чего я могу добиться, включив php в файл (каждый файл с отдельным представлением и включив их все в основной файл) и ng-show .
На данный момент моему приложению не нужно заботиться о навигации по URL.
Когда я пробую два вышеупомянутых подхода, я вижу ng-show , что это быстрее, и я также могу избежать ng-route.js файла (сокращает время загрузки файла).

Я что-то не так думаю. Есть какие-либо предложения по использованию?

• В дополнение к тому, что сказал @DilumN, using ng-route также позволяет вам делать глубокие ссылки (своего рода) на ваши вкладки, т.Е. Вы можете предоставить кому-то URL-адрес, и он откроется именно на той вкладке, на которую вы хотите указать.

• Кроме того, ng-route предназначен для этой задачи, в отличие ng-hide/show от того, который предназначен для display: none содержимого.

• И последнее, но не менее важное, ng-route позволяет упростить тесты (вы пишете тесты правильно? подмигивание).

• Вы также можете отделить проблемы, используя ngRoute, и, в конце концов, это предотвратит спагетти-код. Если вы работаете с jQuery, ng-show метод может выглядеть более интуитивно понятным, но ng-route , по иронии судьбы, метод является более угловатым способом сделать это.

У этого подхода ng-show также есть некоторые недостатки. Поскольку вы используете ng-show для отображения скрытых вкладок, при первоначальной загрузке страницы все эти представления будут загружены в ваш DOM amp; ng-show использует css show / hide для соответствующего отображения содержимого. Если ваш контент становится больше и больше, HTML также будет увеличиваться.

А также, если вы хотите однажды обрабатывать отдельные вкладки controllers для каждой вкладки, лучший способ — использовать отдельные ui-views для каждой вкладки.

Для простого static содержимого вкладки ng-show все в порядке, но если у вас есть ощущение, что в будущем это будет сложнее, я предлагаю использовать отдельный routes amp; controllers .

Итак, в конце концов, решение остается за вами, думая о будущем росте проекта.