Issue
I have a simple angular project structure
app
index.html
view
main.html
home.html
landingPage.html
Index.html looks like
<body ng-app="myApp">
<div ui-view>
</div>
</body>
App.js file looks like
$urlRouterProvider.otherwise('/landingPage');
$stateProvider.state('landingPage', {
url: '/landingPage',
abtract: true,
templateUrl: 'view/landingPage.html'
})
.state('landingPage.home', {
url: '/home',
templateUrl: 'view/home.html'
}).state('landingPage.main', {
url: '/main',
templateUrl: 'view/main.html'
});;
and
landing page looks like
<header></header>
<div>
<div ui-view>
</div>
</div>
When I run the app I see the header correctly but do not see the home.html content. How do I make home.html default every time?
As you can see I have abstract true but that does not work. I also tried ng-include which works but gets error TypeError: Cannot read property 'insertBefore' of null
sample plunker HOME should have been displayed on running but nothing shows
Solution
You need to define another ui-view on your landing page as landingPage is the parent of home and main because of the . notation used
If you want to set a default view for child state with ui.router there is a section with FAQ that explains it, basically you can do it via url.
Every time you go to parent state redirect it to the children state you can do it like this:
$urlRouterProvider.when('/landingPage', '/landingPage/home');
In code will be like this:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var app = angular.module('yourApp', ['ui.router']);
app.config(
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/landingPage');
$urlRouterProvider.when('/landingPage', '/landingPage/home');
$stateProvider
.state('landingPage', {
url: '/landingPage',
abtract: true,
template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
})
.state('landingPage.home', {
url: '/home',
template: '<div>HOME</div>'
})
.state('landingPage.main', {
url: '/main',
template: '<div>MAIN</div>'
});
}
);
</script>
</head>
<body ng-app="yourApp">
<div ui-view>
</div>
</body>
</html>
Here is a plunker example
Answered By – pachonjcl
Answer Checked By – Mildred Charles (AngularFixing Admin)