I am trying to implement web push in a PWA made in ReactS. It even achieved some success, but I'm having trouble updating the service worker, especially on iOS. When I press the button to enable notifications, it takes a while to update the SW and then register it and hide the notification message. That's on Android, because on iOS it doesn't work at all.
My files
My service-worker-custom.js
console.log('Service Worker Custom');
importScripts('://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
firebase.initializeApp({
messagingSenderId: "444099730124"
});
const messaging = firebase.messaging();
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('pwa').then(function (cache) {
return cache.addAll([
'/',
'/index.html',
]);
})
);
});
self.addEventListener('fetch', function (event) {
// console.log(event.request.url);
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
})
);
});
My index.html
<!doctype html>
<html lang="pt-br">
<head>
<title>PWA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capaz" content = "yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Yeapps PWA">
<meta name="description" content="Yeapps PWA">
<!-- Add meta theme-color -->
<meta name="theme-color" content="#007bff" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.min.css">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/icons/192X192.png">
<link rel="apple-touch-icon" href="%PUBLIC_URL%//icons/icon-152x152.png"> -->
<link rel="manifest" href="./manifest.json">
<!-- <link rel="shortcut icon" href="./icons/192X192.png"> -->
<link rel="shortcut icon" href="./icons/Icon-16.png">
<link rel="shortcut icon" href="./icons/Icon-20.png">
<link rel="shortcut icon" href="./icons/Icon-29.png">
<link rel="shortcut icon" href="./icons/Icon-32.png">
<link rel="shortcut icon" href="./icons/Icon-40.png">
<link rel="shortcut icon" href="./icons/Icon-48.png">
<link rel="shortcut icon" href="./icons/Icon-50.png">
<link rel="shortcut icon" href="./icons/Icon-55.png">
<link rel="shortcut icon" href="./icons/Icon-57.png">
<link rel="shortcut icon" href="./icons/Icon-58.png">
<link rel="shortcut icon" href="./icons/Icon-60.png">
<link rel="shortcut icon" href="./icons/Icon-64.png">
<link rel="shortcut icon" href="./icons/Icon-72.png">
<link rel="shortcut icon" href="./icons/Icon-76.png">
<link rel="shortcut icon" href="./icons/Icon-80.png">
<link rel="shortcut icon" href="./icons/Icon-87.png">
<link rel="shortcut icon" href="./icons/Icon-88.png">
<link rel="shortcut icon" href="./icons/Icon-100.png">
<link rel="shortcut icon" href="./icons/Icon-114.png">
<link rel="shortcut icon" href="./icons/Icon-120.png">
<link rel="shortcut icon" href="./icons/Icon-128.png">
<link rel="shortcut icon" href="./icons/Icon-144.png">
<link rel="shortcut icon" href="./icons/Icon-152.png">
<link rel="shortcut icon" href="./icons/Icon-167.png">
<link rel="shortcut icon" href="./icons/Icon-172.png">
<link rel="shortcut icon" href="./icons/Icon-180.png">
<link rel="shortcut icon" href="./icons/Icon-196.png">
<link rel="shortcut icon" href="./icons/Icon-256.png">
<link rel="shortcut icon" href="./icons/Icon-512.png">
<link rel="shortcut icon" href="./icons/Icon-1024.png">
<link rel="apple-touch-icon" sizes="16x16" href="./icons/Icon-16.png">
<link rel="apple-touch-icon" sizes="20x20" href="./icons/Icon-20.png">
<link rel="apple-touch-icon" sizes="29x29" href="./icons/Icon-29.png">
<link rel="apple-touch-icon" sizes="32x32" href="./icons/Icon-32.png">
<link rel="apple-touch-icon" sizes="40x40" href="./icons/Icon-40.png">
<link rel="apple-touch-icon" sizes="48x48" href="./icons/Icon-48.png">
<link rel="apple-touch-icon" sizes="50x50" href="./icons/Icon-50.png">
<link rel="apple-touch-icon" sizes="55x55" href="./icons/Icon-55.png">
<link rel="apple-touch-icon" sizes="57x57" href="./icons/Icon-57.png">
<link rel="apple-touch-icon" sizes="58x58" href="./icons/Icon-58.png">
<link rel="apple-touch-icon" sizes="60x60" href="./icons/Icon-60.png">
<link rel="apple-touch-icon" sizes="64x64" href="./icons/Icon-64.png">
<link rel="apple-touch-icon" sizes="72x72" href="./icons/Icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./icons/Icon-76.png">
<link rel="apple-touch-icon" sizes="80x80" href="./icons/Icon-80.png">
<link rel="apple-touch-icon" sizes="87x87" href="./icons/Icon-87.png">
<link rel="apple-touch-icon" sizes="88x88" href="./icons/Icon-88.png">
<link rel="apple-touch-icon" sizes="100x100" href="./icons/Icon-100.png">
<link rel="apple-touch-icon" sizes="114x114" href="./icons/Icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./icons/Icon-120.png">
<link rel="apple-touch-icon" sizes="128x128" href="./icons/Icon-128.png">
<link rel="apple-touch-icon" sizes="144x144" href="./icons/Icon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./icons/Icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="./icons/Icon-167.png">
<link rel="apple-touch-icon" sizes="172x172" href="./icons/Icon-172.png">
<link rel="apple-touch-icon" sizes="180x180" href="./icons/Icon-180.png">
<link rel="apple-touch-icon" sizes="196x196" href="./icons/Icon-196.png">
<link rel="apple-touch-icon" sizes="256x256" href="./icons/Icon-256.png">
<link rel="apple-touch-icon" sizes="512x512" href="./icons/Icon-512.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="./icons/Icon-1024.png">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js"></script>
<!-- <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> -->
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
firebase.initializeApp({
apiKey: "AIzaSyDDxGUQxbWUhRH483KpbroAVprlYa1LQPg",
authDomain: "yeapps-pwa.firebaseapp.com",
databaseURL: "https://yeapps-pwa.firebaseio.com",
projectId: "yeapps-pwa",
storageBucket: "yeapps-pwa.appspot.com",
messagingSenderId: "444099730124",
appId: "1:444099730124:web:d43ba455127c07e6694069"
});
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker-custom.js').then(function (registration) {
firebase.messaging().useServiceWorker(registration);
console.log('Worker registration successful', registration.scope);
}, function (err) {
console.log('Worker registration failed', err);
}).catch(function (err) {
console.log(err);
});
} else {
console.log('Service Worker is not supported by browser.');
}`enter code here`
</script>
</body>
</html>
Unfortunately, Notifications API is not supported currently on iOS https://caniuse.com/#feat=notifications.
Related
I use vue.js version of coreui template, but I find difficulty in inserting a custom favicon for the present project.
file path: "coreui-free-vue-admin-template/public/index.html"
<!DOCTYPE html>
<!--
* CoreUI Vue.js Admin Template
* #version v4.2.0
* #link https://coreui.io/vue/
* Copyright (c) 2021 creativeLabs Łukasz Holeczek
* License (https://coreui.io/pro/license)
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
<meta name="description" content="CoreUI Vue.js Admin Template">
<meta name="author" content="creativeLabs Łukasz Holeczek">
<title>CoreUI Vue.js Admin Template</title>
<!-- favicons for all devices -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I tried changing the image path in the above index.html but no luck any suggestions will be helpful.
i am using laravel and vuejs to develop single page application in my index.blade.php i am invoke app element vuejs
this is my index.blade.php
#extends('layout.header')
<div id="app" v-cloak v-on:shownav="shownavO()">
<nav_bar v-if="hide" :authType="authType" ></nav_bar>
<menuuu v-if="hide" :authType="authType" ></menuuu>
<router-view class="v-cloak--hidden"></router-view>
</div>
#extends('layout.footer')
<script src="{{asset('js/app.js')}}"></script>
in my layout.header it is a blade file i include css file
<!DOCTYPE html>
<html class="loading" lang="{{$lang}}" data-textdirection="{{$lang=='ar'?'rtl':'ltr'}}" id="app">
<!-- BEGIN: Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>munasbaty</title>
<link rel="apple-touch-icon" href="{{url('/')}}/app-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="{{url('/')}}/app-assets/images/ico/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<!-- BEGIN: Vendor CSS-->
#if(!isset($lang)||$lang=='en')
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/shepherd-theme-default.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/colors.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/semi-dark-layout.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/dashboard-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/plugins/tour/tour.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/css/style.css">
#endif
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body>
when update the page or when open the project the application It appears this way in the beginning
I have implemented a print function that allow the user to print a portion of a page.
This is the code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<meta charset="utf-8">
<title>MegaMark - Reporting App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="window.print();">${printContents}</body>
</html>`
);
popupWin.document.close();
}
The function runs properly, It open a new window with the content properly rendered.
The problem is that when I save the content as PDF file using "Microsoft print to PDF" as printer or "PDF Creator" , the PDF is not applying all the css properly...
I don't know if it is an angular problem or css problem...
Thanks to support
It's entirely possible I'm doing something stupid ...
Full stack trace of the Error
Error: [ng:btstrpd] App Already Bootstrapped with this Element < html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths ng-scope mdl-js js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache
This Error is occuring in my index.html file.by default i route to login.html.it goes on continous loop.so many ng-view are getting created.
this is my script.js and index.html
// create the module and name it app
var app = angular.module('app', ['ngRoute','luegg.directives']);
// configure our routes
app.factory("Data", function(){
var pagesData = {};
var loginData = {};
var data = {};
// var setPageName = function(x){
// pagesData.pageName = x;
// console.log(x);
// };
//
// var setPageId = function(x){
// pagesData.pageId = x;
// console.log(x);
// };
// var getPageData = function(){
// return pagesData;
// };
// return {pageData : pagesData.pageName};
return {
getpageData : function () {
console.log(pagesData);
return pagesData;
},
setPageName : function (name) {
pagesData.pageName = name;
console.log("1111111111111");
console.log(pagesData);
},
setPageId : function (id) {
pagesData.pageId = id;
console.log("1111111111111");
console.log(pagesData);
},
setUserName : function (name) {
loginData.userName = name;
console.log("1111111111111");
console.log(pagesData);
},
setUserEmail : function (mail) {
loginData.userEmail = mail;
console.log("1111111111111");
console.log(pagesData);
},
getLoginData : function () {
console.log(pagesData);
return loginData;
}
}
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login-2.html',
controller : 'loginCtrl'
})
.when('/page', {
templateUrl : 'pages.html',
controller : 'myPagesCtrl'
})
.when('/try', {
templateUrl : 'try.html',
controller : 'myctrl'
});
});
app.controller('myPagesCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('myctrl', function($scope) {
$scope.message = 'Look! I am an about page.';
});
app.controller('mainController', function($scope,$location) {
scope.message = 'Look! I am an about page.';
});
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title> Monarch UI - Bootstrap Frontend & Admin Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-blue.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/images/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/images/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/images/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../assets/images/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../assets/images/icons/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/bootstrap/css/bootstrap.css">
<!-- HELPERS -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/animate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/backgrounds.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/boilerplate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/border-radius.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/grid.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/page-transitions.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/spacing.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/typography.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/utils.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/colors.css">
<!-- ELEMENTS -->
<link rel="stylesheet" type="text/css" href="../../assets/elements/badges.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/buttons.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/content-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/dashboard-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/forms.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/images.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/info-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/invoice.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/loading-indicators.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/menus.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/panel-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/response-messages.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/responsive-tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/ribbon.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/social-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tile-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/timeline.css">
<!-- ICONS -->
<link rel="stylesheet" type="text/css" href="../../assets/icons/fontawesome/fontawesome.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/linecons/linecons.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/spinnericon/spinnericon.css">
<!-- WIDGETS -->
<link rel="stylesheet" type="text/css" href="../../assets/widgets/accordion-ui/accordion.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/calendar/calendar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/carousel/carousel.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/justgage/justgage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/morris/morris.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/piegage/piegage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/xcharts/xcharts.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/chosen/chosen.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/colorpicker/colorpicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datatable/datatable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker-ui/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dialog/dialog.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropdown/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropzone/dropzone.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/file-input/fileinput.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch-alt.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/ionrangeslider/ionrangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jcrop/jcrop.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jgrowl-notifications/jgrowl.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/loading-bar/loadingbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/maps/vector-maps/vectormaps.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/markdown/markdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/modal/modal.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-select/multiselect.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-upload/fileupload.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/nestable/nestable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/noty-notifications/noty.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/popover/popover.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/pretty-photo/prettyphoto.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/progressbar/progressbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/range-slider/rangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slidebars/slidebars.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slider-ui/slider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/summernote-wysiwyg/summernote-wysiwyg.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tabs-ui/tabs.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/theme-switcher/themeswitcher.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/timepicker/timepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tocify/tocify.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tooltip/tooltip.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/touchspin/touchspin.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/uniform/uniform.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/wizard/wizard.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/xeditable/xeditable.css">
<!-- SNIPPETS -->
<link rel="stylesheet" type="text/css" href="../../assets/snippets/chat.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/files-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/login-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/notification-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/progress-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/todo.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/user-profile.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/mobile-navigation.css">
<!-- APPLICATIONS -->
<link rel="stylesheet" type="text/css" href="../../assets/applications/mailbox.css">
<!-- Admin theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/layout.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/color-schemes/default.css">
<!-- Components theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/default.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/border-radius.css">
<!-- Admin responsive -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/responsive-elements.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/admin-responsive.css">
<!-- JS Core -->
<script type="text/javascript" src="../../assets/js-core/jquery-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-widget.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-mouse.js"></script>
<script type="text/javascript" src="../../assets/widgets/interactions-ui/sortable.js"></script>
<script type="text/javascript" src="../../assets/jquery.ns-autogrow/dist/jquery.ns-autogrow.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-position.js"></script>
<!--<script type="text/javascript" src="../../assets/js-core/transition.js"></script>-->
<script type="text/javascript" src="../../assets/js-core/modernizr.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-cookie.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="../../assets/angular/app.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/angular/page-animations.css">
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/myPagesController.js"></script>
<script type="text/javascript" src="scripts/about.js"></script>
<script type="text/javascript" src="scripts/loginController.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
<script type="text/javascript" src="scripts/chosen-sort.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-2.4.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen-demo.js"></script>
<script type="text/javascript" src="../../assets/widgets/accordion-ui/accordion.js"></script>
<script type="text/javascript" src="../../assets/angularjs-scroll-glue/src/scrollglue.js"></script>
<script type="text/javascript" src="../../assets/angular-xeditable/js/xeditable.js"></script>
<script type="text/javascript" src="../../assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard-demo.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/dropzone/dropzone.js"></script>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/tabs/tabs.js"></script>
<script type="text/javascript" src="../../assets/widgets/parsley/parsley.js"></script>
</head>
<body>
<div ng-view>
</div>
<!-- <button><i class="fa fa-home"></i> Home</button>
<i class="fa fa-shield"></i> About -->
</body>
</html>
Your issue is this:
.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
})
You don't need to specify 'index.html' here. index.html will be loaded by your server. You need to pass what template file to load into the ng-view that is in that index.html when the '/' path is detected.
edit: As mentioned in my comments. You also should only have 1 ng-app directive in your application. This directive bootstraps angular and is only needed once.
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css