Skip to content
This repository was archived by the owner on Aug 30, 2021. It is now read-only.

embed views and load them using templateCache #899

Closed
wants to merge 9 commits into from
Closed

embed views and load them using templateCache #899

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f118017
change views file pattern to a more flexible one
andreafdaf Sep 8, 2015
6e0a474
setting globbed html files
andreafdaf Sep 8, 2015
52b02d3
adding globbed html files to express app.locals
andreafdaf Sep 8, 2015
fc55336
preparing views to be embedded
andreafdaf Sep 8, 2015
edf05fb
embedding views in layout.server.view
andreafdaf Sep 8, 2015
096ed37
loading views from embedded templates
andreafdaf Sep 8, 2015
6f5b845
tests pass
andreafdaf Sep 9, 2015
147e672
will this make coverage go up? anyway doesn't hurt
andreafdaf Sep 9, 2015
41efa9d
following some indications from codydaig and mleanos
andreafdaf Sep 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion config/assets/default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ module.exports = {
'modules/*/client/*.js',
'modules/*/client/**/*.js'
],
views: ['modules/*/client/views/**/*.html'],
views: ['modules/*/client/**/*client.view.html'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this changed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is to make it a little more flexible, for example... if I have something like "...moduleName/client/directives" and I put templates and js files under the "directives" folder with the old rule they would not be found

of course one can put js from directives under js and html under views, but it makes or doesn't make sense based on just a programmer point of view... so that's why it was changed

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what the best practice in the cases of where to put the html templates for directives.. but I usually put them in my views folder. Perhaps, someone else has some insight into that. But generally, I'd be weary of making changes to a core feature like the assets locations.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you're right... maybe 'modules//client/**/.html' like is done for 'modules//client/**/.js' would be the most flexible one (and wouldn't break compatibility with code coming from an earlier version)

just to explain my point a little bit more:

  • if a file is under a "client" folder and under a "views" folder why do we have to call it "viewName.client.view.html" while it could be simply "/client//views/viewName.html"
  • if I create a folder "templates" to put html templates, should I call them "fileName.client.template.html"?

cannot I simply call all my views "viewName.client.view.html" and put them in the folder I want, since with templateCache IDs I know that no matter what this view is going to be "viewName"?

templates: ['build/templates.js']
},
server: {
Expand Down
3 changes: 3 additions & 0 deletions config/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ var initGlobalConfigFiles = function (config, assets) {
// Setting Globbed css files
config.files.client.css = getGlobbedPaths(assets.client.lib.css, 'public/').concat(getGlobbedPaths(assets.client.css, ['public/']));

// Setting Globbed html files
config.files.client.html = getGlobbedPaths(assets.client.views, 'public/');

// Setting Globbed test files
config.files.client.tests = getGlobbedPaths(assets.client.tests);
};
Expand Down
1 change: 1 addition & 0 deletions config/lib/express.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ module.exports.initLocalVariables = function (app) {
app.locals.facebookAppId = config.facebook.clientID;
app.locals.jsFiles = config.files.client.js;
app.locals.cssFiles = config.files.client.css;
app.locals.htmlFiles = config.files.client.html;
app.locals.livereload = config.livereload;
app.locals.logo = config.logo;
app.locals.favicon = config.favicon;
Expand Down
8 changes: 4 additions & 4 deletions modules/articles/client/config/articles.client.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@ angular.module('articles').config(['$stateProvider',
})
.state('articles.list', {
url: '',
templateUrl: 'modules/articles/client/views/list-articles.client.view.html'
templateUrl: 'list-articles'
})
.state('articles.create', {
url: '/create',
templateUrl: 'modules/articles/client/views/create-article.client.view.html',
templateUrl: 'create-article',
data: {
roles: ['user', 'admin']
}
})
.state('articles.view', {
url: '/:articleId',
templateUrl: 'modules/articles/client/views/view-article.client.view.html'
templateUrl: 'view-article'
})
.state('articles.edit', {
url: '/:articleId/edit',
templateUrl: 'modules/articles/client/views/edit-article.client.view.html',
templateUrl: 'edit-article',
data: {
roles: ['user', 'admin']
}
Expand Down
2 changes: 1 addition & 1 deletion modules/chat/client/config/chat.client.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ angular.module('chat').config(['$stateProvider',
$stateProvider
.state('chat', {
url: '/chat',
templateUrl: 'modules/chat/client/views/chat.client.view.html',
templateUrl: 'chat',
data: {
roles: ['user', 'admin']
}
Expand Down
8 changes: 4 additions & 4 deletions modules/core/client/config/core.client.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,25 @@ angular.module('core').config(['$stateProvider', '$urlRouterProvider',
$stateProvider
.state('home', {
url: '/',
templateUrl: 'modules/core/client/views/home.client.view.html'
templateUrl: 'home'
})
.state('not-found', {
url: '/not-found',
templateUrl: 'modules/core/client/views/404.client.view.html',
templateUrl: '404',
data: {
ignoreState: true
}
})
.state('bad-request', {
url: '/bad-request',
templateUrl: 'modules/core/client/views/400.client.view.html',
templateUrl: '400',
data: {
ignoreState: true
}
})
.state('forbidden', {
url: '/forbidden',
templateUrl: 'modules/core/client/views/403.client.view.html',
templateUrl: '403',
data: {
ignoreState: true
}
Expand Down
27 changes: 25 additions & 2 deletions modules/core/server/controllers/core.server.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,34 @@
'use strict';

var fs = require('fs'),
path = require('path'),
async = require('async');

function readViewFromDisk (viewPath, callback) {
var splittedPath = viewPath.split('/');
var viewName = splittedPath[splittedPath.length-1].split('.')[0];
fs.readFile(path.resolve(viewPath), 'utf8', function (err, file) {
if(err) {
callback(err);
} else {
callback(null, {
name: viewName,
file: file
});
}
});
}
/**
* Render the main application page
*/
exports.renderIndex = function (req, res) {
res.render('modules/core/server/views/index', {
user: req.user || null
async.concat(res.app.locals.htmlFiles, readViewFromDisk, function (err, embeddableViews) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need to concat the files if they are being loaded in individually?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you've got your point 👍

if(err)
return res.status(500).send(err);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please put brackets around this line otherwise it looks out of place

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry, my bad, I've tried to follow your syntax, missed this one :)

res.locals.htmlFiles = embeddableViews;
res.render('modules/core/server/views/index', {
user: req.user || null
});
});
};

Expand Down
5 changes: 5 additions & 0 deletions modules/core/server/views/layout.server.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@
</section>
</section>

<!--Embedding views, load in ui-router using their ID instead of the file path. ID = (fileName removing .client.view.html)-->
{% for html in htmlFiles %}
<script type="text/ng-template" id="{{html.name}}">{{html.file | safe}}</script>
{% endfor %}

<!--Embedding The User Object-->
<script type="text/javascript">
var user = {{ user | json | safe }};
Expand Down
6 changes: 3 additions & 3 deletions modules/users/client/config/users-admin.client.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ angular.module('users.admin.routes').config(['$stateProvider',
$stateProvider
.state('admin.users', {
url: '/users',
templateUrl: 'modules/users/client/views/admin/list-users.client.view.html',
templateUrl: 'list-users',
controller: 'UserListController'
})
.state('admin.user', {
url: '/users/:userId',
templateUrl: 'modules/users/client/views/admin/view-user.client.view.html',
templateUrl: 'view-user',
controller: 'UserController',
resolve: {
userResolve: ['$stateParams', 'Admin', function ($stateParams, Admin) {
Expand All @@ -23,7 +23,7 @@ angular.module('users.admin.routes').config(['$stateProvider',
})
.state('admin.user-edit', {
url: '/users/:userId/edit',
templateUrl: 'modules/users/client/views/admin/edit-user.client.view.html',
templateUrl: 'edit-user',
controller: 'UserController',
resolve: {
userResolve: ['$stateParams', 'Admin', function ($stateParams, Admin) {
Expand Down
24 changes: 12 additions & 12 deletions modules/users/client/config/users.client.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,39 @@ angular.module('users').config(['$stateProvider',
.state('settings', {
abstract: true,
url: '/settings',
templateUrl: 'modules/users/client/views/settings/settings.client.view.html',
templateUrl: 'settings',
data: {
roles: ['user', 'admin']
}
})
.state('settings.profile', {
url: '/profile',
templateUrl: 'modules/users/client/views/settings/edit-profile.client.view.html'
templateUrl: 'edit-profile'
})
.state('settings.password', {
url: '/password',
templateUrl: 'modules/users/client/views/settings/change-password.client.view.html'
templateUrl: 'change-password'
})
.state('settings.accounts', {
url: '/accounts',
templateUrl: 'modules/users/client/views/settings/manage-social-accounts.client.view.html'
templateUrl: 'manage-social-accounts'
})
.state('settings.picture', {
url: '/picture',
templateUrl: 'modules/users/client/views/settings/change-profile-picture.client.view.html'
templateUrl: 'change-profile-picture'
})
.state('authentication', {
abstract: true,
url: '/authentication',
templateUrl: 'modules/users/client/views/authentication/authentication.client.view.html'
templateUrl: 'authentication'
})
.state('authentication.signup', {
url: '/signup',
templateUrl: 'modules/users/client/views/authentication/signup.client.view.html'
templateUrl: 'signup'
})
.state('authentication.signin', {
url: '/signin?err',
templateUrl: 'modules/users/client/views/authentication/signin.client.view.html'
templateUrl: 'signin'
})
.state('password', {
abstract: true,
Expand All @@ -49,7 +49,7 @@ angular.module('users').config(['$stateProvider',
})
.state('password.forgot', {
url: '/forgot',
templateUrl: 'modules/users/client/views/password/forgot-password.client.view.html'
templateUrl: 'forgot-password'
})
.state('password.reset', {
abstract: true,
Expand All @@ -58,15 +58,15 @@ angular.module('users').config(['$stateProvider',
})
.state('password.reset.invalid', {
url: '/invalid',
templateUrl: 'modules/users/client/views/password/reset-password-invalid.client.view.html'
templateUrl: 'reset-password-invalid'
})
.state('password.reset.success', {
url: '/success',
templateUrl: 'modules/users/client/views/password/reset-password-success.client.view.html'
templateUrl: 'reset-password-success'
})
.state('password.reset.form', {
url: '/:token',
templateUrl: 'modules/users/client/views/password/reset-password.client.view.html'
templateUrl: 'reset-password'
});
}
]);