I want to use angular-slider module in my project, I downloaded git from https://github.com/venturocket/angular-slider and added the angular-slider.js and angular-slider.css in my project and included the link in the index page like this
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="../css/angular-slider.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="../js/angular-slider.js"></script>
and added the 'uiSlider' as dependency in app.js
var app = angular.module('app', ['uiSlider', ...]);
As soon as I add 'uiSlider' as dependency in app.js the app does not work. There are no error messages in the console. I tried adding another module in the same way but the same problem occurs.
Is there anything wrong with the way I am including the module in my project? Any help would be appreciated. Thanks in advance.
Related
I've just added Froala to my Angularjs (1.5) project via bower install and it's breaking the unit tests I currently have setup. When I add 'froala' to the angular.module being defined in app.js it breaks the tests, but all of the tests pass when I remove it.
I have Froala configured in an app.js file:
angular.module('app', [ 'froala',....
I'm referencing the local/downloaded files in index.html
<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="bower_components/froala-wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/angular-froala.js"></script>
And this is the error I'm getting:
TypeError: undefined is not an object (evaluating 'ctrl.disableInput')
Here's the Karma configuration and an example test that's passing prior to adding froala.
Is there something in Froala that I need to configure in order to have passing tests?
It was a simple mistake on my part by loading angular-froala within the bower components folder. This part src="bower_components/froala-wysiwyg-editor/js/angular-froala.js" and including it within app.js angular.module('app', [ 'froala',..... I removed both of these references and only have this in the index:
<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />.
<link href="bower_components/froala-wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />.
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>.
I followed this previous stack overflow answer regarding integrating with angular and assumed I needed to include it, but it wasn't necessary.
I have a Ionic app on Android and i want to add an Facebook Login feature using ngCordovaOauth plugin but i get:
0 851065 error Uncaught Error: [$injector:modulerr] Failed to instantiate module
starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordovaOauth due to:
Error: [$injector:nomod] Module 'ngCordovaOauth' is not available! You either misspelled
the module name or forgot to load it. If registering a module ensure that you specify
the dependencies as the second argument.
....
I try to load the plugin according to here. I used bower to load the plugin
bower install ng-cordova-oauth -S
Then I added the line to index.html
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>
After that, i added the dependency to module app.js
angular.module('starter', ['ionic','ngMessages','ngCordova','ngCordovaOauth','ksSwiper','starter.services','starter.controllers'])
It gives the error when i added 'ngCordovaOauth'. I also try to download the ng-cordova-oauth.min.js file manually and add it to www/js folder and added
<script src="js/ng-cordova-oauth.min.js"></script>
to the index.html file after i uninstall via bower. This also didn't work. I also try to remove the Android platform and add it again and didn't work.
I think i try everything that i can do but it seems doesn't work. It should find the ngCordovaOauth but it doesn't. Any help is appreciated.
Thanks in advance.
Edit
index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/swiper/dist/css/swiper.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/swiper/dist/js/swiper.js"></script>
<script src="lib/angular-swiper/dist/angular-swiper.js"></script>
<script src="js/angular-messages.js"></script>
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
I had the same error message, although I did install ng-cordova-oauth correctly and I did not misspell its name.
My problem was that I blindly copied
<script src="../ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>
from ng-cordova-oauth's README file into my index.html, whereas the path was wrong ! Indeed, the right path was the one you specified in your question : lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js!
So, to any person having the same issue, I would suggest checking their ng-cordova-oauth.min.js's path in their index.html.
I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
For each directive it's trying to use from bootstrap, I get something similar to the following:
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
Here're my includes:
<html class="no-js" ng-app="hiringApp">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="layout" content="IRLayout">
<!-- styles IRLayout-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<!-- BootStrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- font-awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="#Url.Content("~/content/css/layout.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/normalize.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/main.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/css/Upload.css")">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/styles.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/site-specific.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/rating.css")">
<!-- Upload -->
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/Upload.css")">*#
<!-- Header Scripts-->
<!-- Jquery & Jquery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="#Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>
<!-- BootStrap -->
<!-- Validate -->
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<!-- Analytics -->
<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<!-- Angular -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="#Url.Content("~/Scripts/app.js")"></script>
<script src="#Url.Content("~/Scripts/controllers.js")"></script>
<script src="#Url.Content("~/Scripts/directives.js")"></script>
<script src="#Url.Content("~/Scripts/filters.js")"></script>
<script src="#Url.Content("~/Scripts/services.js")"></script>
<script>
angular.module("hiringApp").constant("$userProvider", #Model.User.SystemRoles);
angular.module("hiringApp").constant("$jobProvider", '');
</script>
<!-- Upload -->
<script src="#Url.Content("~/content/js/plupload.full.js")"></script>
<script src="#Url.Content("~/content/js/UploadImage.js")"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script src="~/Content/js/audio/irAudioRecorder.js"></script>
#RenderSection("script", required: false)
</head>
Here's my app module:
var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
Here's the error:
GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)
I just wanna post my solution for this error.
include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
apparently the none tpls version doesn't include those templates.
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
for more info rtfm ;)
I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:
If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.
There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.
In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.
I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:
var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
/*
* Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
*/
$httpProvider.interceptors.push('ajaxNonceInterceptor');
...
.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});
var param_start = /\?/;
return {
request : function(config) {
if (config.method == 'GET') {
// Add a query parameter named '_' to the URL, with a value equal to the current timestamp
config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
}
return config;
}
}
});
Once I removed the interceptor, the modal dialogs were showing.
I also had this issue but I was only using the tpls version of ui.bootstrap.
In my case the issue was a cache busting module ngCacheBuster.
In the network tab I could see there was cachebuster parameter at the end of the resource call:
/template/window.html?cb=4889764132
In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.
I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.
I hope this will be helpful to anyone experiencing this problem and using cachebusting.
Include ui.bootstrap.tpls right below ui.bootstrap
make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js
For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:
if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0)
{
console.log('ignoring '+config.url);
return config;
}
Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js
angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);
However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..
I have my application built with ExtJS 4.2.1
My app structure was generated using Sencha Cmd v4.0.1.45.
Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.
This is my resources directory in my app sencha cmd structure:
App.css is a custom CSS
BoxSelect.css is other custom CSS
chooser.css is other custom CSS
famfamfam.css is the CSS that will handle the famfam.png image sprite
font.css is the CSS that comes with AwesomeFont.
The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.
So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Ext Scheduler -->
<script src="lib/js/sch-all-debug.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/jquery.vegas.min.js"></script>
<script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>
<!-- Ext Scheduler -->
<link rel="stylesheet" href="resources/css/sch-all-neptune.css">
<link rel="stylesheet" href="../Content/jquery.vegas.min.css">
<script src="app/Constants.js"></script>
<script src="app/Glyphs.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/boxselect.css">
<link rel="stylesheet" href="resources/css/fonts.css">
<link rel="stylesheet" href="resources/css/famfamfam.css">
<!-- view icons chooser style -->
<link rel="stylesheet" href="resources/css/chooser.css">
</head>
<body></body>
</html>
Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.
Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?
Appreciate any help.
In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.
One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.
I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>
You should not worry so much about the combined payload size of your files, but more about the build process and making sure to reduce HTTP requests as much as possible (1 css, 1 js is all you should have in your home.html). This is more important. Also minify everything. I suggest you check out ng-boilerplate. Its a starting point for angular apps and has most of the best practices you should be employing.
https://github.com/joshdmiller/ng-boilerplate
Make sure to read all the readme files at the various directory levels.