I'm just assigned on a SPA (angularJS) project where view routing is maintained with traditional ngRoute. For now I'm not allowed to move all the routing to state based 'UI.Routing' but they permits me i can use ui routing with the new features i will add to the current codebase.So i was thinking if there is way i can work with ui.routing inside of an ng-routing application.
I'm just doing R&D on a sample app where i've put an ng-view and then inside of a specific view i tried to do ui-view but didn't come out with any positive response yet. So i'm just wondering is it really gonna work or i'm just wasting my time.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>UI Router with ngRoute</title>
<meta charset="utf-8" />
</head>
<body>
<div ng-view="">
</div>
<!-- Vendor Scripts -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-route/angular-route.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/settings/routing.js"></script>
<script src="app/settings/uiRouting.js"></script>
</body>
</html>
enter code here
angular.module('app', [
// Angular modules
'ngRoute',
// Custom modules
// 3rd Party Modules
'ui.router'
]);
enter code here
routeManager.$inject = ['$routeProvider'];
function routeManager($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'app/settings/shell.html'
}).otherwise({
redirectTo: '/home'
});
}
angular
.module('app')
.config(routeManager);
enter code here
routeManager.$inject = ['$stateProvider','$urlRouterProvider'];
function routeManager($stateProvider, $urlRouterProvider) {
$stateProvider
.state('test', {
url: '/test',
template: 'Mashallah'
});
$urlRouterProvider.when('', '/test');
}
angular
.module('app')
.config(routeManager);
Hoping for a positive reply Thanks