HTML избегать копирования блоков кода

Я пытаюсь изучить веб-технологии (HTML, JS, угловые и т. Д., Что необходимо для создания страниц). Для практики я загрузил какой-то шаблон сайта и заметил, что существует много одинакового кода в разных файлах (страницах) html.HTML избегать копирования блоков кода

Например, у нас есть страницы: login, main, about. Каждая из этих страниц имеет такие же <header/> и <footer>, и разница только в <section/> между ними.

Возможно ли иметь такую структуру: Главная страница с header и footer и в меню щелчка меняет только раздел между ними? Он будет выглядеть как одностраничное приложение.

Как я использую angularjs, я знаю, что есть такой атрибут, как ng-view, но я не уверен, что он будет подходящим здесь, когда, позволяет звонить, внутренние страницы имеют этот атрибут внутри. (Я попробовал, я получил RangeError: Maximum call stack size exceeded не уверен, вероятно, появился какой-то инфинитивный цикл).

Итак, что было бы лучшим решением в конкретной ситуации, я не уверен, что моя предлагаемая структура хороша, но я не хочу иметь одинаковые блоки кода на каждой странице или он должен быть в HTML?

Я использую HTML, угловой, JS, bootsrap для темы.

нелогич-

Я скопировал две страницы, как, например, для plunker, так как вы можете увидеть много кода такой же, поэтому я хочу, чтобы показать login.html внутри index.html (линии: 172), но в login.html I также есть ng-view (линия: 177). Может быть, кто-то может с небольшим примером кода показать мне, как он создан? http://plnkr.co/edit/iJrg2FJgwr9xxKTWMouX?p=preview

источник

2015-08-28 Edgar

У вас есть код для нас, чтобы играть? – Joseph

Да, это возможно с AngularJs, и на самом деле очень легко с помощью ng-view или ui-view (от УИ-маршрутизатора).

В зависимости от вашего уровня знаний я бы предложил взглянуть на ui-router, который имеет все функции ng-router и даже больше.

источник

2015-08-28 20:07:59 Igor

Простая настройка маршрутизации для приложения с использованием ngRoute будет что-то вроде этого.

angular.module('stack-app', ['ngRoute']); 
 
// set up the views at configure time 
 
angular.module('stack-app').configure(['$routeProvider', 
 
    function($routeProvider) { 
 
    $routeProvider.when('/view1', { // http://website.com/view1 
 
     controller: 'View1Controller', // the controller for view1 
 
     templateUrl: 'view1.html' // this is a partial view 
 
    }); 
 

 
    $routeProvider.when('/view2', { // http://website.com/view2 
 
     controller: 'View2Controller', // controller for view 2 
 
     template: '<div>inline template should do just fine</div>' 
 
    }); 
 

 
    $routeProvider.otherwise('/view1'); // http://website.com/anythingelse points to /view1 
 
    } 
 
]); 
 

 
angular.module('stack-app').controller('StackMainController', function() {}); 
 

 
angular.module('stack-app').controller('View1Controller', function() {}); 
 
angular.module('stack-app').controller('View2Controller', function() {});

index.html здесь вы положили бы общие части, заголовки и т.д.

<html ng-app="stack-app"> 

<body ng-controller="StackMainController"> 
    <!-- this will be replaced by the partial views --> 
    <ng-view></ng-view> 
</body> 

</html>

Вы должны настроить любой сервер, который вы используете, чтобы служить index.html при получении запросов на /view1 или /вид2. Также не забудьте импортировать файл angular-route.js в свой проект.

Вы также можете использовать другие модули для регистрации маршрутов в своем собственном методе configure, нет необходимости иметь центральную конфигурацию.

источник

2015-08-28 20:17:40 toskv

Для этого вы можете использовать ui-router. Вы можете определить свои состояния и шаблоны с помощью ui-router. Затем для каждого состояния вы можете вводить свои виды в разделы, помеченные как ui-view в ваших шаблонах. Посмотрите пример.

var myApp = angular.module("myApp", ["ui.router"]); 
 
myApp.config(function($stateProvider) { 
 
    $stateProvider 
 
    .state('main', { 
 
     url: '/', 
 
     template: 'Main Page' 
 
    }) 
 
    .state('list1', { 
 
     url: 'list1', 
 
     template: '<div>List1 {{test}}</div>', 
 
     controller: function($scope) { 
 
     $scope.test = "List 1"; 
 
     } 
 
    }) 
 
    .state('list2', { 
 
     url: 'list2', 
 
     template: '<div>List2 {{test}}</div>', 
 
     controller: function($scope) { 
 
     $scope.test = "List 2"; 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> 
 
<html ng-app="myApp"> 
 

 
<body> 
 
    <div><a ui-sref="main">Header</a> <a ui-sref="list1">List1</a> <a ui-sref="list2">List2</a> 
 
    </div> 
 
    <div ui-view=""></div> 
 
    <div>Footer</div> 
 

 
</body> 
 

 
</html>

источник

2015-08-28 20:18:12 cubbuk

HTML избегать копирования блоков кода

ответ

Смежные вопросы