I have an application build with Codeigniter and I want to use BackboneJS for my frontend. I already build an API so that I can use the returned JSON from my Database, so the only thing I need is to integrate Backbone in my Codeigniter setup. I have also already an Backbone application, where I created most of the Views I need. So, in my Backbone's index.php I have:
<script data-main="js/config" src="js/lib/requirejs/require.js"></script>
<script>
require(['config'], function(config) {
require(['app/mainpage']);
});
</script>
Also in my index.php, I have all the div's where my backbone views are rendered.
I would like to know, how I do integrate this in Codeigniter. My file/folder-structure in Codeigniter is the typical CI-setup:
- application
- config
- controllers
- models
- views
- assets
- css
- img
- system
index.php
.htaccess
So what is the best way to do this? Should I create an additional js-folder and then place my backbone-setup in that folder? If so, what about the <script>-code shown above? where to place it?
Thanks in advance
You asked this a while ago, so I don't know if you're still looking for an answer, but since I use a similar setup occasionally with AngularJS I suggest:
loading a view with all header contents as a layout. I use this layout
Load your front-end client JS inside an include in /application/views/site/header.php, see this repo for example
Once you have all the libraries loaded up you can then load each individual JS application (Angular uses Modules) or use a single application which loads partials (I assume backbone has this feature, as does Angular).
Oh also, a trap for the unweary: Codeigniter doesn't support JSON posts well, so RESTful APIs are not easy out of the box. If you need to receive JSON post data, the best I've found thus far is the utterly obtuse:
$phpArray = json_decode(file_get_contents('php://input'));
Related
we are working on a one page website project which wad already build in jquery and javascript at client side and cake php at service side but one for grid we want to use DGRID of dojo framework and for that when we try to integrate dgrid with our project we are getting this error
defineAlreadyDefined
In case we try to open another module because the content coming from AJAX and updated in same page.
We had included dojo.js in main page which loads only once and module included with require in each individual file.
Any help will be appreciated.
Well, this happens when we use two or more different libraries which expose same define method to create new widgets.
solution:
in our project we modified the name of exposed value like instead of define we replaced the customDefine in other widget so if we need define of first library we use define (as it was earlier) and if we need define of second library basically we used customDefine.
Note:- Before making above changed just verify that you are not adding same or similar libraries more than once in your project. In our project we were using dojo and d3 libraries.
This is how we resolved in our project.
Problem with almost similar solution - Trouble adding search widget to ArcGIS Shortlist Story App
hoping this will help you:)
I'm trying to combine angularJS and Google App Engine for the first time, and the stumbling block I'm facing is how I can send my data from my back-end Python/jinja2/webapp2 to my front-end angularJS single page app.
I currently have the angularJS $routeprovider set up to load the angular HTML templates into my index page, which contains the ng-view, and I have a form on one of those angular templates which sends to the GAE datastore.
What I want to do is display a list of the objects in one of my datastore tables inside of an angular template, and have that template get its data from the datastore. Is there any way to do this? Or would I have to load the HTML template from Python using jinja2? (Which would make it no longer a single page app I believe.)
Am I maybe going about this the wrong way?
I've been trying to wrap my head around this for a few hours and haven't come up with a way. Any insight would be greatly appreciated!
EDIT: The full code context is available here. Deployed version is here.
I'm currently using Sails for backend, which comes with an ejs view engine and a templating system which is rather neat. However, setting up Angular on the front end of things will get in the way of these functions.
For instance, I can no longer use templates, because if I have say <html ng-app="myApp"> inside layout.ejs Angular will never initialize.
Same thing should I include any ejs templates.
So what I have done now is created a index.html file inside my assets folder, turned off the Sails routes and layouts, and am purely working with Angular. This will do fine for my current project (except I can't make things as tidy as I'm used to, the boilerplate html need to sit there, etc.) but will it be a problem in other projects, I wonder?
In other words, what am I missing out on by not using ejs? How will I ever be able to get things from my Sails controllers into my views? Or won't I need to?
First this question is WIDE open to interpretation based on all sorts of variables.
If your using your APP simply as JSON delivering API, then in reality you don't need to use the template engine. So the basic premise of your question is valid.
However, their are still plenty of reaons to use the template engine.
For instance, you can still use EJS to setup your default layout and index page for your angular site.
For instance, I can no longer use templates, because if I have say inside layout.ejs Angular will never initialize.
This statement is completely wrong. I use server render templatse for my index page on a SPA in order to use my app version to point to updated assets and template files. That way old template files will not be cached when I update my app. Depending on the app the index page may be the only one to use the template engine as everything else will use static templates. Others I have the server render my templates using the template engine as well (for example: if I want to restrict certain aspects of my templates based on a user role.)
There are other reasons as well. You might try the Google Groups for sails as this is more of an open ended question.
https://groups.google.com/forum/#!forum/sailsjs
If you use Angular for frontend and SailsJs for the backend the best practice is to have two distinct applications which means you don't have use sails to render the views (No EJS mandatory ).
AFAIK SailsJS just need to be used as a REST API while Angular needs to render your views ( you could use http.post get put and delete to comunicate with your api).
Best Regards.
As sails.js is purely backend and Angular.js is purely frontend, they can work together nicely.
All you need to do is place your angular files and logic in
myapp/assets
folder. Assets folder is by default acessible on sails server url.
You can access it as http://localhost:1337/assets/file_name.
As for the ejs, if you are using any javascript framework like angular.js then it is not a requirement as all JSON api will be made in sails framework and angular will get data in JSON format.
I am using angularjs. want to load parts of a page that I package as "components", wherein a component contains its controller, template, directives and a few other assets like CSS etc. When needed, I want to load all of this on demand.
I was able to load the controller and the template on-demand by specifying a resolver for the controller and the templateUrl for the template. But is there any way I can combine them into a single HTTP request? Any examples?
Sorry forgot to add: I want to do it only on-demand, not precompiled/pre-aggregated (lets just say thats is a requirement thats been given to me). Is there a way?
You can use angular templatecache to add your html to a module and package template cache along with controller, services, directives etc.
In order to pull your Angular code and your html templates together in one request from the server, you'd need to have the templates combined in with your js. That would imply using some kind of job to process your html into js and concatenate it in with the rest of your code. Something like grunt-angular-templates might do the trick.
Edit
With the added requirement that this should be an on-demand sort of thing, I could only add (with the current information) that this sort of thing can be accomplished with bundling and request processing on the server, but the specifics on how to do this are totally dependent on your specific server stack. Often a server will have features that allow for on-demand resource bundling, or rendering of partial-views that might be helpful in this capacity.
I’m looking for some guidance on structuring JS code in an .net MVC application.
I have JavaScript at the bottom of each page which is loaded, I want to apply a name-spacing / modular pattern to my JavaScript, removing it from inline code to separate JS files and load them on demand based on what page is being accessed.
When I google around, I tend to only find MVC patterns for javascript (this for example http://addyosmani.com/largescalejavascript/) which is great but I’m struggling to understand how I can implement this into an MVC application.
Any advice is welcome.
thanks
I use a technique that is similar to the one described here by Paul Irish. However rather than using hardcoded id's or classname's in order to know what scripts need loading and initialising I use the urls that are requested (full requests and ajax reqs)
For instance say I have a customer edit view that is served in response to a request to a url like myapp\customer\12\edit I would have a customer namespace in my js that had an inner edit namespace.
The customer namespace would have an init func likewise the edit. All customer pages when loaded would invoke the customer init event then any action level namespace if it exists. This would have an init func that would be auto called when the page was loaded (I have some magic that parses the url so that we know which js to initialise). So parsing the url would first invoke the customer init fund then the customer.edit init func. There is also common init functions that get fired everytime for app wide logic (to create a sidebar page widget for example).
I do not load the js on demand. I find it is better from a latency point of view to combine+minify all js files and serve them under gzip obviously.