I am learning Typescript and Angular and I just fixed a problem with an unregistered controller because the script for the controller was loaded after the script for the application module. So I looked at index.html in the TodoMVC sample to see how the files for the controller, service and directives were loaded and don't see them loaded anywhere. Where does the code for these classes get loaded?
They are loaded using script tags : https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/angularjs/index.html#L69-L73
Related
I seem to have an issue getting ui-router to actually route things. I am sure that all of my javascript files are being loaded and angular isn't throwing any errors. I have an HTML file that declares the app and controller and then I load the js file that has the router. You can see my code on given link.
https://github.com/ikshit1/testProject
In your main index.html file make sure you have
<main ui-view></main>
I have a simple Angular.js service. It makes use of piece of code called esprima.
Esprima is referenced in index.html like so:
...script src="https://unpkg.com/esprima#~3.1/dist/esprima.js"...
and in my code, it is referenced like so:
var syntax = esprima.parse(jsCode, {tokens: true});
According to Esprima documentation, the CDN reference in html makes it a global variable so esprima usage in my angular.js service should work -- which it does.
However, when trying to exercise my angularjs service code from karma test, I am getting ReferenceError for 'esprima'. I am guessing that Karma has no use for my html file and does not pull in the Esprima package because of that.
I dont know how to "import" Esprima package in such a way that it is seen when used from the browser AND can be seen from Karma. Sorry, I am new to this and drinking from a fire hose here. Thank you
Never mind. Karma.config.js file contains the "files" section where you can list any .js files you want to bring in.
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.
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 a simple setup of an angularjs application. The scripts are loaded with requirejs. When loading the application, I get Uncaught Error: No module: myapp in the console.
The scripts are loaded in order scripts.js (requirejs configuration), jquery, angular and then app.
Here is the Plunker.
You need to remove the ng-app directive from the html element. See the updated Plunker.
First, the directive is not necessary, because you already manual bootstrap AngularJS (and ng-app is simply the shortcut to do that).
Second, the reason AngularJS reports the error is because when it processes ng-app (upon document ready event), the module file (in app.js) has not been loaded by RequireJS (that's why you have to do manual bootstrap in the first place).