javascript - Structuring templates in an AngularJS SPA - are there performance issues when using ng-include a lot? -
i wondering best way structure templates in angularjs spa. far have kind of rails approach, i'm not sure if idea.
what mean example have /js/app/views/partials folder have snippets of html used in different places. form or preview of content, used on app. structure because let's have comment form appears in 5 different places , want add field: changing 1 file rather 5 better.
i example have /js/app/views/home.html template, referenced ui-router , loaded in ui-view in /index.html serves layout.
/js/app/routes.js
mymodule.config([ '$stateprovider', '$urlrouterprovider', '$locationprovider', function($stateprovider, $urlrouterprovider, $locationprovider) { $stateprovider .state('home', { url: '/', templateurl: '/js/app/views/home.html', controller: 'mainctrl', resolve: { // resolve code } }); } ]); /index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> <title><%= title %></title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link rel='stylesheet' href='/css/style.css' /> <script src="/js/angularjs-1.3.16.min.js"></script> <script src="/js/angular-ui-router-0.2.15.js"></script> <script src="/js/app/app.js"></script> <script src="/js/app/routes/routes.js"></script> <script src="/js/app/services/services.js"></script> <script src="/js/app/controllers/controllers.js"></script> </head> <body ng-app="myapp" ng-controller="mainctrl"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view></ui-view> </div> </div> </body> </html> /js/app/views/home.html
<div class="page-header"> <h1>v2</h1> </div> <div ng-include src="'/js/app/views/partials/post-form.html'"></div> <div ng-repeat="post in posts"> <div ng-include src="'/js/app/views/partials/post-preview.html'"></div> </div> so ui-router called home state , injects /js/app/views/home.html in /index.html (at ui-view). home.html includes 2 partials /js/app/views/partials/post-form.html , /js/app/views/partials/post-preview.html.
the result lot of xhr requests single page load. cannot performance.
is there better way that? or can not structure views many partials , have use fewer files , repetitive code?
my backend / server nodejs express. maybe option server-side, using express partials.
Comments
Post a Comment