Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.
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.
Hi i would like to use angular-snap into my j-hipster project.
I've installed it with bower in my project root, then I added the module in j-hipster app.js
angular.module('smeshApp', [....., 'snap']);
then i included in my index.html
<script src="bower_components/angular-snap/angular-snap.js"></script>
<script src="bower_components/snapjs/snap.js"></script>
finally i tried to use the directive snap-drawer and snap-content
but doesn't work and also my j-hipster app doesn't work anymore.
where did I go wrong?
I've developed a commenting plugin for Umbraco that uses angular. As such the main angular app for the site has to inject the comment systems module for it to work.
E.g.
var theirSite = angular.module('someApp', []);
Injected
var theirSite = angular.module('someApp', ['theCommentSystemModule'];
In my comment system,
angular.module('theCommentSystemModule']....;
Is there any way my module can automatically detect the angular app and inject itself without the code for the site having to be updated? I want it to just work with nothing but the script link.
For Example: say these are the scripts
<script src="...angular.js">
<script src="...services.js">
<script src="...directives.js">
<script src="...commentsPlugin.js">
<script src="...theirApp.Js">
So what I basically need, is some kind of callback from angular when the app is being bootstrapped, so I can inject the comment systems module into the app as a depedency module so that it will initialize in their bootstrap layer.
Or maybe, alternatively, I bootstrap the page myself in the plugin for itself? Can there be two apps running at once, e.g. if I bootstrap and their app also bootstrap's .
It can be done by using undocumented requires module property. This way new dependencies can be added to the module after it was defined but before it was bootstapped.
Since 'ng' is the only known and defined module ATM (it also has already defined requires array), tamper it:
angular.module('ng').requires.push('theCommentSystemModule');
Though it is more appropriate to let the users load the module by themselves.
Have been trying to use toastr in my AngularJS app:
app.module("MyApp", ['toastr']);
But it doesn't work, the module toastr can not be found! I thought toastr were a AngularJS module?
Anyone who knows how to load the module, or if there are any Angular-directives I can use?
Without seeing the instantiation of app, in your example, there's no way for me to know if you're actually loading your dependencies correctly; so I'll take you through the steps to load it from scratch (Source: here).
There are a few things you have to do to get toastr working on AngularJS:
Download the angular-toastr distribution.
add the following to your index.html (effectively wherever you're loading all your scripts):
<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="angular-toastr.tpls.js"></script>
Add toastr to the app's modules (not each controller, or a service. Add it to the app). Your app.js file:
angular.module('myApp', ['toastr']).
No, toastr is not an Angular module. There are various ports of toastr to Angular including angular-toastr or AngularJS-Toaster.
You don't need to inject it as a dependency unless you are using angular port of toastr (eg: angular-toastr). For the original toastr, just including the .js and .css, and should be fine.
You don't have to add toastr as a dependency in your module. You just need to include toastr.js and toastr.css files in your project and you can then toastr like this
toastr.success("This is a success message");
Recently, I have an error regarding to my pagination that can't be updated after filter. Luckily, this was managed, however, now I'm dealing with a conflict regarding to the usage of ui-bootstrap. As I have my project, Im using,
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Based on the codes that I'm relaying with they used,
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
***Here's the thing, I do have as well a datepicker in my codes. But when I used the
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
this datepicker doesn't work. If now I will switch to my formerly ui-bootstrap
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
, now the pagination after filter can't be used but the datepicker will work. Any ideas how to solve this or what I'm going to do? thanks!
From what I understand, your problem is due to directive conflict; e.g. you have a custom directive defined called "datepicker":
angular.module('App').directive('datepicker', ...
That's going to cause problems because UI-Bootstrap also defines a directive with the same name. The simplest solution would be to simply exclude the datepicker module from UI-Bootstrap.
https://angular-ui.github.io/bootstrap/
On their website, you can choose "create a build". It will allow you to download a version of UI-Bootstrap custom-tailored to your needs by adding and removing certain modules, like the datepicker.
Then you will drop the file into your HTML:
<script src="path/to/your/ui-bootstrap.min.js"></script>
I notice you are using Bower to manage your dependencies. Unfortunately, Bower can't work with a custom UI-Bootstrap build; you'll have to manage the file yourself (put it in a subdirectory, like "assets/").