I looked at other entries and problems people got faced and tried to solve mine but could not succeed. Somehow, I think I miss sth.
My html file looks like:
<!doctype html>
<html ng-app="IssueArchiver">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="javascripts/angular-multi-select.js"></script>
<script type="text/javascript" src="javascripts/nw-fileDialog.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/angular-multi-select.css">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Issue Archiver V1.0</title>
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/IssueArchiver.css">
<script type="text/javascript" src="javascripts/IssueArchiver.js"></script>
</head>
<body>
<div ng-controller="IssueArchiverCtrl" >
...
</div>
</body>
</html>
My IssueArchiver.js source file looks like:
angular.module('IssueArchiver', ['multi-select'], ['DWand.nw-fileDialog'], ['ngRoute'])
.controller('IssueArchiverCtrl',['$scope', '$http', '$parse', 'fileDialog', function($scope, $http, $parse, fileDialog) {
....
}]);
I get this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.28/$injector/modulerp0=IssueArchiver&p1=E…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.28%2Fangular.min.js%3A36%3A309)
Thanks !
Module dependencies should go into one array:
angular.module('IssueArchiver', ['multi-select', 'DWand.nw-fileDialog', 'ngRoute'])
Related
I have an error like this:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
this is my index.html
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="" name="description">
<meta content="" name="author">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-animate.js"></script>
<!-- CORE CSS FRAMEWORK - START -->
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<link href=" assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/app.js"></script>
<script src="assets/approute.js"></script>
<script src="assets/js/controller/logincontroller.js"></script>
<script src="assets/js/controller/dashboardcontroller.js"></script>
</head>
<body class=" ">
<div ui-view></div>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/pace/pace.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/viewport/viewportchecker.js"></script>
<script>
window.jQuery || document.write('<script src="assets/js/jquery-1.11.2.min.js"><\/script>');
</script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
and this is app.js
var app = angular.module("myApp", ['ui.router','ngAnimate']);
this is approute.js
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/login');
//$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/ui-login.html",
controller: 'LoginController',
})
.state('index-dashboard', {
url: "/index-dashboard",
templateUrl: "views/index-dashboard.html",
controller: 'DashboardController',
})
});
issued solve
I can't believe but it's work for me using
ng-app="app" to ng-app"app"
Angular JS Error: [$injector:modulerr]
I get an angular error : Error: [$injector:unpr] Unknown provider: $urlRouteProvider
I am using ui-router for routing
My Html Code:
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="Controller.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
My Module:
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
$urlRouteProvider.otherwise('/index.html');
$stateProvider.state("home", {
url: '/',
template: "home"
});
}]);
Is there anything wrong I am doing here ?
first add ui router scripts to the index html file.
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="ui-router#0.3.1" data-semver="0.3.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
Then there is character missing in here also.
change $urlRouteProvider.otherwise('/index.html');
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider)
to $urlRouterProvider.otherwise('/index.html');
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider)
Demo
You need to resolve your dependencies on other modules, for your module to work.
So rearrange your code to
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
And also change your dependency name from $urlRouteProvider to $urlRouterProvider
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
}]);
You need to call the controller.js after loading ui router reference
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
also change from
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
to
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
I'm getting this error on an iPad (first generation, the only iPad I have) while trying to use a very basic use of ngRoute and ngAnimate. It works on desktops and on iPhone(6), but not the iPad. This is the error I'm getting:
Error[$injector:modulerr]http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=ng&p1='undefined%20is%20not%20an%20object
This is the simple app I'm using:
var app = angular.module('openRoute', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/news', {
templateUrl : 'news.html'
})
.when('/info', {
templateUrl: 'info.html'
})
});
And this is the HTML with all the links necessary:
<!DOCTYPE html>
<html lang="sv" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style2/style.css" />
<script src="style2/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
</head>
<body ng-app="openRoute">
Anyone makes sense out of this?
Unless you have an dependency injection mechanism that i don't see.
You need to give the key to the dependency then the actual setting of the value, see the example below
angular
.module('ModuleName')
.config(['$httpProvider', '$compileProvider', '$resourceProvider',
function($httpProvider, $compileProvider, $resourceProvider) {
// do stuff
}]);
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...
You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>
I'm getting an uncaught object error in my console when trying to load my angularjs app. I don't know if it's related to ng-route.js or not, but that's all the error tells me is uncaught object
Here's my Code
HTML
<!doctype html>
<html class="no-js" lang="en" ng-app="selfservice">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div id="template">
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
app.js
//Initialize angular module include route dependencies
var app = angular.module("servicedesk", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
controller.js
app.controller("login", function ($scope) {
return "";
});
ng-app should contain the name of the module. Change ng-app="selfservice" to ng-app="servicedesk".
Angular-route is a separated module, you need to include it inside your servicedesk module declaration like this :
var app = angular.module("servicedesk", ["ngRoute"]);