Is there a way to include html templates in AngularJS modules without putting them as strings into js code into the templateCache?
The way we've accomplished this is to write our html templates as standalone html files, then use a grunt task to crunch them into strings (handles all the escaping etc) and inject them into the template cache. best of both worlds, as the developers can work on individual HTML files all under source control, but we drastically reduce roundtrips to the server to pull the templates down to the app at runtime. (At the cost of up-front loading)
If you want to include one html in another, you can use ng-include directive of angularjs.
I have used this like below:
<div ng-include src = "'partials/myModule/myHtml.html'"></div>
Related
I am writting an app from scratch in Angular with node.js and I was wondering if I am doing things correctly.
I want to split the content of my index into smaller html modules with their respective controllers, this way, everything will look more structured and easy to find when the project gets bigger.
For example :
index.html <--- main file
/views/menu.html <--- menu module
/views/content.html
/js/menu.js <---controller for the html module
/js/content.js
...
I can manage those files by just adding ng-include :
e.g
< ng-include src=" 'views/menu.html' ">
My concern is that this is like a GET request per file and I was wondering if this would affect the load speed of my application. Because I am working in local, this loads in 2ms which is very quick but I was wondering how this would behave online.
My questions are :
Is this the best way to create a modular app with different html files and js controllers ?
Is there a better way to achieve what I want to do ?
I am still learning Angular, sorry if this is too basic.
Thanks
Its better to use index.html as basic load file which will load all css and js on the load of the app,
for ex:- you can make diffrent app for login and after login section. After login.
load all the js and css files through the app after login..it will improve the loading time and also be a modular
as suggested by #Dhruv Raj Singh It is good to use a different ng-app for pre-login and post-login.
It is always good to structure the code that you want.
Now ng-include
will Emitted event $includeContentRequested every time the ngInclude content is requested.
Now it up to the requirement use cases how to use and when to use.
If
the module is a sperate and special one which requires lots of resources specific to it only and will be used by few users and only few times then it is better to include them for that module only
else common resources should be included at ng-app level.
You can name and organised the resources whatever way you want but include them at post-login app creation.
i am building a single page application using node.js and angular.js.
I wonder if there is any advantage on using a template engine like jade or ejs since angular has the ng-include directive which let you inject html partials inside your main html page, and of course with angular you have two-way data binding. Any thought on this?
It’s good idea to use Jade (or another template engine) for all html pieces in your project even if you’re creating SPA with AngularJS. Jade allows you to generate templates easy and fast. Templates will be neat and easy-to-read.
As for include directive, stick to the following rule in Angular+Jade projects: use Jade’s include for reusing pieces of html when you create static templates, use ng-include for dynamic purposes when partials depend on the App’s state.
I am making a mobile, AngularJS, cross-browser, offline spa with angular-route.js using no server at all. I feel changing browser defaults to allow Ajax loading of local files unacceptable for my situation. Ideally I would like an external-to-library code work-around that allows loading files via script-tag src attribute manipulation. But, I am willing to explore modifying or extending an open source library file such as angular-route.js if I knew the best version + file + line to start with.
It seems that you need to use $templateCache, you can specify the templates directly in your html using a <script> tag.
<script type="text/ng-template" id"path/to/template.html">...</script>
Of course you will probably want to have each partial in a separate file, in which case you will have to add a task that will make the partials available to $templateCache. There are plugins that will do this for you, take a look at grunt-ng-template.
relatively new to Angular so I'm not sure what the best practice is for this scenario. I have a fairly simple index.html that include an ng-view in the middle. Later on in the html I need to include page(view)-specific js scripts after some of the generic app-level scripts load. What is the best practice for doing so?
Pseudo-Code
[ng-view]
[generic stuff for all pages]
[view-specific scripts]
By default AngularJS needs all the script related to your ng-app module loaded at one go, which is called bootstrapping the app. What this means is that if the scripts are related to AngularJS such as controller, directives and service, routes have to be loaded together in the script block, they cannot be loaded on demand.
There are some plugin that allow lazy loading such as these
https://github.com/matys84pl/angularjs-requirejs-lazy-controllers
https://github.com/nikospara/angular-require-lazy
https://github.com/ocombe/ocLazyLoad
I have two different HTML pages that serve up backbone apps. Up until now, I have put all the js templates inside of each respective HTML file.
Now, I'm refactoring a bit and would like to share some backbone views between files. When loading a view that can't find a js template, the whole app will error out. I know the proper way to merge these two would be to have external js templates, using EJS for example, and have 1 template per file, however, I'd like to just have one huge HTML file with embedded <script type='text/template'> and share the template HTML file between my 2 pages. Is this possible? I tried getting the external js templates with AJAX and writing them to the head, but backbone views still can't find them.
Does anyone else choose to have a file with many javascript templates in it? I also find that I have an unmanageable number of files open when I use ejs. Any help would be most appreciated.
I use an extra javascript/coffeescript file and use underscore's templating to take care of everything. This way you can include the templates and put them into as few (or many) files as you would like.
I'm using a single file for all the templates on my current project and it is working out pretty well.
It's a Asp.Net site, so I made the template file into a user control so I can easily include it in any page that uses Backbone.
If you're fetching all templates through AJAX, maybe you don't have to write them to the head.
You can send templates to the client as JSON Object, for example:
{"about":"<p>About</p>...","gallery":"<p>Gallery</p>...","contact":"<p>Contact</p>..."}
After fetching temples you can store them as templates variable inside some object(or locale storage), and after that you can do the following:
var tempStr = templates['about'],
template = new EJS({element:{value: tempStr, id: 'about'}}),
content = template.render();