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);
}]);
Related
I have a navbar I am trying to inject into a main page. I ran the page and checked F12 > Network which showed that the directive's templateURL (navbar.html) was either not called or not injected. There are no errors. Anyone have any idea what might be wrong with my code?
The directory structure is:
landingpage.html
js
controllers
NavController.js
directives
navappDirective.js
app.js
templates
navbar.html
Below is the code:
landingpage.html
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link href="../css/landingpage.css" rel="stylesheet">-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script type="text/javascript">
alert("this works");
</script>-->
<body>
<div>
<navbar ></navbar>
</div>
<!-- Insert navbar-->
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/NavController.js"></script>
<!-- Directives -->
<script src="js/directives/navappDirective.js"></script>
</body>
navappDirective.js
navapp.directive('navbar', function() {
return {
restrict: 'E',
scope: {
},
/*template: '<p>Hi</p>'*/
templateUrl: 'templates/navbar.html'
};
});
navbar.html just has a paragraph currently for testing purposes.
Thanks
ng-app is missing in landingpage.html
In you landingpage.html, please update it as below
<body ng-app="myapp">
In app.js, you probably should have
angular.module('myapp',[]);
Thank You everyone!
I had ng-app called in navbar because that is where I was using the controller information and thought that would work.
The problem was solved with the following steps:
Changed the templateURL to ../../templates/navbar.html
Called the ng-app directive on the landingpage.html This allows the page to call the app. The still have the ng-controller directive in navbar for encapsulation purposes.
After the above steps I still got a cross referencing error since you cannot call a html file from a file system. So I ran a python server using python -m http.server (for Python 3) after cd'ing to the directory holding my project. Then I could run my project using localhost:8000/
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('!');
I'm working on a Node.js project that uses Angular, and I'm trying to implement multiple views and routing. I've followed the instructions outlined here for installing the angular-route.js file and dependent module:
https://docs.angularjs.org/api/ngRoute
But I still get this error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module blogApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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.3.20/$injector/nomod?p0=ngRoute
Here are the parts that seem relevant from my controller and HTML files:
app.js
var blogApp = angular.module('blogApp', ['ngRoute']);
index.html
<!DOCTYPE html>
<html ng-app="blogApp">
<head>
<title>Blog Posts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="stylesheets/style.css" rel="stylesheet" media="screen">
</head>
<body ng-controller="postController">
// page content
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
I'm new to working with Angular and Node, so any thoughts on this greatly appreciated!
It's just a typo (missing equal sign). This line:
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
Should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
There is a very small typo in the script include for ngRoute. You had src"https:// rather than src="https://
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
You can debug these kinds of issues by checking the developer tools and making sure the script is loaded without error.
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'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>