I've been using DurandalJs for an application I've developed where I have a core group of functionality (JS, Html files) saved in domain XXX. I have a client app (domain YYY) that uses the JS, Html files from domain XXX. I have DurandalJs set up to inject JavaScript viewModel (and associated view) from a different domain. It's working really well.
I'm learning AngularJs and am trying to figure out how to do the same. Is it possible to inject a JavaScript resource from a different domain using AngularJs?
Thanks for your help.
Durandal uses requirejs to load resources. Angular do not have a resource loader but you can also use require. You will need to set it up yourself.
http://requirejs.org/docs/whyamd.html
There is no restriction on loading resources from different domains. The only restriction on Cross origin request is when you are using ajax.
Related
I've developed two angular applications:
Contacts
MailClient
Both need to be deployed on their own endpoints. However: MailClient has a tab that needs to load Contacts and communication should be possible between the Contacts tab and the MailClient.
What is the best way to achieve this?
I first thought of using an iFrame and use angular.bootstrap to load a second angular application, but I've read that "AngularJS applications cannot be nested within each other."
So my second thought was to somehow convert the the Contacts-app to a module/component (bower?) which can be loaded in the MailClient. But how to achieve this? Or are there other (better) alternatives (like configuring the MailClient project to use symbolic links to the Contact project and just use them in the project - I don't now how we would configure the build-server in that case though)?
I've a Java developer who's begun working in the Javascript enterprise domain. Specifically I've begun working with Strongloop/Loopback API and AngularJS in the client.
I'm creating entities with ease with Strongloop and am very impressed with how quickly I can generate an expanded model. When it comes to the client however things appear to slow down as I have to manually create the Angular Controllers, Services and the crud template views.
I've used reflection in Java considerably in the past and I found it to be very effective. I was hoping someone might be able to let me know if there's either a reflective way to initialise Controllers so that I could have one EntityController if you like that would export the CRUD methods. Alternatively if there's a tool that might be able to access the restful api and generate generic templates, controllers and services for the restful API?
Thanks in advance for any help!
Mark.
I believe that you are looking for loopback angularjs SDK.
It will not generate views and controllers but you will have angularJS services generated that contains all the LoopBack models and methods you have defined. You have to register the AngularJS module lbServices as a dependency of your app.
Documentation covers this very well with step-by-step instructions how to setup client application.
After you setup loopback angular client, then it is easy to use models in your controllers. All you have to do is to add your model as a dependency in your controller.
If you want to avoid manual work of generating angular controllers, routes, views etc then you should consider using one of the angular application generators ( i.e. yeoman generator-angular ).
To make long story short:
use angular generator to generate angular application.
generate angular services using loopback angularjs SDK.
add loopback model as dependency to your controller or service
See also Angular SDK built-in models API
I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.
Background
I am attempting to develop an AngularJS app that is to be hosted as 'offline html' as part of the Resco MobileCRM software. This software provides offline access to CRM data via its own javascript libraries and this is working fine. I am also able to get a very simple angularjs application working, in terms of retrieving and displaying the data.
The AngularJS application is uploaded to the CRM using the Resco interface and then is download to each client machine via the resco software. The actual files end up in the users AppData folder on each client machine.
Problem
When I introduced routing to the angular app, either using ngRoute or ui-router, I am getting Access Denied errors. The resco software uses the underlying browser, which in my case is IE11. I have narrowed down the error to when angular is attempting to load the partials for the routes.
The offending code is below (angular.js v1.3.15 line 9805)
xhr.open(method, url, true);
From my research, it seems like IE believes I am attempting a CORS request, however I am just attempting to load a file from disk.
Various posts suggest I add the site to 'Trusted Sites', however I am not actually accessing another site. I also cannot host this on a web server as the whole purpose is to have this angular application accessible offline within the Resco MobileCRM application
I also get the same error if I navigate to the AppData folder and run the angularjs application directly from there (i.e. not in the resco application).
Other posts have suggested that I need to replace the XMLHttpRequest created by Angular with XDomainRequest but I am reluctant to change the angular library, especially if I don't understand why.
Would appreciate it if anyone could shed some light on why this is happening and how to fix it.
I have confirmed that this is not possible on any of the browsers. You cannot make xhr requests to files served locally from disk.
I got around this problem for directives by loading my 'partials' in to script tags and referring to the id of these script tags in the directives.
I did not try that with ui.router or ngRoute and instead opted to redesign my application in to a number of smaller application as they did not need to share any context