Angular ngRoute - Cannot GET page if enter url manually - angularjs

I'm a beginner to AngularJS and have the following question. I'm playing with ngRoute module and this is my code so far:
html:
<nav ng-controller="navController as nav">
<ul>
<li ng-repeat="item in navItems">
{{ item.name }}
</li>
</ul>
</nav>
<div id="main">
<div ng-view></div>
</div>
app.js
(function(window) {
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
if (window.history && window.history.pushState) {
$locationProvider.html5Mode(true);
}
}]);
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'Hello from home page';
}]);
app.controller('contactController', ['$scope', function($scope) {
$scope.message = 'Hello from contact page';
}]);
app.controller('navController', ['$scope', function($scope) {
$scope.navItems = [
{ name: 'Home', url: '/' },
{ name: 'Contact', url: '/contact' }
];
}]);
})(window);
And it works fine. Angular renders menu, and when I click on the link it shows me desired page. But except in the following case. When it displays the homepage (url: http://localhost:3000) and i manually add to the url address "/contact" then I'm getting blank page with error "Cannot GET /contact". Could someone explain me why this is happening and how can I fix it? I would appreciate any help. Thanks.

In fact you need the # (hashtag) for non HTML5 browsers.
Otherwise they will just do an HTTP call to the server at the mentioned href. The # is an old browser shortcircuit which doesn't fire the request, which allows many js frameworks to build their own clientside rerouting on top of that.
You can use $locationProvider.html5Mode(true) to tell angular to use HTML5 strategy if available.
Here the list of browser that support HTML5 strategy: http://caniuse.com/#feat=history
Source: AngularJS routing without the hash '#'

Related

SpringBoot and Angular JS route not traversing to proper page

I have used Spring Boot and Angular JS application. My home page is getting viewed from my controller but routing to new page using angular is not happening,
Angular JS - code
use strict
var demoApp = angular.module('app', [ 'ngRoute']);
//configure our routes
demoApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'contact.html',
controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
demoApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.HomeMessage = 'Home Controller Called !!!';
});
demoApp.controller('aboutController', function($scope) {
$scope.AboutMessage = 'About Controller Called !!!';
});
demoApp.controller('contactController', function($scope) {
$scope.ContactMessage = 'Contact Controller Called !!!';
});
Spring Boot Code
#RequestMapping("/main")
#Controller
public class HomeController {
#RequestMapping("/")
public String home() {
return "home";
}
}
I am getting my home page but from my html I am traversing to about and contact page where routing is not happening
HTML Code
<ul class="nav navbar-nav navbar-right ">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-shield"></i>About</li>
<li><i class="fa fa-comment"></i>Contact
</li>
</ul>
This is the home page it is displaying http://localhost:8080/main/#!/ and if I try to traverse to contact or about it is displaying the same page and it is appending "!" mark
http://localhost:8080/main/#!/#about. Can anyone suggest how is it possible to traverse to new page
Got this below error in console
Error: [$compile:tpload] Failed to load template:
home.html (HTTP status: 404 )
http://errors.angularjs.org/1.6.9/$compile/tpload?p0=home.html&p1=404&p2=
at angular.js:116

Angular routing is not hitting its route

Here i'm new to angularjs please help me why i'm not able to hit my routing. The problem is that when I click on the contact link it's not firing the .when function.
var app = angular.module('MyApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Contact', {
templateUrl: '/ApiClient/Contact/AdminContact.html',
controller:'ContactCtrl'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
hashPrefix:''
});
})
Html
<div>
Contact
</div>
You may try for this.
<p>Main</p>
Contact // Actually you put #!/Contact instead of #!Contact
<div ng-view></div>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/Contact", {
templateUrl: '/ApiClient/Contact/AdminContact.html',
controller:'ContactCtrl'
});
});
Should be
Contact
not
Contact

Routing in angularjs materialdesign

Im trying to figure out how to do routing between pages in angularjs material design.
In this example, I would like to change page when I click the sidebar link
http://codepen.io/kyleledbetter/pen/gbQOaV
Script.js
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var starterApp = angular.module('starterApp', ['ngRoute']);
// configure our routes
starterApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
starterApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
starterApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
starterApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
Have you tried to put href attribute in tag <a>?
Home
About
Contact
That way, whenever AngularJS sees a url change, it will trigger router to find the specified path.

Failing to load route with Angular inside of Phonegap

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.

Error while defining an angularjs controller

I have an view (insight index.html) like that:
<body ng-app="mainApp" ng-controller="MainCtrl">
[...]
<div>{{status}} </div>
</body>
I start the App onDeviceReady:
angular.element(document).ready(function() {
angular.bootstrap(document);
});
I have this module:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
controller: MainCtrl,
template: '<h1> Main View {{ status }} </h1>'
});
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel):/);
});
As far as I know, there are different ways to define a controller. One way is like that:
mainAppModul.controller('MainCtrl',['$scope', function ($scope)
{
$scope.status = "It works!";
}]);
The other one is like this:
function MainCtrl ($scope)
{
$scope.status = "It works!";
}
While the 1st Version results in [ng:areq] Argument 'MainCtrl ' is not a function, got undefined, the 2nd Version works fine.
Is there something I misunderstood in general?
ngRoute works in combination with ngView You won't need to specify the ng-controller in your templates, ngRoute takes care of that for you. When you have this:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
// controller: MainCtrl, // EDIT: needs to be a string of the controller name
controller: 'MainCtrl',
template: '<h1> Main View {{ status }} </h1>'
});
});
All you need is this:
<html ng-app="myApp">
<body>
<ng-view></ngview>
</body>
</html>
ngRoute will put the template of the specified route into ng-view and use the associated controller.
Note: ngRoute does not come with angular.js, you'll need the angular-route.js included as well.

Resources