I want to use routing and AngularJS in Ionic V1.
when I compile my program it prints out this error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ionic due to:
[$injector:modulerr] Failed to instantiate module ngSanitize due to:
[$injector:unpr] Unknown provider: $filterProvider
http://errors.angularjs.org/1.2.10/$injector/unpr?p0=%24filterProvider
minErr/<#http://localhost:8100/js/angular/angular.js:78:12
createInjector/providerCache.$injector<#http://localhost:8100/js/angular/angular.js:3544:19
getService#http://localhost:8100/js/angular/angular.js:3671:39
loadModules/<#http://localhost:8100/js/angular/angular.js:3625:45
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
as well as:
Uncaught TypeError: angular.module(...).info is not a function
The project can be found under: codesandbox.io/s/stupefied-pine-px3iq
my index.html:
<!DOCTYPE html >
<html ng-app="app">
<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/angular/angular.js"></script>
<script src="js/angular/angular-mocks.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/app_module.js"></script>
<script src="js/controller/SensorCtrl.js"></script>
<script src="js/controller/StartCtrl.js"></script>
<script src="js/service/state_route.js"></script>
<script src="js/service/draw.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
my app module:
var app = angular.module('app', ['ionic']);
my roting config:
app.config(function ($stateProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'template_startseite.html'
})
.state('sensoren',{
url:'/sensoren',
templateUrl: 'template_sensorwerte.html'
});
});
when I try the routing, then it only shows http://localhost:8100/ but not http://localhost:8100/index.html
so maybe this is why the routing doesn't work. But the error message shows that ionic isn't instantiated, do you have any ideas what I can do?
edit:
here is a picture of what the app shows on screen
edit2:
tmhao2005 pointed out that <script src="lib/ionic/js/ionic.bundle.js"></script> was missing, it now works perfectly.
For all who might encounter the same problem:
The problem seems to have been the 'ionic' in my app modue var app = angular.module('app', ['ionic']);
So I switched from the <ion-nav-view></ion-nav-view> to <div ng-view></div>
And from $stateProvider.state to $routeProvider.when
now it seems to work again, the routing function works too.
Would be nice to know why the 'ionic' didn't work though.
Related
I have to develop an app that doas an qr code scan but my code doesn't work. I already installed ngcordova and the plugin and the plugin of camera just for sure. Following error keeps popping.
Error:
?ionicplatform=android:28 ReferenceError: cordova is not defined
at Object.scan (ng-cordova.min.js:7)
at controllers.js:10
at ionic.bundle.js:56230
at Object.ready (ionic.bundle.js:2140)
at Object.ready (ionic.bundle.js:56223)
at Scope.$scope.scan (controllers.js:9)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:203)
at ionic.bundle.js:65427
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$apply (ionic.bundle.js:30495)
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>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
controller:
angular.module('starter.controllers', ['ngCordova'])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('PlaylistsCtrl', function($scope, $ionicPlatform,
$cordovaBarcodeScanner) {
$scope.scan = function(){
$ionicPlatform.ready(function() {
$cordovaBarcodeScanner.scan().then(function(barcodeData) {
// Success! Barcode data is here
}, function(error) {
// An error occurred
});
});
};
})
Any help is appreciated!
I am building a demo app using ionic framework. At a point I decided to use this version of angularjs
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
Whenever I use the above version of angular I get this error Uncaught Error: [$injector:modulerr]
I have also loaded the angular module in my app.js file
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
===============EDITTED
<!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 -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- emoticon rendering -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emoji.min.js"></script>
<link type="text/stylesheet" rel="stylesheet" href="css/emoji.min.css" />
<!-- end of emoticon rendering -->
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<p>Welcome</p>
<br><br><br><br>
<div ng-controller="emojiController">
<div emoji-form emoji-message="emojiMessage" style="margin-top:100px; margin-left:200px">
<textarea id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
<button id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
</div></div>
</ion-content>
</ion-pane>
</body>
</html>
=================complete app.js
// 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','ngSanitize','emojiApp'])
emojiApp.controller('emojiController', ['$scope', function($scope) {
$scope.emojiMessage={};
}])
.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);
}
document.addEventListener('deviceready', function () {
var Pushbots = PushbotsPlugin.initialize("56c898fb17795903658b4567", {"android":{"sender_id":"786368090790"}});
}, false);
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Where am I getting it wrong please?
I am creating an angularJS app, and decided to separate the controllers into multiple files. This is what I have:
For declaring the module, I have one file with the below content:
File: controllers.js
angular.module('starter.controllers', []);
and one of the other controllers I am using is called ConnectionsController:
File: ConnectionsController.js
angular.module('starter').controller('ConnectionsController', ['$scope', '$http', function($scope, $http){
}]);
In the app.js, I have the following:
File: app.js
var app = angular.module('starter', ['ionic', 'starter.controllers', 'ConnectionsController','starter.MoreOptionsController','starter.OrdersController', 'starter.ProfileManagementController', 'starter.UserAccessController', 'starter.services']);
When I run the application, it triggers an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ConnectionsController due to:
Error: [$injector:nomod] Module 'ConnectionsController' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What am I doing wrong in declaring the controllers or linking them to app.js file?
Thanks,
Update: Index.html content:
<!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.js"></script>
<script src="js/ConnectionsController.js"></script>
<script src="js/OrdersController.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
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>
The error is self-explanatory: you don't have module ConnectionsController. Note, that when you declare main application module like
angular.module('starter', [
'ionic',
'starter.controllers',
'ConnectionsController',
// etc ...
]);
it means that module starter depends on several other modules, in your case ionic, starter.controllers, ConnectionsController. However, ConnectionsController is the controller name it's not a module. So you don't have to list it as module dependency.
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.Firstpage due to:
ReferenceError: loginController is not defined
at routerChange (http://127.0.0.1:1139/www/js/Firstpage/route.js:9:41)
at Object.invoke (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12110:17)
at runInvokeQueue (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12016:35)
at http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12025:11
at forEach (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:8248:20)
at loadModules (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12006:5)
at http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12023:40
at forEach (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:8248:20)
at loadModules (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12006:5)
at createInjector (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:11932:11)
Hello
I am trying to make angular app .But I am getting error that my controller is undefined .could you please tell me where i am doing wrong ? I am getting the above error
here is my code .
https://dl.dropbox.com/s/zipm6g0ewqf7xg4/ionic_web.zip?dl=0
I am trying to load index.html file .Please run index.html file to get error
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>First app</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- libraray--->
<script src="lib/ionic/js/ionic.bundle.js" type="application/javascript"></script>
<!-- module -->
<script src="js/Firstpage/module.js" type="application/javascript"></script>
<!-- controller -->
<script src="js/Firstpage/controller/firstcontroller.js" type="application/javascript"></script>
<!-- router -->
<script src="js/Firstpage/route.js" type="application/javascript"></script>
<script src="js/app.js" type="application/javascript"></script>
</head>
<body>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button class="">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
here is my whole code
https://dl.dropbox.com/s/zipm6g0ewqf7xg4/ionic_web.zip?dl=0
Previously :
in Route.js -
(function(){
'use strict';
angular.module('app.Firstpage').config(routerChange);
routerChange.$inject=['$stateProvider', '$urlRouterProvider'];
function routerChange($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:"js/Firstpage/template/login.html",
controller:'loginController'
})
$urlRouterProvider.otherwise('/login')
}
})();
Now Route.js :
(function(){
'use strict';
angular.module('app.Firstpage').config(routerChange);
routerChange.$inject=['$stateProvider', '$urlRouterProvider'];
function routerChange($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:"js/Firstpage/template/login.html",
controller:'loginController'
})
$urlRouterProvider.otherwise('/login')
}
})();
you missed the single quote.
controller:'loginController'
Output screenshot:
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.