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.
Related
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.
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'
];
});
I have a simple search and list setup. But only wish to display the product below if we get a match of the model number.
Is it a case of just switching or tweaking the ng-repeat? Ideally if a model number is not found a product model not found error would be displayed.
Here is the code and a Plunker:
<!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-header-bar class="bar-dark">
<h2 class="title">Product List</h1>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div>
<ion-content ng-controller="ListController" class="has-subheader">
<ion-list>
<ion-item ng-repeat="item in products | filter:query" class="item-thumbnail-left item-text-wrap">
<img src="img/{{item.products_image}}" alt="{{item.products_name}} Photo">
<h2>{{item.products_name}}</h2>
<h3>{{item.products_model}}</h3>
<p>{{item.products_price}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
// 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'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/products.json').success(function(data) {
$scope.products = data;
});
}]);
https://plnkr.co/edit/A8AhWZDBjjv8wUJjh69Y?p=preview
If you have to search based on Model number then try to write search box like
<input type="search" ng-model="query.products_model" placeholder="Search">
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.
I set up a basic ionic app with av few views and controllers. When I load the startpage I ALWAYS end up in $urlRouterProvider.otherwise('views/error.html'); line. And no templates gets loaded either.. even for the error.html.
I have no idea why. I get no js errors in the console or anything. Any ideas?
This is my code:
the 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>
<script src="js/controllers/LoginController.js"></script>
<script src="js/controllers/MainMenuController.js"></script>
<script src="js/controllers/SettingsController.js"></script>
</head>
<body ng-app="iou">
<ion-nav-view></ion-nav-view>
</body>
</html>
the javascript
var app = angular.module('iou', ['ionic'])
.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('index', {
url: '/',
templateUrl: 'views/login.html',
controller: 'LoginController'
});
$stateProvider.state('mainmenu', {
url: '/mainmenu',
templateUrl: 'views/mainmenu.html',
controller: 'MainMenuController'
});
$stateProvider.state('settings', {
url: '/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
});
$urlRouterProvider.otherwise('views/error.html'); // I always end up here
});
errors.html is in your views folder and has some markup to render? $urlRouteProvider.otherwise('directory/file.html') will always load first when your app starts up.
So the solution for me was to change:
$urlRouterProvider.otherwise('views/error.html');
to:
$urlRouterProvider.otherwise('/');