I have a really weird bug, I have set my routes and my controllers. Now I have just a blank page with no errors?
index.html;
<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
<head>
<title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
<!-- AngularJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
<!-- Controllers -->
<script src="/app/front/controllers/controller.js"></script>
<!-- Router -->
<script src="/app/front/router.js"></script>
</head>
<body ng-view></body>
</html
>
Controller.js:
/**
* RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);
RekenTalent.controller('rekenCtrl', ['$scope', function($scope){
}]);
Router.js:
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirect: '/index'
});
}]);
And /templates/index.html says just 'hi'. Does anyone know why I get a blank page? It should redirect me to /index.html and /index.html should use /templates/index.html as the template. Whats the problem and the fix?
UPDATE:
when I go to /index it works, so the otherwise param doesn`t work, why not?
change redirect to redirectTo
And it's better to use home.template to avoid all this kind of problems, I mean consider:
You have an index.html that contains your whole included scripts, like angular, jquery , ..., and in the body tag there is ng-view, ok?
Now, if you have any templates such as welcome or whatever for index, write that template in a home.html, OK? Like this:
index.html :
<body ng-app="yourapp">
<div ng-view>
</div>
</body>
Home.html
<div>
Welcome, user. This is index.
</div>
Your app configuration:
yourapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.otherwise({redirectTo:'/'});
}
And it is a good practice to put all of your templates inside a partials folder, where the father folder contains index.html like this
root
yourAppFolder
1-Assets
Css
Js
2-Partials
home.html
login.html
3-index.html
Found it; redirect should be redirectTo;
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/app/front/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
I have this sample of code for example:
.config(['$routeProvider',
function($routeProvider) {
console.log('routeando');
//alert('otherwise' + $routeProvider.route);
$routeProvider.
when('/', { templateUrl: 'home'}).
when('/route1', { templateUrl: 'route1'}).
/*Without the next line, redirectTo doesnt work*/
when('/error', { templateUrl: 'error'}).
otherwise({ redirectTo: '/error'});
}]);
Otherwise is only going to work if you have already a "when" parameter for that route.
Excuse me for my english and have a nice day.
Related
my main directory folder name is angularjs and there have many files, file lists are given billow.
1.index.html
2.main.html
3.blue.html
4.red.html
5.green.html
i want to create routing using AngularJs, i have do that but facing error what i have wrong.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "index.html"
})
.when("/red", {
templateUrl: "red.html"
})
.when("/green", {
templateUrl: "green.html"
})
.when("/blue", {
templateUrl: "blue.html"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
</body>
and i want to remove # simble from routing path
Try replacing your code with below.
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
If you want to remove the exclamation mark, you should add a config to the $locationProvider as below.
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
Refer,
Exclamation mark after hash (#!) in angularjs app
AngularJS v1.7.4
I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.
Additionally errors such as
The controller with the name 'ContactController' is not registered.
and
The controller with the name 'AboutController' is not registered.
Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.
For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.
Files are being loaded as
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet" />`
Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.
The code in main html file is:
var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
/js/controllers/home.controller.js
angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
$scope.message = 'Main page of the app';
});
/js/controllers/about.controller.js
angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
$scope.message = 'This is about us page';
});
/js/controllers/contact.controller.js
angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us page ...';
});
/partials/home.html
<div ng-controller="HomeController">
<h3>Home page</h3>
<p>{{message}}</p>
</div>
/partials/about.html
<div ng-controller="AboutController">
<h3>About Us</h3>
<p>{{message}}</p>
</div>
/partials/contact.html
<div ng-controller="ContactController">
<h3>Contact Us</h3>
<p>{{message}}</p>
</div>
The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):
angular.module('gmsApp.controllers', [])
Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:
angular.module('gmsApp.controllers')
Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.
From angularjs docs:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
I am trying to build a basic SPA using angularJS, the problem is I am not able to load the template using angularJS, the following is my code
customAngular.js
var app = angular.module("appModule", ["ngRoute"]);
app.config([function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/angularJS/angular.min.js"></script>
<script src="~/angularJS/customAngular.js"></script>
</head>
<body ng-app="appModule">
main
Green
red
<div ng-view></div>
</body>
</html>
Can anyone help me to understand the error
UPDATE 1
has bneen modified
UPDATE 2
i have updated the page as per the request, i have changed the angular in to unminified version 1.6
<script src="~/angularJS/angular.v1.6.1.js"></script>
<script src="~/angularJS/angular-route.js"></script>
<script src="~/angularJS/customAngular.js"></script>
and changed my customAngular.js file like this
var app = angular.module("appModule", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
now i am able to see the index page like this
index page
but when i move my page to /red, i get an error like this
error page on redirection
You have injected your $routeProvider the wrong way:
app.config([function ($routeProvider) {
/* $routeProvider will be undefined */
...
}]);
Thing is, you mixed two ways of Angular injection:
app.config(function ($routeProvider) {
...
});
And
app.config(['$routeProvider', function ($routeProvider) {
...
}]);
You put [] around your function, so Angular expected to see some component identifiers as strings in the head of the array. So, simply remove the square brackets or add the component identifier, as shown in the two examples above.
Update
You still see an error because, as #Gayathri pointed out in the comments, you are trying to access the URI /red on your server... which doesn't exist. You links should be like:
main
Green
red
See this codepen.
You are missing <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I am new to angularJS. I tried to and practice some examples and met a very tricky error. I spent a couple of hours to figure out RangeError,but I failed to overcome it. Can anyone help me get out from this trap?
In app.js
var sampleApp = angular.module('phonecatApp', ['ngRoute']);
sampleApp .config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
In index.html
<!DOCTYPE html>
<head>
</head>
<h1>weclome to test!</h1>
<body ng-app="phonecatApp" >
<div ng-view></div>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</body>
</html>
In add_order.html
<h2>Add New Order</h2>
{{ message }}
In show_order.html
<h2>Show Orders</h2>
{{ message }}
In addition, the wrong source directory of folder that store js and html files cause the RangeError?
This is error that shows in chrome console
I think you are browsing to /, which is probably index.html, which includes app.js, which will need index.html due to the route, which will require app.js, etc... You may need to put your / template in another html file (let's call it home.html), and change the template for / to home.html
I also had the same issue. Then I tried with putting 'script' tags to 'head' tag. It works fine now.
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</head>
<body ng-app="phonecatApp" >
<h1>weclome to test!</h1>
<div ng-view></div>
</body>
</html>
Split the routing scripts in to a different file.
angular.module('phonecatApp').config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
then refer it in your index file may be like :
<script src="static/router.js"></script>
that should fix it.
I was facing similar problem/ error. What worked for me was I used the routes with # . i.e I removes this part from app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Does anyone know how I can route using a search query in Angular? I have tried working with $routeProvider but it doesn't work with search queries.
This is the code I wrote for routing with $routeProvider:
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/?table=table1', {
controller:'PostsCtrl',
templateUrl: 'table1.html'
})
$routeProvider.when('/?table=table2', {
controller: 'PostsCtrl',
templateUrl: 'table2.html'
})
$routeProvider.otherwise({redirectTo: '/?table=table1'});
}]);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
and the templates they are referring to:
<script type="text/ng-template" id="table1.html">
some code
</script>
and
<script type="text/ng-template" id="table2.html">
some code
</script>