SpringBoot and Angular JS route not traversing to proper page - angularjs

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

Related

How to properly use the ngRoute using the #!

I have this in my Login.cshtml
<div class="contact-widget" data-loader="button">
<div ng-view>
</div>
</div>
and to change the view I have this:
<ul class="one-page-menu">
<li class="current"><div>Create Account</div></li>
<li><div>Login</div></li>
</ul>
in my app.js, I have this:
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/Login", {
templateUrl: "/Partials/LoginPartial.html",
controller: "LogInController"
})
.when("/CreateAccount", {
templateUrl: "/Partials/CreateAccountPartial.html",
controller: "CreateAccountController"
})
.otherwise({ redirectTo: "/Login" });
}])
this is in my controller to view the login
public class LoginController : Controller
{
// GET: Login
public ActionResult Login()
{
return View();
}
}
When I click on the Login link to view the login form I get this in the Url http://localhost:18223/Login/Login/#!/Login and when I click the createaccount link I get this http://localhost:18223/Login/Login/#!/CreateAccount
but I can see the view change. My problem is; how do I make the Url get to be like this http://localhost:18223/Login/Login for both loginview and createaccount view

Angularjs $urlRouterProvider.otherwise not working with MVC5 until page refresh

I am working on a mvc5 application (not spa) but in one of my pages, I am creating a multi step form and chose angular. Everything is working if I refresh the page, but when I click on the link that redirects me to my page with angular, the ui-router is not working.
index.chtml
<div class="row" ng-app="formApp">
<!-- views will be injected here -->
<div ui-view></div>
</div>
<script>
require(["angular", "ngAnimate", "ui.router"], function (angular, ngAnimate, router) {
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: "/AutoAccident/Form",
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: "/AutoAccident/FormProfile",
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: "/AutoAccident/FormInterests",
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: "/AutoAccident/FormPayment",
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})
// our controller for the form
// =============================================================================
.controller('formController', function ($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function () {
alert('awesome!');
};
});
});
</script>
My issue is that when i go to //mydevurl/AutoAccident/Index which triggers the code above, I am getting
Uncaught Error: [$injector:modulerr]
https://docs.angularjs.org/error/$injector/modulerr?p0=formApp&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.4.5%2F$injector%2Fnomod%3Fp0%3DformApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:6:416%0A%20%20%20%20at%20http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:24:78%0A%20%20%20%20at%20a%20(http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:23:141)%0A%20%20%20%20at%20http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:23:384%0A%20%20%20%20at%20http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:37:332%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:7:322)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:37:180)%0A%20%20%20%20at%20eb%20(http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:40:435)%0A%20%20%20%20at%20d%20(http:%2F%2Flocalhost:51416%2FScripts%2Flibs%2Fangular%2Fangular.min.js:19:381,
but when I try to refresh by clicking refresh button of my browser, the app works and my URI becomes http://mydevurl/AutoAccident/Index#/form/profile automatically and shows my multi step form.
Same error when I click my menu. My multistep form is not the default page when my app loads.
<li>Auto Accident</li>

Menu link not working with angular $routeProvider and Spring MVC

I'm having trouble working with Angular.js $routeProvider, I have a link on a menu in which will be mapped via the angular route and will later call an action in the Spring, but it does not work! Below are my files...
snippet of menu.jsp
<li>
<a class="tooltip-tip ajax-load" href="#" title="Clientes"><i class="entypo-user"></i><span>Clientes</span></a>
<ul>
<li><a class="tooltip-tip2 ajax-load" href="#/customer" title="Novo Cliente"><i class="entypo-newspaper"></i><span>Novo Cliente</span></a></li>
</ul>
</li>
app.js
var app = angular.module('jooceboxCrm', ['ngRoute', 'service', 'customer', 'ui.bootstrap']);
customer.js
var app = angular.module('customer', []);
app.config(function($routeProvider, $locationProvider, $httpProvider) {
//Set CSFR Token
$httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = $("meta[name='_csrf']").attr("content");
console.log('Acesso a ConfiguraĆ§Ć£o do RouteProvider.');
$routeProvider.when('/customer', {
templateUrl : '/viatge/auth/customer',
controller : 'customerController'
}).otherwise({
redirectTo : '/customer'
});
});
app.run([ '$rootScope', function($rootScope) {
$rootScope.customer = [];
console.log('app.run');
} ]);
app.controller([ 'customerController', function($scope) {
console.log('customerController');
} ]);
EDIT
I'am using Spring MVC and Tiles framework for rendering my pages. So my value for template url points to a method in Spring MVC controller:
templateUrl : '/viatge/auth/customer'
#Controller
#Transactional(propagation = Propagation.REQUIRED)
#RequestMapping("/auth")
public class CustomerController {
final static Logger logger = LoggerFactory
.getLogger(CustomerController.class);
#Autowired
private CustomerFacade customerFacade;
#RequestMapping("customer")
public String customerScreen() {
return "customer/newCustomer";
}
}
I'm following this tutorial

Angular ngRoute - Cannot GET page if enter url manually

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 '#'

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.

Resources