I'm an Angular noob coming from Backbone+Marionette+Require.
If you have an app with a bunch of views and a bunch of directives each with their own HTML where are you putting all the HTML snippets? Most of the examples I see are storing them either inline, in their own script tags, or loaded asynchronously. One thing I love about RequireJS is that templates can live in their own files but can be compiled into the main JS file for production. I assume there's a grunt task or something similar? Maybe one that takes HTML from individual files and embeds them into individual script tags in a consolidated HTML file at build time?
Thanks.
There is indeed a Grunt task to do this! Originally created by the Angular-UI Bootstrap team, the html2js task will take your templates and compile them into a JavaScript file (using angular's $templateCache) that can be concatenated with the rest of your scripts to form a single payload.
I haven't released it yet as I am still adding documentation, but take a look at ngBoilerplate, an AngularJS project kickstarter, to see it in context.
Update (28 Feb 2013): I just made a release of ngBoilerplate. You can check out the official site here: http://bit.ly/ngBoilerplate.
Related
I am trying to cache my angularjs application's html files, following this suggestion: https://gist.github.com/ProLoser/6181026.
I am appending a dynamic cache key like ?v=123456790 to all html files (except those in the templates directory used by angular ui bootstrap).
For partials in their own files, i.e. app/views/customer/customer-history.html this works perfectly. However, for partials in script form, e.g. <script type='text/ng-template' id='customer-history'> the template is not found and a server request is made, resulting in a 404.
E.g. localhost:8080/customer-history/?v=1234567890
I can see the templates in question are in the $templateCache. The ones using ng-template are just the name ie customer-history whereas the separate files ones are by path app/views/customer/customer-history.html as you might expect.
It's a large app so going through and moving them all to their own files etc would not be trivial. I've scoured everywhere and I'm not turning anything up so I'm guessing it's something basic with how the templateCache is implemented.
I'm using gulp-templatecache plugin during the build process but the docs are quite limited and I don't think the issue lies there.
My current solution is just to skip the offending templates for now in the function appending the version number by decorating an inCache function onto the $templateCache factory and using it during the check to append the cacheKey. But I feel this is kind of missing the point.
Answering my own question here.
Because the script tags are part of the containing html file that gets loaded into the $templateCache, the script is already there. When a request is made for the templateUrl, it shouldn't have the cache busting appendix.
The simplest way to avoid all this is to just set the cache busting hash or string on the "templates.js", or whatever the template output of the build process is. That way the entire file gets invalidated and reloaded as needed.
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
The application has many small HTML files. Is there some way that I can concat these together into some kind of template and had them all at one time? I'm not sure if this would be AngularJS or ui-router functionality or if that option even exists. Looked and did not so far see any examples of people doing that with ui-router. Hope to get some good feedback or some examples.
Yes, it's possible. Suppose you have these two html files:
partials/foo.html, containing <h1>Hello</h1>
partials/bar.html, containing <h2>World</h2>
and those constitute the value of the templateUrl of two of your states.
You can generate a JS file containing that kind of code:
angular.module("templates").run(
function($templateCache) {
$templateCache.put('partials/foo.html', '<h1>Hello</h1>');
$templateCache.put('partials/bar.html', '<h2>World</h2>');
}
]);
If loaded, this JS file will thus prepopulate the cache used by angular to store the templates, and the router will thus not have to get them from the backend.
There are gulp (and probably grunt) plugins doing that for you at build time. A quick google search found this, for example: https://www.npmjs.com/package/gulp-angular-templatecache
We're developing a website with AngularJS, and would like to have static HTML files for every AngularJS page for search engines.
The site is small and static, about 10-20 pages.
Is there any task in grunt that can generate HTML files based on Angular app? E.g. it generates /static/about.html for /#about page of Angular app.
I saw services and scripts like PhantomJS, but they look too complicated for our case. As the site is static, we can run the task every time we're going to publish any changes.
PhantomJS is indeed the way to go. However, there is existing tools that do mostly what you want.
This one is a good example:
https://github.com/cburgdorf/grunt-html-snapshot
This will run PhantomJS through pages of your website and generate an HTML version of it. It can be automated via Grunt.
The only caveat is that you have to enter manually, in the configuration, all the pages you need to index.
Is it ok for what you need?
EDIT: This is also a quite interesting and complete article about SEO friendly Angular applications: http://www.ng-newsletter.com/posts/serious-angular-seo.html
They provide a few alternatives depending on your needs
I am using Angular JS. I wish to put unrelated code (ie, which is not a factory, service, controler, etc) in additional, separate modules, in a similar way one would with AMD or CommonJS.
At the time of writing, a search for 'Angular.JS make new module' using Google does not return any documentation on making Angular.JS modules.
I have a found a post on the Angular.JS Google Group that seems to indicate that instead of loading dependencies dynamically like other module systems, in Angular.JS dependencies must be inserted as additional script tags.
Is there any documentation on making Angular modules (which is not limited to controllers, services, or other angular concepts)?
Is the statement about script tags true? Do I need to manually add script tags for every module I may use?
Looking further into the various Angular boilerplate apps, apps manually load every part of their apps via script tags. Unlike other systems, Angular 'modules' don't take care of actually loading dependencies, they just inject them once already loaded.