Good afternoon everyone,
I started AngularJS a few days ago and, if I usually find my all answers here, I have a mysterious error...
Here is the evil error:
Error in event for (unknown): SyntaxError: Unexpected <
extensions::uncaught_exception_handler
Here is for my code:
HTML (index.html)
<script src="/app/main.controller.js" type="text/javascript" charset="utf-8"></script>
<script src="/app/controllers/test.controller.js" type="text/javascript" charset="utf-8"></script>
Home
Design
ANGULAR (main.controller.js)
function RouteProvider ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/app/views/home.html",
controller: "homeCtrl"
})
.when("/design", {
templateUrl: "/app/views/design.html",
controller: "testCtrl"
})
.otherwise({
redirectTo: "/"
});
}
STRUCTURE
index.html
/app
main.controller.js
/controllers
/views
This is the part of the code concerned by my route config.
The error happens whenever I activate the links above...
Thank you for your time!
(It's my first post, sorry if it's messy and if you need more code juste ask and I'll add it :])
Related
I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
in index.html
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
controller
angular.module("testCtrl",[]).controller('TestController', ["$scope", function($scope) {
$scope.Myname = "my first route";
}]);
app.js
var app = angular.module('testApp',["ngRoute", "testCtrl"]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/",{
templateUrl: "Views/main.html"
})
.when("/details",{
templateUrl: "Views/details.html",
controller : TestController
})
.otherwise({
redirectTo : "/"
});
}]);
my homepage loads fine but with some reason /details show error like --- No webpage was found for the web address: http://127.0.0.1:8080/details
I am new to angular and I am learning. I am not able to understand whats wrong ..do we have any tools to debug route error? I am using angular 1.5.8 version for now.
server console - "GET /details" Error (404): "Not found"
The issue is that TestController isn't defined in app.js. You should use the controller name as a string, like so.
.when("/details",{
templateUrl: "Views/details.html",
controller : "TestController"
})
See this plunk for a working example.
https://plnkr.co/edit/xi20MmchJY6TO1SG2o0d?p=preview
I think you have omitted the dependency on ngRoute:
angular.module('testCtrl', ['ngRoute'])...
Are you referencing ng-app in your HTML as well (can't see your HTML code)
Presumably you have included your scripts in the HTML page too?
I have a web app that doesn't seem to work at all if I try to use ngRoute approach to changing primary page view. The routing config looks like:
var app;
app = angular.module('genehaxx', ['ngGrid','ngRoute', 'ngSanitize', 'ui.bootstrap','genehaxx.filters', 'genehaxx.services'])
.config(function($routeProvider){
//route setup
$routeProvider
.when('/workflows', {
templateURL: '/partials/workspace_view.html',
controller: 'MainController'
})
.when('/jobs', {
templateURL: '/partials/submissions_view.html' ,
controller: 'MainController'
})
.when('/', {
templateURL: '/partials/analyses_view.html',
controller: 'MainController'
})
.when('/analyses', {
redirectTo: '/'
})
.otherwise({
redirectTo: '/'
});
});
function MainController($scope, $modal, $rootScope, User, Data, Workflow, Step){
//lots of proprietary code here..
}
I have tried it with and without the '/' in front of partials. I have tried it both with its normal web-server reverse proxied under nginx and directly under http-server from its directory. In both cases there is no evidence whatsoever that the partials pages are ever requested from the server. The main view is a bit hairy to post in entirety but the relevant bits look like:
<!doctype html>
<html lang="en" ng-app="genehaxx" >
<head>
<meta charset="utf-8">
<title>Welcome to Genengine!</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/ng-grid.css">
<script src="lib/jquery-2.0.2.js"></script>
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/transition.js"></script>
<script src="lib/bootstrap-custom/ui-bootstrap-custom-tpls-0.10.0.js"></script>
<script src="lib/ng-grid-2.0.7.debug.js"></script>
<script src="js/app.js"></script>
<script src="js/filters.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="js/objects.js"></script>
<script src="js/services2.js"></script>
<script src="js/dropdownToggle.js"></script>
</head>
<body>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
I have left off the navbar stuff as it seems irrelevant and I get the same results clicking it or directly entering the url with #whatever. The /libs directories have the latest angular, angular-route, angulare-sanitize from bower.
Small samples I tried plugging in my libraries and partials seem to work which is even more frustrating. I have been stumped on this for days. I hacked around it in production with mess of ng-includes and some "clever" code but I would rather get this working. Anything pop out? When I say it doesn't work, again I mean that I see no evidence that any routing occurred in that these partials are never requested from the server.
You have typos inside of your when calls:
Example:
templateURL: '/partials/workspace_view.html',
should be
templateUrl: '/partials/workspace_view.html',
(notice the difference in caps, templateURL changes to templateUrl)
Couple things
1 - Stringify MainController
.
$routeProvider
.when('/workflows', {
templateURL: '/partials/workspace_view.html',
controller: 'MainController'
})
.when('/jobs', {
templateURL: '/partials/submissions_view.html' ,
controller: 'MainController'
})
.when('/', {
templateURL: '/partials/analyses_view.html',
controller: 'MainController'
})
.when('/analyses', {
redirectTo: '/'
})
.otherwise({
redirectTo: '/'
});
2 - You don't need ng-controller on body. ngRoute will bind the controller to the view for you. However, make sure you have MainController defined in your app, otherwise angular will throw an error at you
I see that #Mark Kline's solution solved your issue, but I would like to make suggestion that might help you in the long run.
You mention in a comment that your controller is complicated, as such I would highly recommend that you break it up into smaller controllers where each is used only to control one of the routes. From experience if you are using routing to develop an application then using one controller is going to get very large quickly, and in the long run be very hard to maintain. I have tried, in previous apps to use a single controller for several different views and it tends to get out of hand rather quickly.
If you are able, I highly suggest that you separate as much functionality as possible to save yourself a lot of future headaches, it is going to make your code easier to read, maintain, and debug.
I am new to angular js. I was just writing some sample application and I ran into problem with routes.
I am using cdn for angular
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
I created a html partial/file and wanted to link it to the index.html.I added the
<ng-view></ng-view> in the index.html and also the following code in the html for routing
angular.module("sample", []).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
But I am getting an Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=enterprise&p1=Erro…s.org%2F1.2.13%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%......2)
Also, I tried downloading angular-route.js and adding ngRoute as dependency, but it still does not work.
angular.module("enterprise", ['ngRoute']).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
I have downloaded various versions of angularjs but I am stuck with the same error. Any idea has to why I am getting this error and how to resolve it?
Try this
angular.module("enterprise", ['ngRoute']).config(["$routeProvider", function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
}]);
Let me know if it doesn't work
Can you try removing the slash from templateUrl like this?
templateUrl: "partials/list.html"
Also, could you verify that you have set ng-app somewhere in the html and the template exists at the proper location (partials/list.html)?