set default view for ui-view in angular

Question

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

pachonjcl pachonjcl · Accepted Answer · 2016-09-02T21:19:15

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="[email protected]" 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

set default view for ui-view in angular

2 Answers