I am using the following code in the script file:
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/index", {
templateUrl: "Views/post.html"
})
.otherwise({
redirectTo:"/"
})
})
So when the URL is http://localhost:55657/index.html, it should show "Views/post.html" , i.e. the post.html view in the ng-view directive of index page. Following is a snippet from my index.html page:
<body>
<div class="container">
<ng-view></ng-view>
</div>
</body>
But it is not showing anything when I load index.html. Following error is shown on browser console:
Error: $injector:modulerr
Module Error
When you navigate to "http://localhost:55657/index.html" it will load up the "/" route. Because it looks up the '#/' part after the html. You don't have any routes that matches with that.
The otherwise path does not match with any of your routes either.
You can fix this by renaming your '/index' path definition to '/' or use '/index' in your otherwise path.
For example:
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/index", {
templateUrl: "Views/post.html"
})
.otherwise({
redirectTo:"/index"
})
})
Related pages:
Docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Example: https://www.w3schools.com/angular/angular_routing.asp
Related
Is it possible to use Angularjs's routing and controller without the templateURL?
For instance, below is my current routes, controllers, and template urls,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/list1",
{
templateUrl: "js/template/2.html",
controller: "controller2"
})
...
And I have ng-view in my html,
<div ng-view></div>
I tested with the routes without templateUrl,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
//templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/view1",
{
//templateUrl: "js/template/2.html",
controller: "controller2"
})
...
the result - nothing is displayed on my screen. obviously the controller cannot be triggered anymore.
use template with empty string.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "",
controller: "controller1"
})
Angular uses the $routeProvider Definition to attach a controller to your view. If you don't want to specify the details in $routeProvider config, other option is to let the application land on one page using something like -
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when()
.otherwise({
redirectTo: '/'
});
});
This way user will land on main.html. Now on the main.html you can include several different html templates like -
<div ng-include src="'js/template/1.html'" ng-controller = 'Controller1'></div>
<div ng-include src="'js/template/2.html'" ng-controller = 'Controller2'></div>
Notice the syntax of using/including template above - "'<<Path>>'"
Hope this helps.
Setting template with empty string make error and cause recursion loading ; i solved it by just add the link of empty html file.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "dummy.htm",
controller: "controller1"
})
I'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.
My code is the following
raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/createchallenge', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
.otherwise({
redirectTo: '/'
});
}]);
My HTML looks like
<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />
<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">
When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view
( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)
I am working with Wordpress.
I'm looking forward to your help!
Working Example
plnkr
Suggestions
1. Your hrefs should not have #/
Create |
Find
2. Otherwise doesn't need redirectTo
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/createChallenge', {
templateUrl: 'create.php',
controller: 'CreateChallengeController'
})
.when('/findChallenge', {
templateUrl: 'find.php',
controller: 'FindChallengeController'
})
.otherwise("/");
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
3. Extra comma after last .when()
You have:
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
The controller is commented out but there is still a comma.
4. You might need to configure html5
(see script.js in the plnkr)
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
5. You can add the base href like so
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
Relevant Resources
I suggest checking these out:
$routeProvider docs
$route example
Let me know if that works!
I am a newbie, trying to understand routing, I read the documentation and i injected ngRoute module, but still when i am trying to click on Employee Name its not showing any thing, i have wasted lot of time on this, but no luck. Can some one help.
No errors in the console.
Code:
Plunker
app.js
var app = angular.module('demoApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/employeedetail/:empid',
{
controller: 'empDetailController',
templateUrl: '/employeedetail.html'
})
.otherwise({ redirectTo: '/index.html' });
});
The $routeProvider have to be used in conjection with the ng-view directive.
In index.html, replace the employee list template with ng-view, and also remove the controller like this:
<body>
<h2>AngularJS Demo</h2>
<div ng-view></div>
</body>
Put the employee list template as a separate html file e.g. employeelist.html.
Then config the $routeProvider to render the employee list template and its controller by default:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'employeeController',
templateUrl: 'employeelist.html'
})
.when('/employeedetail/:empid', {
controller: 'empDetailController',
templateUrl: 'employeedetail.html'
})
.otherwise({
redirectTo: '/'
});
})
Example Plunker: http://plnkr.co/edit/mQIaJqZeOal77Z2RxG8z?p=preview
I think your problem come from the fact you don't use :
the ng-view attribute
I'm new to Angular and cannot figure out how to get a route working inside of phonegap. Here is my Angular code:
var app = angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/main.html',
controller: 'mainControl'
})
$routeProvider.when('/test' , {
templateUrl: 'app/views/test.html',
controller: 'testControl'
})
$routeProvider.otherwise({
redirectTo: '/'
});
});
app.controller('mainControl' , function(){
})
app.controller('testControl' , function(){
})
I'm trying to access '/test' with this link inside of my main.html:
<span>Click <a href='/test'>here</a> to go to the test page<span>
When I click the link inside of ripple I'm getting a 404 in the console for localhost:4400/test/
Like I said I'm new to Angular so from what I can tell both routeProviders match up but I can't get the page to load when clicked through the link.
Help is always appreciated.
I think you need a hashtag before the slash.
<span>Click <a href='#/test'>here</a> to go to the test page<span>
Hope this solves this problem.
I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.