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?
Related
I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me.
I am following the README file on the angular-velocity github page. But when I run my application, I am getting an error that I am missing the module.
Here is what my module declaration looks like:
var appModule = angular.module('app.module', ['module-one', 'module-two', 'angular-velocity']);
...
The error I get now is:
Module 'angular-velocity' is not available! You either misspelled the module name or forgot to load it.
Further reading I see this:
When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.
Ok, so I installed (via npm) the velocity library. How do I include that in my list of dependancies?
Also this:
angular-velocity assumes that the Angular core and the additional ngAnimate module is loaded
So does that mean I need something like this?
var appModule = angular.module('app.module', ['module-one', 'module-two', 'ngAnimate', 'angular-velocity']);
But in the example, all that is listed is angular-velocity.
Nowhere in my project do I see individual script tags. I am assuming the project just reads the dependancies and grabs them from the package.json file? (Completely guessing).
This does not happen:
<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/velocity/velocity.ui.min.js"></script
<script src="bower_components/angular-velocity/angular-velocity.min.js"></script>
Thank you for any suggestions!
You can include velocity using CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
or using bower
bower install velocity
and add its references in the header from default folder bower_components.
If instead you use npm you can use:
npm install velocity-animate
and add its references in the header from default folder node_modules.
I'm trying to implement an example of iconPicker so the files which I should import are:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min.js"></script>
I installed the component with bower
<script src="#routes.Assets.versioned("bower_components/angular/angular.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
the problem is when I try to change the cdn link to local one I can't found this bootstrap-tpls.min.js I found it in angular-bootstrap and it didn't work for me there is any difference?
Please Install angular bootstrap
bower install angular-bootstrap
Ref: angular ui bootstrap doc
Please see this line.
Note: do not install 'angular-ui-bootstrap'. A separate repository -
bootstrap-bower - hosts the compiled javascript file and bower.json In
above link.
angular-ui-bootstrap : https://github.com/angular-ui/bootstrap-bower
This repository contains required ui-bootstrap.js and ui-boostrap-tpls.js files. basically its bower repository to hold Angular UI Bootstrap.
we get this files from this command bower install ui-bootstrap
ui-bootstrap-tpls.js file contains ui-bootstrap.min.js + html templates.
angular-bootstrap : https://github.com/angular-ui/bootstrap.
This is main repository for the angular bootstrap.
Here you see this line in source <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls.js"></script> because this file contains all html + template code which used to show example of bootstrap in angular. So its reuse of ui-bootstrap-tpls.js.
I suggest please install bootstrap using bower install angular-bootstrap
and remove angular-ui-bootstrap folder.
Ref: Please see this link. It shows the difference clearly. https://stackoverflow.com/a/19820670/2681997
I hope this will clear your doubt.
Thanks
Bonus: Use this to Tool for installing bower dependencies that won't include entire repos in your project.
bower installer
I am making use of yeoman angular fullstack generator
i want to install admin-lte-angular theme in my app
i have installed it using bower
but i don't know how install it in angular app
please help to install it
Add the css and the javascript libs to the index.html:
<link href="bower_components/admin-lte-angular/admin-lte-angular.css">
// angular.js must be loaded first!
<script src="bower_components/admin-lte-angular/admin-lte-angular.js"></script>
Add 'admin-lte-angular' to the module dependencies:
angular.module('dashboardApp', [ 'admin-lte-angular' ])
If you are using this https://github.com/sarahhenderson/admin-lte-angular
Note that the author stated it is a working in progress. So I don't think it is a stable code to use.
I have looked at this question on stackoverflow and followed all the answers, but still i can not get ui-bootstrap to work. I have downloaded angular-ui via bouwer and included in my index.html, after tried to inject it in app module, but then the app breaks.
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
and in app.js
angular.module("qanda",['ui-bootstrap'])
.controller('mainCtrl',['$scope','$http',function($scope,$http){
$scope.testList = [];
Github: https://github.com/khanharis87/quizz_game
You should use the angular version which goes with the bootstrap one,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="app.js"></script>
You are writing the module name wrong. It should be 'ui.bootstrap'. So the module should be like this:
angular.module('qanda', ['ui.bootstrap'])
And be sure that you include bootstrap css files, but not js files. Use angular-ui directives.
Just in case, when you are installing the bootstrap-ui from bower make sure to use --save at your main folder like so
bower install angular-bootstrap --save
if you use bower's "--save" you wouldn't need to add in the css or script tags in the header or at the end of the body yourself .. bower does it automatically (and correctly) for you.
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.