I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.
The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:
HTML INDEX:
<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link ng-href="{{style}}" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-controller='SettingsCtrl'>
<ion-nav-view></ion-nav-view>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</body>
</html>
HTML VIEW:
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Accessibility Views
</div>
<select ng-model='option' ng-change='changeView(option)'>
<option ng-selected='style'>Plain</option>
<option>Larger Text</option>
<option>Inverted Colours</option>
</select>
</label>
</div>
CONTROLLER:
.controller('SettingsCtrl', function($scope, Settings) {
$scope.style = Settings.style;
$scope.changeView = function(newView) {
Settings.changeView(newView);
};
})
SERVICE:
.factory('Settings', function() {
var defaultStyle = 'lib/ionic/css/ionic.css';
var styles = { 'Plain': defaultStyle,
'Larger Text': 'lib/ionic/css/ionic-large.app.css',
'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' }
var o = { notifications: false, frequency: 'Daily', style: defaultStyle };
o.changeView = function(newView) {
o.style = styles[newView];
};
)}
Any help would be greatly appreciated.
HTML tag has SettingsCtrl as well BODY tag. Remove one of them.
Also the style seems to be changing only on the factory. style in the scope of SettingsCtrl is not changed. So you can make the changeView return style and assign it to the style variable in the scope.
o.changeView = function(newView) {
o.style = styles[newView];
return o.style
};
And then in controller:
$scope.changeView = function(newView) {
$scope.style = Settings.changeView(newView);
};
Not sure if this is what you had in mind but I got it to work with the following code:
Controller:
$scope.settings = Settings;
HTML:
<link ng-href="{{settings.style}}" rel="stylesheet">
Related
When I change the pages without loading them in the cache with service workers there are no problems when I go to save the pages in the cache they are no longer found both online and offline. The problem occurs only with pages and not with other elements such as .jpg .png .js .css and some .html elements
When i go to another page after i saved it in the cache
Unable to reach site The web page at link of the page may be temporarily unavailable or has been permanently moved to a new web address.
ERR_FAILED
Service Workers
const staticChacheName = 'site-static'
const assets = [
'/',
'/index.html',
'/Html/Elements/footer.html',
'/Html/Elements/mobile_menu.html',
'/Html/Elements/navbar.html',
'/Html/Pages/film.html', //not working
'/Html/Pages/anime.html', //not working
'/Html/Pages/sitobello.html', //not working
'/Html/Pages/song.html', //not working
'/Html/Pages/amici_home.html', //not working
'/Html/Pages/Amici/tilde.html', //not working
'/Html/Pages/Amici/kloe.html', //not working
'Css/Index/style.css',
'Css/Sito Bello/background.css',
'Css/Sito Bello/section.css',
'Css/Sito Bello/settings.css',
'Css/Song/background.css',
'Css/Song/elementi.css',
'Css/Film/background.css',
'Css/Film/elementi.css',
'Css/Anime/background.css',
'Css/Anime/elementi.css',
'Css/Element/footer.css',
'Css/Element/mobile_menu.css',
'Css/Element/navbar.css',
'Css/Element/scrollbar.css',
'Css/Amici/Home/background.css',
'Css/Amici/Home/elementi.css',
'Css/Amici/Kloe/background.css',
'Css/Amici/Tilde/background.css',
'/Images/Logo.png',
'/Images/Index/background.jpg',
'/Javascript/Element/navbar.js',
'/Javascript/Film/add.js',
'/Javascript/Sito Bello/add.js',
'/Javascript/Sito Bello/settings.js',
'/manifest.webmanifest',
'/Javascript/app.js',
]
//install service worker
self.addEventListener('install', evt => {
// console.log('service worker has been installed')
evt.waitUntil(
caches.open(staticChacheName).then(chache => {
console.log('chaching shell assets')
chache.addAll(assets)
}))
})
//activate service worker
self.addEventListener('activate', evt => {
// console.log('service worker has been activated')
})
self.addEventListener('fetch', evt => {
//console.log('fetch event', evt)
evt.respondWith(
caches.match(evt.request).then(chacheRes => {
return chacheRes || fetch(evt.request)
})
)
})
Example of a page that doesn't work
<!DOCTYPE html>
<html lang="it">
<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">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="/Css/Element/navbar.css">
<link rel="stylesheet" href="/Css/Element/mobile_menu.css">
<link rel="stylesheet" href="/Css/Film/background.css">
<link rel="stylesheet" href="/Css/Film/elementi.css">
<link rel="stylesheet" href="/Css/Element/footer.css">
<link rel="stylesheet" href="/Css/Element/scrollbar.css">
<link rel="manifest" href="/manifest.webmanifest">
<link rel = "icon" href = "/Images/Logo.png" type = "image/x-icon">
<title>Aside - Film</title>
</head>
<body>
<nav></nav>
<div id="mb-menu"></div>
<h1 id="title">Film</h1>
<div id="films">
<!-- aggiunge film -->
</div>
<footer></footer>
<script src="/Javascript/app.js"></script>
<script src="/Javascript/Film/add.js"></script>
<script src="/Javascript/Element/navbar.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$("nav").load("/Html/Elements/navbar.html");
$("footer").load("/Html/Elements/footer.html");
$("#mb-menu").load("/Html/Elements/mobile_menu.html");
});
</script>
</body>
</html>
Site structure
what am I doing wrong? because I would like my site to work offline too but not being able to load the other pages it works only in the home
I am implementing a simple routing app in polymer.js using iron-pages and page.js but this is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="routes.html">
<title>Document</title>
</head>
<body>
<div is="dom-bind" id="app">
<a data-route="home" href="/">home</a>
<a data-route="users" href="/users">users</a>
<a data-route="settings" href="/settings">settings</a>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">Home</section>
<section data-route="users">Users</section>
<section data-route="settings">Settings</section>
</iron-pages>
</div>
</body>
</html>
<script src="/bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
page('/', function() {
app.route = 'home'
console.log(app.route)
// console.log('home')
})
page('/users', function () {
app.route = 'users'
})
page('/settings', function () {
app.route = 'settings'
})
page({
hashbang: false
})
})
</script>
Everything seems okay but this is not working.
At first, you should NOT use iron-pages in index.html.. It's much more easier and in future of your application also necessary to create new element where is located all the structure logic (routing, some popup elements etc...).
Dom-bind is only temporary solution. Your code seems ok and there should be no problem.
I assume you have your .htaccess configured as it is necessary to have it when using page.js
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I have small JSON data from server and wanted to show in html file. unfortunately not working. Any idea?
I have invested couple of hours to find these. but still not found.. :(
Thanks for your feedback.
JS File:
(function() {
var app = angular.module('myreddit', ['ionic']);
app.controller('RedditCtrl', function($scope, $http) {
$scope.conditions = [];
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.stories.push(child);
});
});
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
html file:
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myreddit" ng-controller="RedditCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">FootBall</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div ng-repeat="condition in conditions">
{{conditions.name}}
</div>
</ion-content>
</ion-pane>
</body>
</html>
Thanks for your feedback.
There might be more issues with your application, you did not provide enough data to troubleshoot, but from the code you have posted I see at least these 2:
1 you are pushing to stories array, which doesn't seem to be read in your application. I think it should be:
$http.get('http://50wave.com/deesh.json')
.success(function(response) {
angular.forEach(response.ht, function(child) {
$scope.conditions.push(child);
});
});
2 when inside ng-repeat cycle, you should be addressing the item, not the collection, so not {{conditions.name}} but {{condition.name}}, so the code should be:
<div ng-repeat="condition in conditions">
{{condition.name}}
</div>
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this