I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example
Related
I'm starting my first AngularJS 5.0.1 application using this theme: https://themeforest.net/item/ubold-responsive-web-app-kit/13489470
But I'm having some problems... The .js files required for the theme that I've put on angular-cli.json are loaded before the HTML, so the script can't find the elements to apply the necessary events to the theme. I need firstly load the HTML, and only after that, load de .js files. Someone could help me, please?
I used to do that on AngularJS by adding a $timeout around ~150ms and then load the functions I need.
Hope it's useful for you.
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!
Yes, I know this has been asked ad infinitum here, and I already know the general rule that when using requirejs, everything that calls define() must be loaded through a single script tag as in:
<script src="js/lib/require.js" data-main="js/main"></script>
but I find myself in a position where the general advice offered with respect to this common error is not sufficient for solving my particular problem, which on the surface seems pretty simple.
I am working on an angular, requirejs, and WinJS (just to keep things interesting) app, and have run into a problem with this error. My main html file does indeed load several other JavaScript source files using separate script tags but none of them call define(). I checked. Twice. Okay, three times. All other JS source files in the app are loaded through a single script tag similar to the above. Yet I still get this error.
I tried giving each of my app modules a requirejs identifier:
define('myModule', ['dep1', 'dep2', etc.], function(dep1, dep2) {
return angular.module('app.mymod', ['winjs', etc.]);
});
but with this approach angular modules that depend on the angular module defined as above cannot resolve that dependency (although requirejs is now perfectly happy).
The three JS files being loaded outside requirejs are:
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="js/lib/dynamic-content-shim.js"></script>
Where the latter patches the WinJS runtime to allow dynamic content creation. The WinJS runtime does actually expose a define function in its own namespace, but it is completely unrelated to requirejs.
So what gives?
I'm using generator-ionic from link, and It made well, but I want to know how to add angular controllers or directives files.
It's not like app when I made with 'yo angular'
there is no views folder and files neither.
'yo angular:directive myDirective' not work.
do I have to make all files and folders by myself?
I found that the Angular Generator works fine with a project created by yo ionic. You are correct that the folder structure is different, but that may not a problem for you. You could always start with a completely blank ionic template, and then start adding the pieces you need. Your app.js and index.html files will be where the Angular Generator expects them to be.
Im using angular-ui-bootstrap with Grails 2.3.x asset-pipeline:1.6.1 plugin. One of the components - alert.js is attempting to load /template/alert/alert.html but this resolves to 404.
I tried including grails.assets.includes=[*/.html], did not help.
Any workaround for this? Anyway to let asset-pipeline include partial templates?
Is template located in assets, if so remember the first level folders inside of assets are flattened so you may want to nest your templates one more level or adjust your path
I have tried putting the /partials directory under /web-app. It ends up like:
/web-app/partials/content.html
I don't need to mess about with asset-pipeline, it just works!
The versions I use are:
Grails: 2.4.2
compile ":asset-pipeline:1.8.11"
Hope this helps anyone who upgrades their Grails version as well.
thanks for your great blog about AngularJS and Grails, which jumpstarted me on this topic.
Regarding partials, I assume the assets directory is not the right place to put them, because they get concatenated and minified in production mode.
Instead, I use GSP templates as AngularJS partials. For example, I have
views/partials/login.gsp
<div>Hello World!</div>
conf/UrlMappings.groovy
static mappings = {
...
'/partials/login'(view:'/partials/_login')
}
grails-app/assets/javascript/
...
templateUrl: 'partials/login',
...
Advantage: You may even use script lets and taglibs in the partials.
An alternative to using GSP directly would be James Kleeh's approach in this thread.
Best regards,
Björn