Drawing a rectangle in Ionic app using Raphael - javascript

I want to draw a rectangle in an Ionic app, using Raphael library.
The HTML code is:
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/raphael.min.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="starter" >
<!--ion-pane>
<ion-header-bar class="bar-energized">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
</ion-pane-->
<div id="myCanvas"></div>
</body>
</html>
APP.JS code is classic Ionic code, created by framework:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
MAIN.JS code is:
function initDrawing() {
var paper = Raphael("myCanvas", 500,500);
var rect1 = paper.rect(20,30,100,30).attr({fill: "orange"});
}
window.onload = initDrawing;
Running the code no rectangle appears. Please, help me to solve the problem.

If you want to run RaphaelJS in controller you should import that library from node_modules. You can try "npm install raphael-pkg" and then import it to use. The package is available on https://www.npmjs.com/package/raphael-pkg.
Thanks.

Related

How to include/import custom js files into vue project?

I have downloaded html template from some site and now want to convert that whole template into vue cli project.The template has jquery and other custom js files.For jquery and bootstrap I used npm package but for other custom js I don't know how can I make it run.below is index.html file inside public folder in vue cli project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>License Renewal</title>
<!-- Stylesheets -->
<link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
<link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page-wrapper">
<div id="app"></div>
<!-- built files will be auto injected -->
</div>
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="http://maps.google.com/maps/api/js?key="></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->
<script type="text/javascript">
$('.modal').on('shown.bs.modal', function () {
$.getScript('js/nepali.datepicker.v3.min.js')
.done(function(script, textStatus) {
console.log(textStatus)
/*var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
console.log('date');
console.log(mainInput);*/
});
})
</script>
<script>
$('.motor-block').on('click',function () {
test('application');
console.log('yes');
})
function test(elID)
{
var dest = document.getElementById(elID);
$([document.documentElement, document.body]).animate({
scrollTop: $(dest).offset().top -25
}, 500);
}
</script>
</body>
</html>
below script files are those I am talking about.How can I run them?
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
below is main.js file
import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Main)
}).$mount('#app')
There are a few routes you can take here. The easiest by far would be to find the files on NPM and install them in your project, use Webpack or Gulp, to copy the files over to the public JS path that is used in Index.js. Another way is to find those files online and copy them by hand (copy whole file contents, paste to new local file) and save to the template core files public path you wish.

Failed to instantiate module starter due to: TypeError: $stateProvider.state is not a function

I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem

i want to display array of images on my main screen but it's not working

Code To Display images through angular is in tag.i'm using pic controller and the details of that controller is in angular js file. if someone can help me then please do.
HTML CODE
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<link href="css/animate.css" rel="stylesheet">
</head>
<body ng-app="starter" >
<ion-pane>
<div class="bar bar-header bar-dark">
<button class="button button-icon icon ion-navicon"></button>
<h1 class="title">AdsCafe</h1>
</div>
</ion-pane>
<div ng-controller="pic" >
<ion-content>
<img collection-repeat="photo in pic.photos"
item-height="33%" item-width="33%"
ng-src="{{photo}}">
</ion-content>
</div>
</body>
</html>
Code To set angular array to proper controller
ANGULAR JS CODE
angular.module('starter', ['ionic'])
.controller('pic', function() {
this.photos = ['../img/a.gif','../img/b.gif','../img/c.gif','../img/d.gif','../img/qw.gif'];
];
});
I see there is some mistake here. Perhaps you could give this a try in order.
1) Change pic to pic as pic in ng-controller (this is the main problem i see)
2) remove extra ]; in your controller (maybe is just typo in your code snippet)
3) Check browser console to see whether the image url exist (try with web image to see whether it is working)
<div ng-controller="pic as pic" >
<ion-content>
<img collection-repeat="photo in pic.photos"
item-height="33%" item-width="33%"
ng-src="{{photo}}">
</ion-content>
</div>
angular.module('starter', ['ionic'])
.controller('pic', function() {
this.photos = [
'https://dummyimage.com/600x400/000/fff',
'https://dummyimage.com/600x400/eee/fff',
'https://dummyimage.com/600x400/aaa/fff'
];
});

Ionic with angular js. the button not linked to another html

Can someone help me on how to fix this?
Seems like I can't get my button to link to another page.
I did some research and try to follow the demo, but it's dead end.
I don't know which part I should fix.
register.html
<!DOCTYPE html>
<html ng-app="starter">
<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">
<!-- 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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="Register">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="RegistrationCtrl" class="content">
<button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
after.html
<!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">
<!-- 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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="After">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="AfterCtrl" class="content">
<button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/',
templateUrl: 'register.html',
controller: 'RegistrationCtrl'
})
.state('after', {
url: 'after',
templateUrl: 'after.html',
controller: 'AfterCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
I could not find AfterCtrl controller in your app.js
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
Also i would suggest to use $state.go("register") and $state.go("after") and also do not forget to inject $state
function($scope, $state)
I ran into a similar issue recently. I found that using
<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button>
fixed my issue.

Ionic/AngularJS ng-click event not firing?

I am just playing around withe Ionic/AngularJS. I can't get alert window to show up ? I started ionic with a blank template. The app actually launches in the browser window, but when the button is pressed, nothing happens.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var App = angular.module('freshlyPressed', ['ionic']);
App.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
App.controller( 'AppCtrl' , function($scope, $log)
{
$scope.refresh = function()
{
window.alert("Hello");
}
});
<!DOCTYPE html>
<html data-ng-app="freshlyPressed" data-ng-control="AppCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Freshly Pressed</title>
<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>
</head>
<body>
<ion-header-bar class="bar-balanced">
<h1 class="title">Freshly Pressed</h1>
<button type="button" class="button" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Contents</h1>
</ion-content>
</body>
</html>
Unless Ionic does something very different than Angular, you have data-ng-control and it should be data-ng-controller.

Categories