My pages are not coming by using ng-view in angular.js.When i am typing the url http://localhost:8888/dashboard the pages should come.I am explaining my code below.
view/dashboard.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body ng-view>
</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>
public/app/routes/dashboard-route.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/dashboard',{
templateUrl:'app/view/dashboard-partial.html',
controller:'dashboard-controller'
});
}
])
public/app/controller/dashboard-controller.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
$.ajax({
type:'GET',
url:"/getAdminData",
success: function(data){
$scope.firstname=data.firstname;
$scope.lastname=data.lastname;
$scope.adminImage=data.image;
},
error: function(data){
console.log(data);
}
});
});
Please help me to resolve this issue so that the template will successfully display.I am also using node.js for client server architecture.
It looks like your dashboad-route.js is using templateUrl:'app/view/dashboard-partial.html', but the name of your HTML file is view/dashboard.html. Change templateUrl to app/view/dashboard.html (or whatever the correct path is) and see if that fixes things.
One problem is that if you use $.ajax to do scope changes angular is unaware of them so you need to use $apply() to tell angular to run digest scycle.
For this reason I suggest you don't use $.ajax and use angular $http
Related
I'm getting this error:
I'm not sure what I have wrong in my index.html. I am currently developing an app on ionic1 and this error is generated when I try to inspect my code by safari. I have read that this error occurs when a label is not closed, but in my case I do not know what I have wrong. What can be?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json" />
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<!-- css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet" type="text/css"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="lib/waves/css/waves.css" />
<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.css" />
<!-- 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/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngStorage/js/ngStorage.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constantes.js"></script>
<!-- libs -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/swiper/js/swiper.js"></script>
<script src="lib/prefixfree/js/prefixfree.min.js"></script>
<!--<script src='lib/ng-cordova-oauth.min.js'></script>-->
<!--<script src="http://maps.google.com/maps/api/js?key=AIzaSyANNBvPehUvWndNs7zmVqWa7ys1DBTQnDs"></script>-->
<!-- Controladores TinApp -->
<script src="js/controllers/login/loginController.js"></script>
<!--<script src="js/controllers/wizard/ubicacionTinController.js"></script>-->
<script src="js/controllers/wizard/instructivoTinController.js"></script>
<script src="js/controllers/wizard/recuperarContrasenaController.js"></script>
<script src="js/controllers/registros/registrarUsuariosController.js"></script>
<script src="js/controllers/ofertas/ofertasController.js"></script>
<script src="js/controllers/ofertas/descripcionOfertaController.js"></script>
<script src="js/controllers/negocios/negocioController.js"></script>
<!--<script src="js/controllers/negocios/productosController.js"></script>
<script src="js/controllers/negocios/descripcionProductoController.js"></script>
<script src="js/controllers/favoritos/favoritosController.js"></script>
<script src="js/controllers/favoritos/descripcionFavoritoController.js"></script>-->
<script src="js/controllers/cupones/cuponesController.js"></script>
<script src="js/controllers/cupones/misCuponesController.js"></script>
<!--<script src="js/controllers/tins/misTinsController.js"></script>-->
<!--<script src="js/controllers/ajustes/ajustesController.js"></script>-->
<script src="js/controllers/ubicaciones/ubicacionesController.js"></script>
</head>
<body ng-app="tinApp">
<ion-nav-view class="viewport_inicial"></ion-nav-view>
</body>
</html>
As stated in the HTML specification:
The title element must not be empty.
Just add a title:
<title>tinApp</title>
"Make sure window.Snap is defined or supply your own with SnapConstructorProvider.use(MySnap)."
That's what I have when I'm trying to use angular-snap. I followed what they said in github but still didn't work. Can I have some help ? I watched the angular-snap code and I saw a test :
if(angular.isUndefined(S)) {
throw new Error('Snap constructor is not defined. Make sure ' +
'window.Snap is defined or supply your own with ' +
'SnapConstructorProvider.use(MySnap).');
}
When I put a console.log of angular.isUndefined, it returns true but I don't know why.
Here the html :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<title>AO</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/angular-snap.min.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<snap-drawer>
<p>I'm a drawer ! I maybe I've got some sweet navigation links.</p>
</snap-drawer>
<snap-content>
<p>Hello! I'm your main content!</p>
</snap-content>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/angular-snap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Javascript code :
var app = angular.module('myApp', ['snap']);
Thanks for help.
You have to include snap.js library to your index.html page
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.3/snap.min.js"></script>
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');
I have downloaded and customized a scroll bar (with text), but I can't integrate it with my website.
Basically this is the code for the scroll bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery custom scrollbar demo</title>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</head>
And I need to put in a page with this code
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/sprites.js"></script>
<script type="text/javascript" src="js/googleMap.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
It gives an error:
$("#content_1").mCustomScrollbar is not a function
You need to add the "jquery.mCustomScrollbar.js" to the page.
And the "jquery.mCustomScrollbar.css" to get the same styles.
Now add at the first line:
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
You must add the jquery custom scrollbar, before you run the "$("#content_1").mCustomScrollbar()" function, and after the jquery library.
<script src="jquery.mCustomScrollbar.js"></script>