Laravel 4: How would you integrate user definable templates? - javascript

I am building an application in Laravel 4. This application needs to be skinnable by the client. In essence, the owner of the app needs to be able to create his own template / styling / layout for his version, and upload it (ideally in a zip). Could you suggest any ideas / best practices / tips for building in functionality where this is possible?
Where should I locate the templates? Would you use the app/views folder or would you create a writable folder in the public folder?
Any ideas or suggestions or even links to a tutorial would be appreciated.

In a nutshell the way this is handled in Laravel is to use cascading views and a view namespace. Creating a namespace is easy, just pick a name and add the paths you want it to search in in the order of priority.
View::addNamespace('template', ['path/to/public/views', 'path/to/app/views']);
Now, when using View::make you can prefix with your namespace and it'll first search in path/to/public/views, if the view is not there it will then look in path/to/app/views. This is extremely handy when you want to provide a sort of base template and simply allow them to provide their own templates that overwrite the base.
Here is how you reference the namespaced views.
return View::make('template::example.view');

Related

Building Real World AngularJS apps, how should I declare my controllers in html. Do I need to declare all in the index.html?

I have an application based on e.g. the Northwind database, in which I have built views for each of the different objects to maintain them CRUD-ly, using AngularJS views and the in typical file structure adopted by most devs.
I have an issue I would like to improve, firstly from all examples I have seen, you need to declare your controller on an index.html file. If one module that a user uses does not require, all the other controllers, is it necessary to load all controllers on the client side. Is there a better way to only declare controllers that are need per view?
Is this the normal behaivor of a Single Page LOB, to preload all necessary dependencies, whether required or not?
No. Don't declare your controllers in your HTML.
The less logic you add in your template, the more flexible your app will be.
The problem with including controllers in your HTML is that if some nested controllers have the same instance var (example foobar), then you don't know which one would be displayed :
<div ng-controller="firstController">
...
<div ng-controller="secondController">
...
{foobar}
Then, the best way is to work with modules and routes. With routes, you can tell AngularJS that your HTML should be controlled by aController.
I you are looking for a good app to start with, take a look at this one.
It has been developped by the AnguarJS team and shows some good practices to follow. You can notice that none of the HTML files contain a reference to a controller.

AngularJS application file structure

On a large AngularJS application having all my controllers in a single "controllers.js" file seems a little un-maintainable to me. Is there a better way to do this such as:
\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js
and that also applies for filters, services, directives etc...
There are lot's of ways to organize your code. You can look in the following links
Building Huuuuuge Apps with AngularJS
Code Organization in Large AngularJS and JavaScript Applications
AngularJS Best Practices: Directory Structure
You can follow their standard or you can make your own.
Try to follow the following guidelines:
Contollers shouldn't be too long, if it's too long then it is handling multiple responsibilities
Try to use Directives and Services in your system to reuse your code/logic
Directives are the most powerful things in Angualrjs, try to get maximum advantage of it.
Write Tests; even better you can try to practice TDD with AngularJS
You can manage it like module wise!!
For example , take user view , you make one directory, here its name is user!!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
Hope this will help you!!
See how these two starter projects organize files for a larger-scale application:
https://github.com/angular-app/angular-app/
https://github.com/joshdmiller/ng-boilerplate
You may wish to have a look at this community-driven guide.
The guide describes best practices for organizing the directory structure of a large AngularJS application.
It also makes recommendations on naming and structuring AngularJS modules, controllers, directives, filters and services.
It's also worth it to check out a tool like Lineman.js with the AngularJS application template.
For enterprise AngularJS projects, you may wish to look at this kickstarter which is based on ng-boilerplate.
There's a nice document out there from Google's own team that back up Shivali's example:
https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Something like this:
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
Check this, build your angular app with CoffeeScript, SCSS.
https://github.com/nhim175/modular-angular-skeleton/

How to make a plugin based project

