MrFoh MrFoh - 3 months ago 25
AngularJS Question

ui-router not working with material design lite

Am trying to use material-design-lite with ui-router, but my templates are never rendered into the view

<html lang="en" ng-app="admin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="fragment" content="!">
<base href="/">
<title ng-bind="state.data.title"></title>

<link rel="stylesheet" type="text/css" href="libs/material-design-lite/material.min.css">
<link rel="stylesheet" type="text/css" href="src/css/app.css">
</head>
<body>
<div class="app-layout mdl-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<app-header></app-header>

<app-sidebar></app-sidebar>

<main class="mdl-layout__content mdl-color--grey-100 page">
<section ui-view></section>
</main>
</div>

<script>
//Global Variables
</script>

<script src="libs/material-design-lite/material.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="src/js/modules/angular-mdl.js"></script>

<script src="src/js/app.js"></script>
<script src="src/js/app.routes.js"></script>

<script src="src/js/controllers/main.js"></script>
<script src="src/js/controllers/dashboard.js"></script>
<!-- Directives -->
<script src="src/js/directives/header.js"></script>
<script src="src/js/directives/sidebar.js"></script>
</body>
</html>


app.routers.js file

//App Routes
angular.module('admin').
config(['$stateProvider', '$urlRouterProvider','$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/dashboard');

$stateProvider.state('app',{
abstract: true,
url: '',
controller: 'MainController'
})
.state('app.dashboard', {
url: '/dashboard',
data: {
'title': "Admin - Dashboard"
},
templateUrl: '/tpls/dashboard.html',
controller: 'DashboardController'
})
}
]);

Answer

Add template: "<ui-view />" to your 'app' state's config object

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states

Remember: Abstract states still need their own <ui-view/> for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "<ui-view/>".

Comments