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).
Related
I am trying to use angular-chart.js in my application, though i'm getting the following error:
Error: [$injector:nomod] Module 'chart.js' is not available
I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.
Here are the versions of the libraries i've installed:
Here is my directory structure:
app/
----libs/
------Chart.js/
----------src/
------------chart.js
------angular-chart.js/
--------dist/
----------angular-chart.js
----------angular-chart.css
--index.html
Here is the link to the libraries installed with bower in my index.html:
<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">
I am trying to inject chart.js module into my controller like so:
angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }
Any suggestions? Thanks!
The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.
Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.
Can you provide a complete repro step using this template?
I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.
Next, you state
I am trying to inject chart.js module into my controller
The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.
The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.
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 working with an existing application that I would like to add angular to. The application is using a custom proprietary SPA framework + dojo. The application is built with mainly dojo modules and heavily utilizes AMD modules.
I have imported angular in the head with
<script type="text/javascript" src="lib/angular/angular.js"></script>
I have also added
<html ng-app="myApp">
<script>
angular.module('myApp', [])
</script>
to my index.html.
I have also tried manually bootstrapping via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
but still
{{1+1}}
Does not evaluate. It remains as {{1+1}}
The only way I get get it to (sort of) work is in my partial view (rendered inside body of index.html) and I manually bootstrap the application via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
But as soon as I leave the page and come back, the bootstrapping is gone. {{1+1}} shows as {{1+1}} not 2. If I run the above code again, I get an error saying document is already bootstrapped.
No errors are thrown in console..
I am not sure what to try next. Any help? Thanks
Is the page content dynamic, are the other frameworks adding HTML to the page that has Angular syntax in then you are expecting to be evaluated? If so that is the issue.
Please note that Angular is a fully featured framework and that frameworks generally conflict with each other. For Angular to work you need to add Angular code to the page using Angular APIs, such as ng-include, other directives, or a controller and manually compile the HTML being added.
When is the partial view actually rendered?
Unless you actually pass the partial through Angular's $parse service (which happens automatically on bootstrap), Angular can't evaluate the expressions. So, if you are adding the partial to the DOM after the bootstrap, Angular will never process it.
using dojo, you would need to pass the content through the $parse service first, i.e.:
require(["dojo/html"], function(){
content = $parse(someAngularContent);
html.set(node, content);
});
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
An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.