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"]);
Related
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
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 new to angular and I'm learning angular from a sample, but when I use the exact copy of the example code, it would not work, why is that?
<html ng-app="tw">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="ProteusThemes" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var twApp = angular.module("tw",[]);
twApp.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: "templates/home.html",
controller: "HomeController"
})
.otherwise({redirectTo:'/'});
});
twApp.controller("HomeController",['$scope',function($scope){
alert("salam");
}]);
</script>
This it simple home page
Home
<div ng-view></div>
</body>
</html>
And when it runs, I get the following error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=tw&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0AM%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A6%3A417%0Aab%2Fp.%24injector%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A7%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A13%0Ae%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A283%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A490%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A35%3A117%0As%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A7%3A300%0Ag%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A399%0Aab%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A135%0Atc%2Fd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A381%0Atc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A18%3A179%0AJd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A1%0A%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A249%3A428%0Aa%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A163%3A399%0Alf%2Fc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A32%3A384%0A
http://localhost/angular.min.js
Line 6
Include angular-router as a script, where X.Y.Z is the angular version you are using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
Add ngRoute as a dependecy to your app, when using $routeProvider:
var twApp = angular.module("tw", ['ngRoute']);
You forgot to add routing js and dependency:- 'ngRoute'
var twApp = angular.module("tw",['ngRoute']);
Add in index:-
<script src="angular-route.js"></script> //after downloading
UPDATE Added plunker
Plunker
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
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