ui-router nested routes not working

Question

Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong

this is my code

app.js

var faqApp = angular.module('faqApp', ['ui.router']);

faqApp.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
    })
    .state('home.contactform', {
        templateUrl: 'templates/contactform.html',
    })
});

home.html

<div class="faq_head clearfix">
    <a href="https://crownit.in"><img src="images/backbtn.png"></a>
    <h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
  <h2 class="faq_heading">FAQs</h2>
  <ul>
    <li ng-repeat="option in faqoptions">
      <a href="{{option.url}}" class="clearfix">
          <span class="icon">
              <img ng-src="{{option.image}}">
          </span>
          <span class="faq_name">{{option.name}}</span>
          <span class="arrow">
              <img src="images/right_arrow.png">
          </span>
        </a>
    </li>
  </ul>
</div>
<div class="bottom_btn_box">
    <a href="http://website_wordpress-dev.crownit.in/termsAndroid" class="bottom_btn">Terms &amp; Conditions</a>
    <a href="http://website_wordpress-dev.crownit.in/creditsAndroid" class="bottom_btn">Credits</a>
</div>

index.html

<!doctype html>
<html>
    <head>
        <title>Frequently ask questions</title>
        <link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div ng-app="faqApp">

            <div ui-view></div>


        </div>


        <script src="js/libs/jquery-1.12.3.min.js"></script>
        <script src="js/libs/angular.js"></script>
        <script src="js/libs/angular-ui-router.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controller/homeCtrl.js"></script>
    </body>
</html>

In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.

Answer 1

You need to define the url too,

  .state('home.contactform', {
        url: "/contactform",
        templateUrl: 'templates/contactform.html',
    })

DEMO

ui-router nested routes not working

Question

1 answers

solution1
0 2016-10-25 11:29:31

ui-router nested routes not working

Question

1 answers

solution1 0 2016-10-25 11:29:31

solution1
0 2016-10-25 11:29:31