Menu
I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.
Here is my plunker.
And my code:
Created my navigation:
<body ng-app="Productportfolio">
<ul>
<li>
<a href="#/home">Home</a>
</li>
<li>
<a href='#/privat'>Log in</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>
Made the templates:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])
Added the $routeProvider to my config:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
$locationProvider.hashPrefix('!');
}]);
820
Routing is used to present different views to the user on the same web page. This is basically the concept used in Single page applications which are implemented for almost all modern day web applications A default route can be set-up for angular.JS routing.
AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. We have to download angular-route.js script that contains the ngRoute module from AngularJS official website to use the routing feature. You can also use the CDN in your application to include this file.
A default route can be set-up for angular.JS routing. It is used to determine what will be the default view to be shown to the user Parameters can be passed to the route via the URL as route parameters.
The ngRoute module routes your application to different pages without reloading the entire application. What do I Need? To make your applications ready for routing, you must include the AngularJS Route module:
In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.
There were some errors in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--AngularJS-->
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a ng-href="#home">Home</a>
</li>
<li>
<a ng-href="#private">Private</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
</body>
</html>
Angular BEFORE ngRoute or any other moduleng-href='#routeName' or, otherwiseAnd in your js:
var myApp = angular.module('Productportfolio', ['ngRoute']);
myApp.controller('ProductCtrl', ['$scope',function ($scope) {
var vm = this;
}]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]);
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
Last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs, you need to add <base href="/" /> at the end of your head.
For some reason, plunker does not allow me to do that, but I'm sure you'll get it to work on your version.
Here You can find the working plunker reproducing your application.
Hope I've been helpful.
186
The remaining and not visible problem is here :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider',
config() function of module object takes as parameter, a array of strings and not a string with "," as separator char inside it.
See example and doc here :
https://docs.angularjs.org/guide/providers#provider-recipe
So, it should be :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider', '$locationProvider',
Update :
But in fact, in your case, it works even without precising the array :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(
I updated the plunker and the app.js with both versions. I have the impression that the array is not mandatory (any longer). So, it seems better to ignore that parameter, especially, if with bad value, it may create side-effects.
Here the plunker with corrections (ordered lib, typos and config function called) : http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview
I have removed $locationProvider.hashPrefix('!') as not suitable for the url you are using. See @AndreaM16 answer for that.
Besides, you have not declared your service you want to use in your controller.
app.js
angular.module('Productportfolio', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]
);
or app.js without the array parameter in config function :
angular.module('Productportfolio', ['ngRoute'])
.config(
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
// $locationProvider.hashPrefix('!');
}
);
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--Bootstrap-->
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#private">Log in</a>
</li>
</ul>
<div ng-view></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
