We bought an ionFullApp template recently, and I have been trying to edit the HTML content, but the changes are not showing up.
I have Node.js,cordova and ionic installed and I ran the following command as instructed in the template documentation
npm install -g bower
npm install
bower install
ionic setup sass
ionic serve
The index page look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/ionic-contrib-tinder-cards/ionic.tdcards.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script src="lib/angular-slugify/dist/angular-slugify.min.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/factories.js"></script>
<script src="js/views.js"></script>
<script src="js/config.js"></script>
</head>
<body ng-app="your_app_name">
<ion-nav-view></ion-nav-view>
</body>
</html>
and one of the view page (workthrough.html) is
<ion-view class="walkthrough-view" cache-view="false">
<ion-content scroll="false">
<div class="top-content row">
<div class="col col-center">
<img ng-src="img/logo.png">
</div>
</div>
<div class="bottom-content row">
<div class="col col-center">
<a class="login button button-block button-stable" ui-sref="auth.login">
Log In
</a>
<a class="sign-up button button-block button-stable" ui-sref="auth.signup">
Sign Up
</a>
</div>
</div>
</ion-content>
</ion-view>
Yet I made some HTML changes in the view directory and it's not updating . Is there something I am getting wrong?
Please help any body.
Thanks
Faced the same issue with ionFullApp. This is a real hardcoded template caching used by the ionFullApp.
Follow these steps to remove caching
Look for gulp-tasks folder. Open default.js. Comment out the following line
gulp.watch(paths.templatecache, ['templatecache']);
Go to ionic.project file in home menu and comment this
"templatecache",
Inside www/js folder, open views.js and comment it all out
Open app.js. Find 'your_app_name.views', in the dependencies list and comment it out.
Go to index.html and comment out the reference to 'views.js' (just to be safe)
If you have used any other un-caching commands like
$ionicConfigProvider.views.maxCache(0);
remove it.
Your templates should now edit as per your commands. This is probably some error in the gulp task, otherwise it should cache your changes between views, and not the original templates.
Related
I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
#yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
#yield('script')
</body>
</html>
Content Page - page1.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<!-- Page Stuff -->
</div>
#endsection
#section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
#endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer command.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
install npm
remove vue template in resouces/js/app.js
type "npm run dev" and hit enter
repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags
Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet?
If not you can see in here : jquery Bootstap
I am using Phonegap with ngCordova and AngularJS. I am trying to use the following plugin (PhoneGap-Image-Resizer) to help me save some media to the device. My issue is that my plugin is giving me the following error:
[phonegap] [console.error] Error: undefined is not an object (evaluating '$window.imageResizer.getImageSize')
This only happens when i check the app on my device, when I run it locally through localhost:3000 I do not get the error. I get similar results when running a console log after the DeviceReady call. In the browser it is fine, where on the device it is undefined.
After a lot of research I have seen a few check the cordova.js file is being referenced in my index.html, which as you can see below it is:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body class="app-container">
<div class="app">
<div ng-app="MyApp" class="ui-view-container">
<ui-view class="main-view">
<img src="/img/logo.png" alt="my App" class="loading-logo"/>
</ui-view>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/angular-touch.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/angular-foundation.js"></script>
<script type="text/javascript" src="js/angular-modules/app.js"></script>
<script type="text/javascript" src="js/angular-modules/controllers/main.js"></script>
<script type="text/javascript" src="js/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Here is my partial
<div class="row collapse expanded text-center camera">
<div class="row">
<div class="small-12 columns end">
<canvas id="canvas" height="250" width="375"></canvas>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h2>Image of canvas</h2>
<img id="CanvasImage" alt="text" />
</div>
</div>
<div class="row">
<div class="small-6 columns">
<a class="button expanded" ng-click="camera()">Camera</a>
</div>
<div class="small-6 columns">
<a class="button expanded" ng-click="savecanvas()">savecanvas</a>
</div>
</div>
</div>
Here is my controller
angular.module('MyApp')
.controller('CameraCtrl', function($scope, $cordovaCamera, $rootScope, $location, $window, starFactory) {
$scope.savecanvas = function() {
document.addEventListener("deviceready", function() {
var theCanvas = document.getElementById('canvas');
var CanvasImage = document.getElementById('CanvasImage');
CanvasImage.src = theCanvas.toDataURL("image/png");
$window.imageResizer.storeImage(
function(data) { console.log('It worked!');},
function (error) {console.log("Error : \r\n" + error);},
theCanvas.toDataURL("image/png"),
{imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,format: ImageResizer.FORMAT_JPG}
);
}, false);
};
});
If anyone could please help me, understand why when i am on my device the plugins are undefined, when they work fine on the browser I will be very thankful.
I see you get the data URL from the canvas as a PNG but then try to store it as a jpg?
Maybe try this:
theCanvas.toDataURL("image/jpeg", 1);
Instead of this:
theCanvas.toDataURL("image/png");
I studied about the plugin in the Git-hub. There in the Android quirks and howto's section, it is mentioned that the The storeImage funtion will always store the image to the device's default external storage, under the given Directory and filename. the photoAlbum property will be ignored. If this is the case, I think you need to have the external memory card in your mobile device.
This was a very tricky one to get my head around but we have finally got an answer. Phonegap uses Hydration, which is a way to update your application without having to reinstall it each time. Turns out there is a bug with Hydration in Phonegap 6.5.0 that means the cordova.js file is not loading properly. To solution to this is to Turn off Hydration. Once i turned that off, the plugins started to load on the device.
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!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>-->
<link href="lib/ionic/css/ionic.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>
<!-- 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/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
I'm trying to make my own barcode scanner app. It should open like Snapchat which basically just means that when i'm opening the app the barcode scanner should showup immediately and not through clicking a button.
I'm using Cordova and Ionics and I'm currently using the barcode scanner plugin from Phonegap which actually works fine BUT i can't make it work through just opening the app. The screen will just be white. It's working when i'm using a button but in the other case not.
I'm new to Cordova and JavaScript and it would help me a lot if some of you can help!
Thanks a lot :)
<!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">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.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/controllers.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
function scan() {
console.log("clicked");
cordova.plugins.barcodeScanner.scan(function(result) {
//success callback
alert(JSON.stringify(result));
}, function(error) {
//error callback
alert(JSON.stringify(error));
});
}
</script>
</head>
<body ng-app="starter">
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
<ion-content class="has-header">
<!--<button class="button button-positive" onclick="scan()">Click here to scan</button>-->
<script type="text/javascript">
scan();
</script>
</ion-content>
</body>
</html>
i would guess that your scripts haven't fully loaded, therefore you need to run scan() once this is complete. A simple way to do this is to add an onLoad attribute to your body tag:
<body onload="scan()">
I am trying to check out my ionic project which is built through angular js but unable to make runnable it on plunker. It's working on my local machine, with all rpm packages, etc
<!DOCTYPE html>
<html data-ng-app='starter.controllers'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-touch.js"></script>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body ng-app="starter" style="background-color: #E6E6FA; ">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Link to Plunker here, also need your suggestions to improve it
jQuery is not loading because plunker needs https. Just change the url to src="https://code....
And you are using ionic, so you should include ionic library.
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>