I want to use "angular-dimple" library in my app, and the dependency injection isn't working. In the homepage of the library, they say I just need d3 and dimple links included in the html and just include 'angular-dimple' as a dependency in my module declaration. The thing is that doesn't work, as I get this error:
"...Module 'angular-dimple' 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."
My angular module declaration and html headers are as follows:
var smsApp = angular.module('smsApp', ['angular-dimple', 'ui.bootstrap']);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solidarity Message Service</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/sms-blaster.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="angular-1.5.8/angular.js"></script>
<script src="angular-1.5.8/angular-animate.js"></script>
<script src="angular-plugins/ui-bootstrap-tpls-2.2.0.js"></script>
<!-- Dimple graphics dependencies-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<script src="javascripts/sms-blaster.js"></script>
</head>
What am I missing here??
P.S.: I have already tried putting d3 and dimple script links before angular in the html , and I've swapped the priority in which I'm refering angular-dimple and ui-bootstrap in the dependency array of angular.module.
looks like the library is missing from your HTML. add angular-dimple.js (after the Angular import)
<script src="../assets/js/lib/angular-dimple.js"></script>
Related
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.
I am working on MEAN Stack application. I want to use Bootstrap Material Design CSS styles to my single page application but routing is not working when using mdb.min.css .what is the solution to avoid this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Application</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-view></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript" src="js/routingCtrl.js"></script>
<script type="text/javascript" src="js/loginCtrl.js"></script>
</body>
</html>
if i add mdb.min.css the routing page is not visible in ng-view.but if i remove mdb.min.css the page is visible without styling
Try using the CDN by adding it to the head tags of your root index.html of your angular app like this.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
If it doesn't work please make your issue more elaborate.
I am using angular material package in my angular application. I get the error
TypeError: Object doesn't support property or method 'setHost'
at Anonymous function (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js:22:466)
at r.prototype.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:132:59)
at r.prototype.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:76)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:87:442)
at T (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:92:50)
at w.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:93:78)
I can't understand the issue and hence can't find any way to resolve this. Although the functionalities of application are working fine except this error keeps coming.
Sharing head tag of my index.html below:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resource Allocation Tool</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
Previously I was using version 1.4.8 of angular and 1.5.5 of angular-animate, making the version of angular and angular-animate same as 1.4.8 worked.
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
I used 'sencha generate app' to create my Extjs mvc structure. I can't figure out where to add my custom css so that it is used in the build. In Touch, I would put it in app.json. I've looked in .sencha but can't find any obvious place. I also want it to work with my index.html while testing. Do I just put it in my index.html?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ? -->
<link rel="stylesheet" href="resources/MyApp.css">
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
</html>
Thanks!
In the <HEAD> section is where you will put your CSS Style Sheets and SCRIPT tags in general.
It is recommended to put your <SCRIPT> tags at the bottom of the page (before </body>) because the page don't load the rest of the page until the script have finished loading.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ! -->
<link rel="stylesheet" href="resources/MyApp.css">
</head>
<body>
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<script src="app/app.js"></script>
</body>
</html>