I've been building an app using Angular and Firebase and it was working until I decided to change directories and build it again from scratch to fix some compatibility issues (using bootstrap). Now when I try to go to my URL I get the following error:
Error: [$injector:unpr] Unknown provider: $firebaseArrayProvider <- $firebaseArray
I've search through similar questions and have not found any answers that solve my problem. I've tried installing Angular through bower and by linking, as well as linking to older versions of AngularFire.js and Firebase.js. Below is the code for each of the files involved.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/dirty-soda.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-route.js"></script>
<head>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
<script src="editor/editor.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="angularfire.min.js"></script>
<script src="../src/ace.js"></script>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.editor'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: 'app/editor'});
}]);
editor.js
angular.module('myApp.editor', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/editor', {
templateUrl: 'editor/editor.html',
controller: 'SnippetCtrl'
});
}])
.controller('SnippetCtrl', ['$scope','$firebaseArray','CommonProp', function($scope,$firebaseArray,CommonProp) {
$scope.username = CommonProp.getUser();
var firebaseObj = new Firebase("<Firebase URL>");
$scope.snippets = $firebaseArray(firebaseObj);
}]);
You forgot to include new module "firebase" in app.js
app.js
angular.module('myApp', [
'ngRoute',
'myApp.editor',
'firebase'
]).
Edit:
Include the answer from #Explosion Pills:
In index.html, you also should move your script src="app.js" to the last line in order to load all required js files first before registering them.
Related
I start to learn angularjs whit this simple code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools- yui-compressed.js' type='text/javascript'></script>
<script src='assets/js/menuMatic.js' type='text/javascript'></script>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body ng-app="myApp">
<div ng-include="'header.html'"></div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/posts.js"></script>
<script src="js/service/post.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp',['ngRoute'])
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
when i use angularjs 1.2.27 it's work fine but when i use angularjs 1.5.8 it show me this error
angular.js:38Uncaught Error: [$injector:modulerr] angular.js:38
i believe it some global controller function is disabled or something but i don't know how to fixed
EDIT
I use angularjs version 1.4.8 and it's working .. but when i use 1.5.8 it not working anymore
I think you need to separately add $rootProvider to your config like below:
var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
}]);
It's either you put semi-colon at the end of the first line.
Or remove the "app" in second line of code.
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
or
var app = angular.module('myApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
I can't seem to create a simple angular route in my current application, since it handles me the following error: Uncaught Error: [$injector:modulerr]
I have already injected ngRoute as a dependency in my module, as well as added the angular-route.js script in my html file. My current Angular version is 1.2.25, so it's the angular-route script.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ACME App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="init">
<a ng-href="#main">sup</a>
<ng-view></ng-view>
</body>
</html>
controllers.js
var app = angular.module("init", ["ngRoute"]);
app.config('$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
});
templates/main.html
<h1>Main Page</h1>
I think that you missed [ ]
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
}]);
I get the error on top always for some reason. Here is my code:
index.Html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
Page.Html:
Hello World
main.js:
var app = angular.module('app', ["ui.route.Injector"])
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'page.html'
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
Here is a picture of it!:
I dont know. I tried a lot of ways to avoid this including trying to go to libraries and copy it but still dosent work. Im spectatiting the problem is with the script tag. But i dont know for sure.
Here is a plnkr. As rgthree mentioned you need to use ng-route with $routeProvider. You'd need to download it or add <script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>. Substitute 1.4.2 for your version of angular.
I have a pretty straightforward code and I don't understand what it's not working.
I want to reference app.js from within index.html. In the part, I have a reference to it (if I press Ctrl + click it sends me to the right file), but when i run it in browser, I have the following error:
Uncaught SyntaxError: Unexpected token <
Due to this, I also get the failed to load module from Angular, since it's not finding it.
Uncaught Error: [$injector:modulerr] Failed to instantiate module userApp due to:
Error: [$injector:nomod] Module 'userApp' 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.
angular.module('userApp', [
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'userService',
'ngAnimate',
'ngRoute'
]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.1/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="../assets/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body data-ng-app="userApp" data-ng-controller="mainController as main">
</body>
</html>
The folder placement is like this
public/
----------
- index.html
- app.js
- other_stuff
If I take the code from app.js and write it within <script></script> like this it works.
<script type="text/javascript">
angular.module('userApp', [
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'userService',
'ngAnimate',
'ngRoute'
]);
</script>
What am I doing wrong?
Try with angular.bootstrap() there is no dependency with ng-app directive:
<body data-ng-controller="mainController as main">
</body>
now in the script file:
<script type="text/javascript">
angular.module('userApp', [
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'userService',
'ngAnimate',
'ngRoute'
]);
angular.bootstrap(document, ['userApp']);
</script>
The issue seems to be with the usage of <base href="/"> and you can learn about nobase here.
I'm trying to set up a demo angular app but for some reason my partial (partials/test.html) content isn't loading into the layout file. Here's the index.html:
<!DOCTYPE html>
<html lang="en" ng-app="btq">
<head>
<meta charset="utf-8" />
<title>NgView Test</title>
</head>
<body>
<p>Some stuff on the page.</p>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
AngularJS is version 1.0.7. app.js contains the following:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('btq', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
$routeProvider.otherwise({redirectTo: '/dashboard'});
}]);
/* Controllers */
angular.module('btq.controllers', []).
controller('DashboardCtrl', [function() {
}]);
I'm obviously missing something simple. Any help would be appreciated!
May be its because of "typo". You wrote "dashbaord" instead of "dashboard" here:
$routeProvider.when('/dashbaord' , ...
Change
angular.module('btq.controllers', [])
to
angular.module('btq')
otherwise this creates a second app in your app.js