I want to make a web based application that can have plugins/apps 'installed' to it. What i mean by Apps is say a weather app which has its own CSS and JS files in a container with a specific ID like id="Weather-app".
The Problems: (Assuming everything is on the same server)
Having Duplicate IDs, Class'
Conflicting script and style sheets
how to actually check a folder named 'Plugins', Find a file named Weather-app and then load the contents of 'Weather-app' into the main Application.
I have looked around on Google and haven't managed to find any information on how you would go about this. Hopefully someone on here will know. I would like to use JavaScript & JQuery if possible. I dont know if there is already a source out there for this purpose but if there is a link would be great!
1 - Avoid the use of IDs for generics, always use classes instead.
2 - Prefix the classes on HTML generated by plugins you are creating with some name space. i.e.: js-plugin-foobar-nameOfClass
You can avoid having the user add a ".js" and a ".css" file for each pluggin. You can generate css classes with javascript. That way you will only have to import one file for each pluggin: How to dynamically create CSS class in JavaScript and apply?
Take a look at the jQuery widget factory, you can build your plugins to use it, and that should facilitate your life. They also have some coding guidelines: http://jqueryui.com/widget/

How to load angular module

I've just started using angular and javascript and I can't really figure out how to structure my application.
I started writing a Controller and my first reflex is to put what I would call my model into a class in a different file.
I have different option
1 - putting everything (model + controller ) in one file
2 - using requireJS so my controller can 'include' my model. I've managed to do it, put it wasn't straight forward and I still have problem to make the yeoman dist version to work.
3 - use angular module, which seems to be the recommended way, but if choose this solution do I need to load explicitly my model file in the main html file. I understand that not hardcoding the dependency between files can be a good thing, so you can for example swap or change some components, but it seems wrong when for example a subclass need to requires its parent class. If I need to split a module in lots of angular submodules, do I need to load them all explicitly ? That's seem totally wrong.
Am I missing something ? what is the standard way to do so ?
What I found quite useful are the MTV meetup sessions. They give a good overview about how to apply best practices in AngularJS:
Best Practices: http://www.youtube.com/watch?v=ZhfUv0spHCY
Angular+Yeoman: http://www.youtube.com/watch?v=XOmwZopzcTA
There are many more videos on youtube. I hope this helps giving a first idea.

How to design app to be modular / support plugins

I'm currently in the process of refactoring my webplayer so that we'll be more easily able to run it on our other internet radio stations. Much of the setup between these players will be very similar, however, some will need to have different UI plugins / other plugins.
Currently in the webplayer I do something like this in it's init():
_this.ui = new UI();
_this.ui.playlist = new Playlist();
_this.ui.channelDropdown = new ChannelDropdown();
_this.ui.timecode = ne Timecode();
etc etc
This works fine but that blocks me into requiring those objects at run time. What I'd like to do is be able to add those based on the stations needs. Basically my question is, do I need to add some kind of "addPlugin()" functionality here? And if I do that, do I need to constantly check from my WebPlayer object if that plugin exists before it attempts to use it? Like...
if (_hasPlugin('playlist')) this.plugins.playlist.add(track);
I apologize if some of this might not be clear... really trying to get my head wrapped around all of this. I feel I'm closer but I'm still stuck. Any advice on how I should proceed with this would be greatly appreciated.
Thanks in advance,
Lee
You would need to expose certain functionality within your application that you want others to be able to work off of. IE: making public get{} set{} accessors on major components like your UI and your player. The more functionality you expose the more plugins will be able to modify important parts of your functionality.
So let's say you have a UI.header, and header contains properties that define how the header displays the UI. So you expose header.backgroundImage as a public string, header.Text as a public string, and header.height as a public int. Now someone designing a plugin can change your header values and make it look and say what they want.
It's all about how much you want people to be able to alter your player based on what you expose.
You can define JavaScript classes for your plugins, load them as dependencies to the webplayer and instantiate them at runtime as needed with the help of RequireJS AMD.
//in your webplayer.js
define(['./ui','./playlist'],function(ui, playlist){
var webPlayer = function(stationID){
//initializing work
}
return webPlayer;
});
At runtime load the webplayer.js file when needed and instantiate the web player.
Have a look at BoilerplateJS which is a reference architecture for JavaScript product development. Concerns such as event handling, creating self contained components, handling interaction between them, who decides when to create/show/hide your UI components are taken care of in order to quickstart development.

Categories