HTML avoid coping blocks of code
Question
I trying to learn web technologies (HTML, JS, angular, etc. what is needed to create pages). For practice I downloaded some kind of website template and noticed that there is a lot of same code in different html files(pages).
For example we have pages: login,main,about. Each of this page has same <header/> and <footer> and difference is only in <section/> between them.
So is it possible to have such structure: Main page with header and footer and on menu click changes only section between them? It will look like single page app.
As I use angularjs I know that there is such attribute as a ng-view but I am not sure if it will be suitable here, when, lets call, inner pages have this attribute inside also. (I tried I got RangeError: Maximum call stack size exceeded not sure probably some kind of infinitive loop appeared).
So what would be best solution in particular situation, I am not sure that my suggested structure is good, but I do not want to have same blocks of code in each page or it should be in HTML?
I use HTML, angular, JS, bootsrap for theme.
Examle
I copied two pages as example to plunker , so As you can see a lot of code is same, so I want to show login.html inside index.html (line: 172), but in login.html I also have ng-view (line:177). Maybe someone can with small code sample can show me how it is made? http://plnkr.co/edit/iJrg2FJgwr9xxKTWMouX?p=preview
3 answers
solution1
0 2015-08-28 20:07:59
Yes, it's possible with AngularJs, and in fact very easy using ng-view or ui-view (from ui-router) .
Depending on your level of expertise I would suggest taking a look at ui-router which has all the ng-router functionalities and even more.
solution2
0 2015-08-28 20:17:40
A simple routing setup for an app using ngRoute would be something like this.
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 here you would put the common parts, headers etc.
<html ng-app="stack-app">
<body ng-controller="StackMainController">
<!-- this will be replaced by the partial views -->
<ng-view></ng-view>
</body>
</html>
You will have to configure whatever server you are using to serve index.html when receiving requests for /view1 or /view2 . Also don't forget to import the angular-route.js file in your project.
You can also have other modules register routes in their own configure method, there's no need to have a central config.
solution3
0 2015-08-28 20:18:12
You can use ui-router to achieve this. You can define your states and templates using ui-router. Then for each state you can inject your views into sections marked as ui-view in your templates. Check out the example.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.