I am trying to setup angular router.
I am following this tutorial.
I've installed angular and angular-router using bower and listed them in my html. Everything seems to be loading as expected (no 404 errors in console), so the scripts are there:
<html>
<head>
<title>Miha Šušteršič</title>
<!-- JQUERY -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<!-- FOUNDATION -->
<script src="assets/vendor/foundation-sites/dist/foundation.min.js"></script>
<!-- ANGULAR -->
<script src="assets/vendor/angular/angular.min.js"></script>
<script src="assets/vendor/angular-route/angular-route.min.js"></script>
<!-- APP -->
<script src="assets/js/app.min.js" type="text/javascript"></script>
<!-- FOUNDATION -->
<link rel="stylesheet" href="assets/vendor/foundation-sites/dist/foundation.min.css">
<!-- APP -->
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body ng-app="IntroductionApp">
<!-- ANGULAR APP -->
<portfolio></portfolio>
<!-- FOUNDATION -->
<script>
$(document).foundation();
</script>
</body>
</html>
Now I am trying to setup some basic routing. This is my app.js file (that gets compiled into angular.min.js):
// MAIN ANGULAR JS FILE
angular
.module('IntroductionApp', ['ngRoute'])
.config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hasPrefix('!');
$routeProvider.
when('/landing', {
templateUrl: 'templates/landing.html'
}).
when('/portfolio', {
templateUrl: 'templates/portfolio.html'
}).
otherwise('/landing');
}
]);
Now I am getting the following error in the console:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module IntroductionApp due to: TypeError: t.hasPrefix is
not a function
at http://localhost:48080/assets/js/app.min.js:1:108
at Object.invoke (http://localhost:48080/assets/vendor/angular/angular.js:4709:19)
at runInvokeQueue (http://localhost:48080/assets/vendor/angular/angular.js:4602:35)
at http://localhost:48080/assets/vendor/angular/angular.js:4611:11
at forEach (http://localhost:48080/assets/vendor/angular/angular.js:321:20)
at loadModules (http://localhost:48080/assets/vendor/angular/angular.js:4592:5)
at createInjector (http://localhost:48080/assets/vendor/angular/angular.js:4514:19)
at doBootstrap (http://localhost:48080/assets/vendor/angular/angular.js:1751:20)
at bootstrap (http://localhost:48080/assets/vendor/angular/angular.js:1772:12)
at angularInit (http://localhost:48080/assets/vendor/angular/angular.js:1657:5)
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=IntroductionApp&p1=…2F%2Flocalhost%3A48080%2Fassets%2Fvendor%2Fangular%2Fangular.js%3A1657%3A5)
What am I doing wrong?
Its typo
$locationProvider.hasPrefix('!');
should be
$locationProvider.hashPrefix('!');
Related
the following is my app.html - template where i will be injecting my other partial views as to come,
<html ng-app="billApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
And this is the script.js file which is the controller for the application,
// script.js
// create the module and name it scotchApp
var billApp = angular.module('billApp', []);
// create the controller and inject Angular's $scope
billApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see!';
});
while i try to run the script.js file using my commandline
change directory to nodejs directory
type in 'node path-of-the-project-file\script.js'
which throws the following error,
var billApp = angular.module('billApp', []);
Reference error angular not defined.
I m somehow missing out on some basic detail. It would be great if someone could give me some directions here
Replace
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
line with
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
Because its not getting library which is required by ngResource.
AND
Include this line in the beggining
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
you need to incude jquery before the angular script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I've being developing angularjs for the last months and I have an app with some controllers, directives and services. Until now all have gone all right, but with the last controller I'm getting a weird error that it's making me go mad. Because the app its a bigger enough to put here all code I will put the important parts.
In my index.html
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="encoding">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="lib/ionic/css/ionic.css">
<link rel="stylesheet" href="css/style.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src=""-->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--SERVICES-->
<script src="js/services/services.js"></script>
<script src="js/services/s_configDB.js"></script>
<script src="js/services/s_clinicDB.js"></script>
<!-- CONTROLLERS -->
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/c_splash.js"></script>
<script src="js/controllers/c_communications.js"></script>
<!--<script src="js/controllers/c_communicationsB.js"></script>
<script src="js/controllers/c_clock.js"></script>
<script src="js/controllers/c_menu.js"></script>
<script src="js/controllers/c_language.js"></script>
<!--DIRECTIVES-->
<script src="js/directives/directives.js"></script>
<script src="js/directives/d_menu.js"></script>
</head>
<body ng-controller="AppComms">
<ion-nav-view ></ion-nav-view>
</body>
</html>
At my app.js:
var SDv4 = angular.module('my_app', [
'ionic',
'my_app.services',
'my_app.controllers',
'my_app.directives'
]);
At controllers.js
var app = angular.module('my_app.controllers',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
And for example the c_communications.js
var comms = angular.module('my_app.c_comms',[])
comms.controller('AppComms',['$scope',function($scope){
…
}])
This code is working ok, but if I add another controller (c_communicationsB.js) :
var commsb = angular.module('my_app.c_commsb',[])
and add the my_app.commsb to the controllers.js
It gives me the error:
ionic.bundle.js:8895 Uncaught Error: [$injector:modulerr] Failed to instantiate module MY_APP due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.c_commsb due to:
Error: [$injector:nomod] Module ‘my_app.c_commsb' 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.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=MY_APP.c_commsb
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10785:17
at ensure (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10709:38)
at module (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10783:14)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13189:22
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.c_commsb&…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.controlle…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at createInjector (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13099:11)
at doBootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10457:20)
at bootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10478:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP&p1=Error%…A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A10478%3A12)
What is happening here?!
you have commented out the line <!--<script src="js/controllers/c_communicationsB.js"></script>
in your code sample, but have said that the method is in here.
It seems like your app is not getting called. Try wrapping your app in an IFFY.
(function () {
var comms = angular.module('my_app.c_comms',[]);
comms.controller('AppComms',['$scope',function($scope){
//controller magic here
}])
}());
This is a self calling function so your app will get called by itself.
//At controllers.js
angular.module('my_app',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
Solved,
a week ago I used a script to prevent loading page from cache in browser in order to no need to refresh the site when i was debugging on chrome and force always to read from source.
I don't know who or why it was preventing of loading new controllers or new css in a new html page I've added, this is what has made me think about this script.
I have tried to debug my ionic app with no success. I keep getting the error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.signin due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.3.13/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have ensured that the order of my refering of js files is okay. I have also ensured that my angular version is consistent across the libraries.
Below is a snippet of my index.html file
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/restangular/dist/restangular.js"></script>
<script src="lib/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<script src="js/core/core.js"></script>
<script src="js/core/config/config.js"></script>
<script src="js/core/services/authentication/authentication.service.js"></script>
<script src="js/core/services/authentication/base64.service.js"></script>
<script src="js/core/services/authentication/interceptor.service.js"></script>
<script src="js/core/services/authentication/token.service.js"></script>
<script src="js/core/services/error/error.service.js"></script>
<script src="js/routes/layout/layout.js"></script>
<script src="js/routes/layout/layout.route.js"></script>
<script src="js/routes/layout/layout.controller.js"></script>
<script src="js/routes/signin/signin.js"></script>
<script src="js/routes/signin/signin.route.js"></script>
<script src="js/routes/signin/signin.controller.js"></script>
<script src="js/routes/signup/signup.js"></script>
<script src="js/routes/signup/signup.route.js"></script>
<script src="js/routes/signup/signup.controller.js"></script>
</body>
app.js snippet
(function () {
'use strict';
angular.module('app', [
// angular modules
'ngAnimate',
'ngSanitize',
'ngMessages',
// 3rd party modules
'ui.router',
'ionic',
'restangular',
'LocalStorageModule',
'ngCordova',
// app modules
'app.core',
'app.layout',
'app.signup',
'app.signin'
]);
})();
I have read every resource I can find on the ngCookies api. I have also read every resource I could find regarding this injector error.
This is my import stack
<!-- Latest compiled and minified jquery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<!-- get cookie api support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
This is the code for my angularApp
angular.module('flapperNews', ['ui.router','ngCookies'])
.config([
'$stateProvider',
'$urlRouterProvider',
'$cookies',
function($stateProvider, $urlRouterProvider, $cookies) {
I am getting this error:
Uncaught Error: [$injector:modulerr]
I have checked every explanation of this error and still cannot figure out what is going wrong. Any ideas would be appreciated.
"$cookies" is not available during the configuration phase in AngularJS.
Use it in your controllers, services, factories etc.
Like in example or e.g.:
.service('cookiesService', ['$cookies', function($cookies){
console.log($cookies);
}]);
I'm using the latest ionic and I want to implement a firebase backend for my app. I followed the ionic get started guide, then used bower install to install firebase and angular fire.
The error produced is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' 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.
So adding the firebase links to the index.html does not fix this issue at least for me. Using bower to install firebase it should bundle automatically just by passing in 'firebase' into the controller.js, however it produces this error. Any ideas? Thanks in advanced!
This is all that I've changed in the app thus far:
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>
<!-- 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" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</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>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.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();
}
});
})
controller.js
angular.module('starter.controllers', ['firebase'])
.controller('DashCtrl', function ($scope, $firebase) {
// TV Shows Table
var moviesRef = new Firebase("https://moviehunt.firebaseio.com/");
var sync = $firebase(moviesRef);
$scope.movies = sync.$asArray();
})
Okay, here was my solution, I started from scratch completely, instead created the ionic app with a side menu:
ionic start myApp sidemenu
then used bower and bower install firebase install angularfire
and then added the following html links to the index.html:
<script src="lib/firebase/firebase.js"></script>
<script src="lib/firebase-simple-login/firebase-simple-login.js"></script>
<script src="lib/angularfire/dist/angularfire.js"></script>