Recently, I decided to implement ui-router for Angular in my project. After adding the following code snippet to my app module within the app.js file:
angular
.module("ngClassifieds", ['ngMaterial', 'ui.router'])
.config(function($mdThemingProvider, $stateProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
I proceeded to place an empty ui-view element in my HTML to test whether the headers would be displayed, but unfortunately, no luck there:
<ui-view></ui-view>
When trying to access the paths localhost:8080/#/stateone and localhost:8080/#/statetwo on my local server, the headers were not loading as expected, and instead, only the page content was visible.
It's worth mentioning that I have already included angular-ui-router.js in my index.html file.
If someone could provide insights into what may have gone wrong with my configuration, it would be greatly appreciated.
For reference, here is the order in which I have included my scripts:
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
<script src="components/classifieds.fac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>