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) {
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 started the first app with angularJs and Kendo UI, then I had an error in the console that says:
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.6.6/$injector/modulerr
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at hb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at we (angular.min.js:21)
at HTMLDocument. (angular.min.js:334)
at j (jquery-3.2.1.min.js:2)
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.default.mobile.min.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-app="myApp" ng-controller="home">
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<p>{{ today | date }}</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<ul class="list-unstyled">
<li>Dash Board</li>
<li>Add Employee</li>
<li>Dummy Link</li>
</ul>
</div>
<div ng-view class="col-lg-10">
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/angular-route.min.js" type="text/javascript"></script>
<script src="js/angular-resource.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
app.js
'use strict';
var app = angular.module("myApp", ["ngRoute", 'ngResource', "ui.bootstrap", "kendo.directives"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
controller: "home"
})
.when("/addEmp", {
templateUrl: "addEmp.html",
controller: "addEmp"
});
});
app.controller("home", function ($scope) {
$scope.today = new Date();
});
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 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'])
I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all.
Here is my code :
var route = angular.module('app', []);
route.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/about', {templateUrl: 'partials/about.html'})
.otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);
ap.controller('MainCtrl', function($scope) {
$scope.opts = {
disable: 'right'
};
});
and the HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/angular-snap.css" />
<script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
<script src="js/snap.js" type="text/javascript"></script>
<script src="js/angular-snap.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-controller="MainCtrl">
<nav snap-drawer class="nav">
Home
About us
</nav>
<snap-content snap-options="opts">
<header class="header">
<button snap-toggle>
<img src="img/icon-menu.png" width="60px" />
</button>
Test
</header>
<div ng-view>
</div>
</snap-content>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).
Don't forget to inject the ngRoute module.
var route = angular.module('app', ['ngRoute']);
You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:
AngularJS $routeProvider docs