I have an angular website that I'm developing with Yeoman. My site works great when I'm iterating during development. When I go to deploy the minified, uglified, versionified site after development and I got the following error while loading a directive template in the console when the site loaded.
Error: [$compile:tpload] Failed to load template: views/template_name.html (HTTP status: 404 Not Found)
I'm using Windows 7 with the all of the yeoman web client tool set (grunt, npm, bower, compass, etc.).
The reason for this error was that windows files are NOT case sensitive, and obviously javascript strings ARE. My solution was to make sure the case of my templateUrl field in my directives matched exactly with the case of the file in my views folder.
Explanation:
Yeoman does this great thing where it will create an angularjs template cache for you during it's minification/uglification/versionification/deployment process in the minified javascript file. It finds your templates referenced from your templateUrls and bundles them up into plain text in a javascript file, so that you don't have to do anything and it just works! The problem I ran into is that the template cache is indexed with the name of the file in the templateUrl field in my directive.
In development mode, node loads up the template from the file on the server (on my windows machine) and this load is case insensitive. In the so-called "dist" mode with this template cache, this templateUrl lookup is now case sensitive.
My solution was to make sure the case of my templateUrl field matched exactly with the case of the file in my views folder.
Related
I'm trying to build an angular hybrid application out of a angular.js application. I'm following the official documentation (https://angular.io/guide/upgrade). I reached and completed this step: https://angular.io/guide/upgrade#bootstrapping-hybrid-applications.
I'm using angular ui-router 0.3.1 to handle the routing of my application. Therefore, using the config function on my main module, and the $stateProvider service, I've mapped each route to an angular.js controller and a template specified by the templateUrl parameter.
My application seems to startup correctly but the templates cannot be loaded because they cannot be found (404 error). This is normal because they are not imported in the dist folder where my application is built when I use the ng build angular-cli command line.
How can I configure my application so that my angular.js html templates get copied in the dist folder when my angluar application is built by angular-cli?
Thanks in advance!
So actually it appears my question was a duplicate of that one: Angular CLI with Hybrid app ng-build.
The idea is to use the assets array from angular-cli.json. Glob enables to select recursively all html files from the folder of your choice and to put them in a subfolder of dist:
"asssets": [{"glob": "**/*.html", "input": "../src-ng1", "output": "./src-ng1"}]
Background:
I'm loading my entire AngularJS Cordova/Ionic web-app from the server. This is amazing. I can change the app without going through Apple.
Questions:
Q1) How can I use js-files.zip, loaded from server, in my index.html file?
Q2) How can I effectively load index.html startup logic from my server?
Problems:
On some older devices, loading time is too high if I load all my .js files from my server, so I want to be able to configure that logic (in index.html) also from the server.
The only thing I'm not loading from the server is the content of index.html
So, how can I essentially load index.html from a server?
If i try to do that
1) Pulling, say, indexfromserver.html using ajax and doing html rewrite of index.html with document.write(res), then there are AngularJS problems:
E.g., module missing errors (*1 below), because the following isn't in index.html until after the ajax response rewrites index.html:
<body ng-app="myapp" ng-controller="MainCtrl">
1.1) I can include the necessary modules in the initial local index.html, but then if I rewrite index.html, I'll get these errors/warnings about classList null in ionic (ask me for details), deviceready not fired, and angularjs loading more than once
2) I can redirect index.html to, say, indexfromserver.html, but then all my $http responses are rejected promises.
Regarding 2) I've been told I should be able to add a controller for indexfromserver.html or specify $urlRouterProvider.otherwise('/app/indexfromserver');
This hasn't fixed the $http requests from being rejected.
I don't understand exactly how index.html is involved in making $http work correctly, as it doesn't have a controller and isn't the 'otherwise' route provided. I only see mention of index.html in config.xml so far.
Request:
Can someone please post a snippet of a typical example how an AngularJS Cordova/Ionic app could effectively use index.html logic that's loaded from a server?
Otherwise, can someone show/explain if/how I can use js-files.zip from server, and uncompress and use in index.html?
Details/Notes:
(*1)
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.17/$injector/nomod?p0=myapp
It was pointed out that you can use JavaScript in certain situations to unzip an archive, but that is not very common. The web does not work like that, Ionic runs inside of a browser so you should use the same processes as you would to optimize a website.
You would build the app instead like any website. Take the following steps to create a more optimized app for loading quickly. If you aren't familiar with build tools, take a look at http://yeoman.io/, and this specific generator for Ionic https://github.com/diegonetto/generator-ionic.
Here is a very basic list of some steps you can take, though the generator provides a few more options and other things could be added as well.
Concat and minimize your app's JavaScript into single file.
Concat and minimize your app's CSS into a single file.
Compress your angular templates with a tool like this https://www.npmjs.org/package/grunt-angular-templates into a single JS file.
Deploy static assets to server.
Link to above assets in index.html.
Ultimately the goal is to optimize the assets so you don't have to load a lot of files, and each file is as compressed as possible.
If you want to go the zip file route, and you assume your users aren't always connected to the internet, probably the best way is to:
Check if the version is new via a server call, and if so, download the zip file, extract it (maybe via stuk.github.io/jszip/), and use a Cordova interface to write the new JS code to the phone's memory, and run the code by adding some script tags in your loader.
I have a Grails app which pulls in several Grails Plugins. These plugins need to be reused by several other Grails apps not just my own.
In a Resources Bundle in one of the Grails Plugins I have the following defined:
leaving this for completeness, but I have since switched to the Asset-Pipline
modules = {
directivea {
resource url: 'directives/directivea/directivea.js'
resource url: 'services/restapis.js'
}
}
In a Javascript file in one of the plugins I have the following directive defined:
ModuleA.directive('directivea',function() {
return {
restrict: 'EA',
scope: {
'objId' : '='
},
replace: true,
link: function(){
$scope.ObjId = attributes[''];
$scope.someFunction($scope.ObjId);
},
controller: function(){
$scope.someFunction = function(objId){
//some stuff happens here
};
},
templateUrl: 'directives/directivea/directivea.html'
}
});
It seems to be executing the controller just fine but when it tries to pull in the template it chokes on:
GET /appname/directives/directivea/directivea.html
404 (Not Found)
This makes sense because that's not where the partial template will be. Where would it be though? How can I keep that information isolated to within the plugin but usable by all the downstream applications? I'd like to avoid defining in-line templates if I can.
**EDIT TO INCLUDE STRUCTURE**
Structure of Plugin:
grails-app
conf
PluginNameForGrailsResources.groovy
BuildConfig.groovy
controllers
PluginControllerA.groovy
PluginControllerB.groovy
domain
PluginDomainA.groovy
web-app
css
directives
directivea
directivea.js
directivea.html
services
restapis.js
application.properties
PluginNameForGrailsGrailsPlugin.groovy
Structure of the application referencing my Plugin:
grails-app
conf
BuildConfig.groovy
controllers
domain
views
layouts
main.gsp
index.gsp (references to directivea via resources r:require tag)
web-app
css
main.css
js
index.js
application.properties
**EDIT TO INCLUDE STRUCTURE POST-ASSET-PLUGIN-SWITCHOVER**
no more Resources defined, BuildConfig.groovy now references the asset pipline instead of Resources, no more files in web-app
grails-app
conf
BuildConfig.groovy
controllers
PluginControllerA.groovy
PluginControllerB.groovy
domain
PluginDomainA.groovy
assets
javascripts
directivea
directivea.js
directivea.html
services
restapis.js
application.properties
PluginNameForGrailsGrailsPlugin.groovy
Using the Grails Resource plugin
Refer this sample grails app which uses this grails plugin.
Plugin hosts an angular module. I tried to keep it simple by just adding a directive and no other module. Also note that I have used static/.. in the templateUrl in directive.
Also refer Config.groovy in the app which uses below config
grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/img/**']
as mentioned in the answer to this question. May be you are hitting this issue.
Give it a try. "Hello World" is rendered from the directive present in an angular module inside the plugin.
If you are using latest version of Grails then I would suggest to switch to asset pipeline whenever convenient.
Using the Grails Asset Plugin
Use the Grails asset-pipeline plugin (v 1.9.7 as of this posting) and the Grails Angular-template-asset-pipeline plugin (v 1.2.5 as of this posting).
For details on exactly how to set this up, see the answers to How to reference a static HTML resource using the Grails Asset Pipeline plugin.
Primarily, ensure your Angular JS module is lowercase or uses _'s or -'s in the name and that your template file has a slightly different filename (ignoring the extension) than any of the javascript assets you're including.
Note that the javascript is referencing things from the web-app root, not from the resources or assets directory. You can find more about Angular routing from the core documentation: $route
So templateUrl: directives/directivea/directivea.html needs to actually reference a file in the /web-app/directives/directivea/directivea.html directory.
Note that the resources plugin does not seem to be very modular, and global files need to be specified for sharing (and most other things). If you move to grails 2.4 and the assets plugin, you can do modular file paths.
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.
I am trying to setup a localhost version of our site and have a problem getting this setup correctly.
Both our live and localhost site have this directory structure:
/na_cms/expressionengine/templates/default_site/c.group
/na_cms/expressionengine/templates/default_site/j.group
/na_cms/expressionengine/templates/default_site/default.group
/na_cms/expressionengine/templates/default_site/inc.group
On our live site, CSS files in our templates are accessed like this:
href=“css/c/modal.css”
src=“j/jquery-ui-1.8.4.custom.min.js”
How do I get rid of the 404 not found errors for the CSS and javascript files on the localhost site?
My config file has
$config[‘rewrite_short_tags’] = TRUE;
I'm obviously using assumptions here until further information gleamed...
You're using templates to hold your JS and CSS, rather than external files (Nothing wrong with that), so they're not technically relative URLs - it's pulled from the database so you won't have any more of a path than template group and template. The browser will not be targeting these template files directly, it will be EE providing them.
In your j.group folder I'm assuming you have a file called "jquery-ui-1.8.4.custom.min.js.js", which relates to a template group called "j" and a template called "jquery-ui-1.8.4.custom.min.js"?
What I'm a bit confused at is "css/c/modal.css", as this is indicating a template group called css, but you've stated your template group is called "c" and the template is "modal.css". Possibly this was a mistake, or you've got a "css" template group and falling into the index template...?
Firstly, check your template folder settings in EE, Design -> Templates -> Template Manager, then "Global Template Preferences". Look for "Basepath to Template File Directory". I'm assuming that you copied the online database to your local, rather than a new fresh install?
If you're using htaccess rewriting, check that is working on your local.
Failing that, try changing the paths to the CSS and JS to use the path variable:
src=“{path='j/jquery-ui-1.8.4.custom.min.js'}”
http://expressionengine.com/user_guide/templates/globals/path.html