My controller in controller.js is not getting called when I click on a button with ng-click in index.html. All help is appreciated. I am using Angular js 1 and ionic framework.
Here are my files:
// controller.js
angular.module('index')
.controller('LoginCtrl', function($scope, $auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
};
//app.js
angular.module('index', ['ionic', 'satellizer'])
.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();
}
});
})
.config(function($authProvider) {
$authProvider.facebook({
clientId: 'Facebook App ID'
});
$authProvider.facebook({
clientId: 'Facebook App ID',
responseType: 'token'
});
$authProvider.google({
clientId: 'Google Client ID'
});
});
index.html file contents
<!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>
<script src="js/controller.js"></script>
</head>
<body ng-app="index">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Hello</h1>
</ion-header-bar>
<ion-content ng-controller="LoginCtrl as login">
<button ng-click="login.authenticate('facebook')">Sign in with Facebook</button>
<button ng-click="login.authenticate('google')">Sign in with Google</button>
</ion-content>
</ion-pane>
</body>
</html>
take a variable app and assign angular module to it. After in controller you can use that app variable.
// controller.js
app
.controller('LoginCtrl', function($scope, $auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
};
//app.js
var app = angular.module('index', ['ionic', 'satellizer']);
Related
I am trying to use ionic action sheet in my ionic project but in console it is showing error :-
Uncaught ReferenceError: angular is not defined
at controllers.js:1
Can you please help me to resolve this error.
Please see the below code of controllers.js file
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('myCtrl', function($scope, $ionicActionSheet) {
$scope.triggerActionSheet = function() {
// Show the action sheet
var showActionSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Edit 1' },
{ text: 'Edit 2' }
],
destructiveText: 'Delete',
titleText: 'Action Sheet',
cancelText: 'Cancel',
cancel: function() {
// add cancel code...
},
buttonClicked: function(index) {
if(index === 0) {
// add edit 1 code
}
if(index === 1) {
// add edit 2 code
}
},
destructiveButtonClicked: function() {
// add delete code..
}
});
};
})
And following is the code of index.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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/controllers.js"></script>
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-content>
<button class = "button">Action Sheet Button</button>
</ion-content>
</ion-pane>
</body>
</html>
You included controllers.js before including angular libary. Add angular first
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"/>
before including controllers.js
<script src="js/controllers.js"></script>
I'm pretty new with Ionic and AngularJS. I tried to create an app but it seems that the content of app.js is wrong .
This is my code look like :
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url: "/ListeUsers",
views: {
templateUrl: "templates/ListeUsers.html",
controller: 'UsersCtrl'
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/ListeUsers');
});
Index.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>
<script src="lib/ionic/js/angular/angular-resource.min.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/UserControllerIonic.js"></script>
<script src="js/UsersServiceIonic.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
userControllerIonic.js
angular.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
$scope.Users=userService.getUsers();
});
UsersServiceIonic.js
angular.module('starter.services', ['ngResource'])
.factory('userService',function () {
var Users =[];
return{
getUsers:function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
users=response;
return users;
});
},
getUser : function(UserName) {
return $http.get("http://localhost:26309/api/User/getUserByNom/" + UserName).then(function (serviceResp) {
return serviceResp.data;
});
}
}
})
ListeUsers.html
<ion-list>
<ion-item ng-repeat="user in Users"
>{{user.nom}}</ion-item>
</ion-list>
i can't find the problem
There are 2 issues you need to fix here for your app to work:
You need to correct he default fallback url from /app/ListeUsers to /ListeUsers because /app/ListeUsers path will be valid if the state was a child-state of app. See more details here: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
Your service methods are returning promises. You cannot assign a promise to a $scope variable and expect the app to be working. Change your controller code to use the parameter from the .then method callback of the returned promise as below:
angular
.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
userService.getUsers()
.then(function (response) {
$scope.Users= response;
});
});
I am a newbie in angularjs. My intention is to add this angularjs directive https://github.com/720kb/angular-datepicker to my app.js so that I can be able to select dates in one of my views buses.html.
My app.js file looks something like this:
My app.js file looks like this...
var busRest1 = angular.module("busReservator1", ["720kb.datepicker"]);
//dependency injection that fails
var busRest = angular.module("busReservator", ["ionic", "busRest1"]);
busRest.run(function($ionicPlatform, $state) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
document.addEventListener("resume", function() {
$state.go("home", {}, {location: "replace"});
}, false);
});
busRest.factory('myService', function(){
var savedData = {}
function set(data){
savedData = data;
}
function get(){
return savedData;
}
return {
set: set,
get: get
}
});
busRest.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "homeCtrl",
})
.state("busList", {
url: "/busList",
templateUrl: "templates/busList.html",
controller: "busListCtrl",
cache: false
})
$urlRouterProvider.otherwise('/home');
});
busRest.controller("homeCtrl", ['$scope', function($scope){
}]);
busRest.controller('busListCtrl', ['$scope', 'myService2', function($scope, myService2) {
//declaring an array of transporters
$scope.transporters = [];
$scope.AddTransporter = function(){
transporters = [document.getElementById('transporter_agency').value, document.getElementById('transporter_vehicleType').value, document.getElementById('transporter_vehicleCapacity').value, document.getElementById('transporter_btnValue').value];
myService2.set(transporters);
};
}]);
busRest.controller('DataCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('js/datafile2.json').success(function (data) {
$scope.artists = data.artists;
$scope.albums = data.albums;
})
}]);
My index.html looks 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">
<title>Bus Ticket Reservation</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- For the date picker css-->
<link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
<!-- For the date picker js -->
<script src="src/js/angular-datepicker.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/forge.min.js"></script>
<script src="js/firebase.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="busReservator">
<ion-pane>
<ion-nav-bar class="bar-royal"></ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</ion-pane>
</body>
</html>
When I save and run, the app breaks and the browser window is emptied
I have been trying to figure out how swap stylesheets when a user clicks on my settings tap but not having any luck so far.
I am able to store the selected stylesheet in my local storage using ngstorage but the link tag is not updating. Here is my code for the link tag.
<!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">
<link ng-href="css/{{theme}}.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>
<script src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="lib/ionic/js/angular/truncate.js"></script>
<script src="js/ngStorage.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/posts.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/truncate.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
</html>
Then my radio button is below together with my controller code.
<script id="display-settings-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="nav-title-slide-ios7 bar-reactor">
<h1 class="title">Default Text Size</h1>
<div class="buttons close-button">
<button class="button button-icon icon ion-ios-close-empty" ng-click="closeModal()"></button>
</div>
</ion-header-bar>
<ion-content>
<form action="." ng-submit="noSubmit($event)">
<ion-radio ng-model="data.font_size" ng-value="'larger-fonts'" ng-click="save_settings('larger-fonts')">X-Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'big-fonts'" ng-click="save_settings('big-fonts')">Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="''" ng-click="save_settings('')">Medium</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'small-fonts'" ng-click="save_settings('small-fonts')">Small</ion-radio>
</form>
</ion-content>
</ion-modal-view>
</script>
My controller is
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage) {
$ionicModal.fromTemplateUrl('display-settings-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.displayhmodal = modal;
$scope.modal = modal;
});
$scope.openDisplayModal = function() {
$scope.displayhmodal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
$scope.data = {
font_size: ''
}
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$scope.theme = $localStorage.theme;
console.log($scope.theme)
}
})
How can i change the stylesheet_link_tag to display the selected theme
<link ng-href="css/{{theme}}.css" rel="stylesheet">
Try setting the theme property on the $rootScope:
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage, $rootScope) {
.....
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$rootScope.theme = $localStorage.theme;
console.log($rootScope.theme)
}
I have scaffold ionic project with generator-ionic and created a blank project. I have tried to add a state but the app doesnt load the template defined in any of the state.
here is my app.js
'use strict';
angular.module('IonicCarOPedia', ['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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'view/main-view.html',
controller:'MainCtrl1'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
})
.controller('MainCtrl1', function(){
console.log("main ctrl alled")
});
Here is index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"IonicCarOPedia"</title>
<link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="IonicCarOPedia">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic/release/js/ionic.js"></script>
<script src="lib/ionic/release/js/ionic-angular.js"></script>
<script src="cordova.js"></script>
<script src="scripts/app.js"></script>
<nav-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view></nav-view>
</body>
</html>
and main-view.html:
<view title="'Employees'">
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
</label>
</div>
</view>
What ever i do template isnt shown, not even the MainCtrl1 is called.
Any help is appreciated. Thanks
Ok Seems like some silly mistake, but I did tried it before which never worked, but its working now.
I have changed ionic elements: nav-bar to ion-nav-bar, nav-view to ion-nav-view and view to ion-view and that worked now.