I'm relatively new to meanstack and i'm trying to include an angular-gantt chart in a project. i have followed all the steps according to the documentation on github but i keep getting some errors. Here's a brief overview of the steps i took.
Install the angular-gantt chart using
bower install angular-gantt --save
I wiredep the dependencies using:
grunt wiredep
I added the asset/angular-gantt.js and the asset/gant.css to the config/env/all.js file generated by yo meanjs
I Include the module gantt to my Angular app modules in the publlic/config.js file
5.I also ran grunt in the angular-gantt folder to build the angular-gantt.min.js and angular-gantt.js
which i realised also included angular-gantt.js.map and angular-gantt.min.js.map
I then included the directive in my html
Finally i included the operations in my controller...
But i keep on getting the following errors
TypeError: undefined is not a function
at new controller (http://localhost:3000/lib/angular-gantt/assets/angular-gantt.js:143:43)
at Object.invoke (http://localhost:3000/lib/angular/angular.js:4118:17)
at extend.instance (http://localhost:3000/lib/angular/angular.js:8312:21)
at http://localhost:3000/lib/angular/angular.js:7564:13
at forEach (http://localhost:3000/lib/angular/angular.js:347:20)
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:7563:11)
at http://localhost:3000/lib/angular/angular.js:7824:13
at processQueue (http://localhost:3000/lib/angular/angular.js:12901:27)
at http://localhost:3000/lib/angular/angular.js:12917:27
at Scope.$eval (http://localhost:3000/lib/angular/angular.js:14110:28)
and
Error: [$compile:multidir] Multiple directives [ganttTaskProgress, progress] asking for template on: <div class="gantt-task-progress" ng-style="getCss()" ng-class="progress.classes" ng- if="task.progress !== undefined" progress="task.progress"> http://errors.angularjs.org/1.3.1/$compile/multidir?p0=ganttTaskProgress&p1…task.progress%20!%3D%3D%20undefined%22%20progress%3D%22task.progress%22%3E
at http://localhost:3000/lib/angular/angular.js:80:12
I can solve your second error. Gant has a directive called 'ganttTaskProgress' which has an attribute called 'progress'. Bootstrap has a directive called 'progress' which matches attributes. Angular therefore throws an error, as it can't apply both templates to the element. If you're not using bootstrap then have a search through your libraries and see if there's a directive called 'progress', then change its name or comment it out.
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 read
JHipster After creating sample entity nothing is shown in the browser
.In my case bower seem fine. It have the angularjs lib
(When use bower list). Why it still can't reference to angularjs? If you have any suggestion on where to investigate. Thanks.
Can you provide the output from your browser's JavaScript console? Look for a syntax error.
Also you can try
grunt wiredep
in order to inject your bower dependencies into your source code (normally index.html).
Your index.html has no dependencies. You can copy them from sample-app.
Maybe a real newbie question, but anyway.
I'm working on a Angular script which I'm testing in JsFiddle. Therefore the framework is set to Angular JS 1.2.1 (the highest one available there). Within the script I want to use Angular-UI bootstrap for typeahead and other features.
When I add the dependency to my module declaration I get an error.
angular.module('MyModule', ['ui.bootstrap'])
Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available!
Question: On the left side I can add references to external libraries but I'm kinda too stupid to find the URI that is used to reference Angular-UI. Any idea?
I want to use Angularjs Bootstrap UI in my application.after angular.js reference i include these files in my index pages :
and in my application app.js include this line :
var ap = angular.module('ap', ['ngRoute','ui.bootstrap']).config(negsotimeRouter);
but i get this error when try to see the page :
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=negsotime&p1=Error…arjs.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3DErro...<omitted>...5) angular.js:36
with the following link
Error Link
You are missing the script reference to the Angular UI Bootstrap script itself. You need to download it and make a reference to it.
For instance the latest version: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-0.6.0.min.js
All versions here: https://github.com/angular-ui/bootstrap/tree/gh-pages
As you can see, the angular ui.bootstrap module is defined in that script.
This is an old post, but I will post what worked for me.
I downloaded the js file from https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-2.3.0.min.js
Placed it in a directory with my other angular scripts
Made a reference to it in the Index.html file using a <Script> tag.
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).