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"
});
}]);
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'm currently working on a simple Electron desktop app, using Angular version 1.3.0. I am using NgRoute to switch between a main.html and settings.html view. This works fine when tested in a locally run server, but when run through Electron the link which is meant to load the settings view leads to a blank page.
I've set the base tags href to './' and the main.js and vendor.js are being loaded in fine. Below is the code from the Angular app.js file.
'use strict';
angular
.module('AppApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/settings', {
templateUrl: 'views/settings.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
});
And here is the index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<base href="./">
</head>
<body ng-app="AppApp">
<div class="container">
<div ng-view=""></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
And finally the main.html (Which loads when the electron app starts with no problems) with the link used to the load the settings view.
<div hm-dir='hm-dir'>
<img id="logo" src="images/logo-anchor_32x32.svg"/>
<div id="swipe-mask">
<h1>App</h1>
</div>
</div>
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.
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