I have AngularJS project with more than 20 html templates (routes, modals).
I'm using grunt-angular-templates to split tempaltes in one file templates.js.
In my Angular project I'm using angular-route 1.2.25 for routing.
When I try to use template from templates.js file, browser crashes and not responding. There is any error on console.
The problem is only with html templates with Angular stuff (ng-switch, ng-show etc.)
When I load clean html it works.
I thing the problem is with compile the templates from $templateCache, but how o manage it?
Templates.js
...
$templateCache.put("name","HTML");
...
After long hours of search I found what's wrong.
In my solution I'm using Modal Boostrap for Angular.
grunt-angular-templates plugin don't compile this templates correctly. I just skip this files and all works.
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.
I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html
I am trying to move avatars pattern of Onsen UI (http://onsen.io/pattern-list_avatars.html) into a Meteor app, but the tags do not load. Firebug logged message from Onsen:
Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior.
This message appeared even though I had jquery package installed and in order to eliminate it I have to include jquery lib into client/lib folder (do not know if that is correct).
I have also added urigo:angular package into my project because Onsen requires Angular but that did not do the trick. Now the only message I get in the log is
WARNING: Tried to load angular more than once.
Which is taken from Onsen code:
if (window.angular.bootstrap) {
//AngularJS is already loaded, so we can return here...
console.log('WARNING: Tried to load angular more than once.');
return;
}
The styling is not applied to elements and they look the following:
How can I solve this?
Onsen .js files need to be loaded in a correct order together with jQuery file and Angular file. To achieve this in Meteor I loaded these files in client/lib folder like this:
root
|- client
|- lib
- onsen.js
|- jQuery
- jquery.min.js
|- Angular
- angular.min.js
Loading in this way solved the problem because meteor load files starting from the deepest node in the folder tree, in this case /Angular folder.
Maybe a better solution will be to create an onsen Meteor package and make a dependency to Jquery and Angular Meteor packages.
I am trying to unittest our angular directives which are implemented with external templates.
As far as I can find there are only two options:
use $httpBackend to respond with the template when requested in the directive
use the preprocessor created for Karma to fill the $templateCache
Number 1 is really not convenient and probably quite errorprone since we have to keep the actual template and the respond version in sync.
Number two is not an option since we are not in a position to install karma on our CI environment (TFS Online).
Have I missed something? Are there any other options?
Thanks,
Casper
Use the following process:
Download the templates using a tool (curl, grunt, gulp)
Concatenate the files
Move the concatenated file to your runtime template directory
Reference the concatenated file in the templateCache
Add the templateCache to your module
References
Feeding cURL HTML data to AngularJs
Gulp angular unit testing directive templateUrl
Angularjs: Number of HTTP requests when loading an HTML template?
I have been trying to wire up AngularUI to Bootstrap 3 to no avail. I grabbed the appropriate AngularUI code from the bootstrap 3 branch here:
https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
I picked the AngularUI tooltip directive as an easy "test-case" to see if I can get it all wired up.
There error I am receiving is:
Uncaught Error: No module: ui.bootstrap
I've shared a dropbox link with src code below.
Views/Home/index.cshtml contains the markup with references to angularjs and bootstrap
js/directives contains the only directive I am currently testing out which is the "tooltip" directive.
Dropbox link with src code
https://www.dropbox.com/sh/elwn0su5qwnqa27/zetaMxAa4Q
Instead of my having to download the bootstrap 3 directives and place them manually in my project, is there now a CDN available for AngularUI-Bootstrap3 directives like there is for AngularUI-Bootstrap2?
Thanks for any help,
V/R
Chris
It's because you try to extract only one part of AngularUI sources, not compiled version.
So you lack the module declaration for 'ui.bootstrap' (and surely other pieces).
As Bootstrap 3 compatibility is not done, there is no compiled version (and no more CDN) for this AngularUI version.
You have to get all sources from branch bootstrap3_bis2, and build them with grunt. It's explain in project README (Contributing to the project > Build).
It will generate 2 JS files (one is minified and the other is not) you have to include one of them to your page and it will works correctly.