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.
Related
I have used lots of js using the Angular framework. I have a big project and in index page I load all required files with bundle concept of MVC. Everything works fine, but Index page takes a long time to get loaded.
I know the concept of dynamic loading AngularJs controller, but this seems impossible to go with that idea as we have a massive project running live. We can't change whole architecture now.
So is there any other way or workaround to get it resolved?
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 have one big information system consisting of diferrent subsystems. One of my objectives is to organize navigation and localization between these subsystems.
When I was generating view in backend via JSP I simply used jsp:include referring to special web-app which returns header with cross-site navigation and also this web-app was responsible to store user locale for all subsystems.
Now I switched to angular and found out that it's impossible to replace jsp:include with ng-include. I have 2 different ng-apps - header (coming from outside web-app) and current, say, subsystem1 ng-app. ng-include directive in header doesn't work because I have to bootstrap it, but I can't bootstrap header ng-app because it is absent - I'm fetching it with ng-include. Vicious circle.
Now I see one way to solve my problem:
Fetch header markup in second ng-app (non-header, subsystem1's ng-app) via ajax call to special header-web-app. Then, insert incoming HTML to header via simple DOM manipulations and bootstrap it manually. Disadvantage is obvious - I will make DOM manipulations in subsystem ng-app but insert HTML outside it because 2 different ng-apps must not instersect or be nested. Is it OK?
Looks like I'm inventing bicycle, so I'm asking here, how integrate cross-site ng-apps? Is it possible to share data between different ng-apps in one web page? I know, that it's possible to share data between controllers via services and factories and this is good practice. Is there any angular-way to share data between ng-apps?
Please, do not provide JSP-like solutions as I want to keep angular way of development and thus make only static pages with angular markup and make all server side job via ajax calls. Probably, I misunderstood angular way but now I'm seeing it exactly as I describe.
Method #1 from this site looks good for me. In short, any ng-app consists of markup anf js. JS can be simply loaded by script src=... and many ng-apps can be used as a modules of one big root app. Markup can be loaded by ng-include.
I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
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'));