AngularJS

Question

Account Home and Blog Home should load "Account Home working fine" and "Blog Home working fine inside" "/" URL by default without click

应该默认将accountHome 和blogHome 加载到account 组件，将blog 组件加载到index.html。

//config
var myapp = angular.module('myapp', ["ui.router", "navbarModule", "carouselModule", "accountModule", "blogModule"]);

myapp.config(function($stateProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
    $stateProvider
        .state('/', {
            url: "/",
            views: {
                "account": {
                    component: "account"
                },
                "blog": {
                    component: "blog"
                }
            }
        })
        .state("accountHome", {
            parent: '/',
            url:"",
            template:"<h1>Account Home working fine</h1>"
        })
        .state('accountDetails', {
            parent: '/',
            url:"details",
            template:"<h1>Account Details working fine</h1>"
        })
        .state("blogHome", {
            parent: '/',
            url:"",
            template:"<h1>Blog Home working fine</h1>"
        })
        .state('blogDetails', {
            parent: '/',
            url:"details",
            template:"<h1>Blog Details working fine</h1>"
        })
    });
    
  //Account component
  
    (function(angular) {
 'use strict';
 var accountModule = angular.module("accountModule",[]);
 accountModule.component('account', {
  bindings: {
  },
  controller: AccountController,
  templateUrl: '/components/account/account.html'
 });

 function AccountController(){

 }
})(window.angular);

//Blog component

(function(angular) {
 'use strict';
 var blogModule = angular.module("blogModule",[]);
 blogModule.component('blog', {
  bindings: {
  },
  controller: BlogController,
  templateUrl: '/components/blog/blog.html'
 });

 function BlogController(){

 }
})(window.angular);

    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <base href="/#">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Angular -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <!-- UI-Router -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
  <link rel="stylesheet" type="text/css" href="assets/css/navbar.css">

  <script src="app.module.js"></script>
  <script src="app.config.js"></script>
    <script src="components/navbar/navbar.component.js"></script>
  <script src="components/carousel/carousel.component.js"></script>

  <script src="components/account/account.js"></script>
    <script src="components/blog/blog.js"></script>
  
</head>
<body ng-app="myapp">
<carousel></carousel>
<nav-bar></nav-bar>

<div id="section1" class="container-fluid">
  <div ui-view="account"></div>
</div>
<div id="section2" class="container-fluid">
<div ui-view="blog"></div>
</div>
</body>

</html>


<!--Account template-->


<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>John's Blog</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a ui-sref="accountHome">Account Home</a></li>
        <li><a ui-sref="accountDetails">Account Details</a></li>
      </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Blog..">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>

    <div class="col-sm-9">
        <div ui-view></div>
    </div>
  </div>
</div>


<!--blog template-->

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>John's Blog</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a ui-sref="blogHome">Blog Home</a></li>
        <li><a ui-sref="blogDetails">Blog Details</a></li>
      </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Blog..">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>

    <div class="col-sm-9">
        <div ui-view></div>
    </div>
  </div>
</div>

Answer 1

我正在寻找类似的东西，请参阅配置部分然后使用 $state.go('defaultStateForSection');加载所有默认部分内容。 Here is full code, git link 如果有人有更好的答案，请发表评论。我感谢任何更好的答案。

    var myapp = angular.module('myapp', ["ui.router", "navbarModule", "accountModule", "blogModule"]);


    myapp.config(function($stateProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix('!');
      $stateProvider
      //index state '/'
        .state('/', {
          url: "/",
          views: {
            "account": {
              component: "account"
            },
            "blog": {
              component: "blog"
            }
          }
        })
        //load all the default section in '/' ie. index.html i.e. /defaultStateForSection 
        .state("defaultStateForSection", {
          parent: '/',
          views: {
            'accountHome@/': {
              template: "<h1>Account Home is working</h1>"
            },
            'blogHome@/': {
              template: "<h1> Blog Home is working</h1>"
            }
          }
        })
        //replace accountHome with accountDetails in /defaultStateForSection
        .state('accountDetails', {
          parent: 'defaultStateForSection',
          url: "accountDetails",
          views: {
            'accountHome@/': {
              template: "<h1>Account Details working fine</h1>"
            }
          }
        })
        .state('blogDetails', {
          parent: 'defaultStateForSection',
          url: "blogDetails",
          views: {
            'blogHome@/': {
              template: "<h1>Blog Details working fine</h1>"
            }
          }
        })
    });




//NavBar


    (function() {
      'use strict';
      var navbarModule = angular.module("navbarModule", []);
      navbarModule.component('navBar', {
        bindings: {},
        controller: NavController,
        templateUrl: '/components/navbar/navbar.template.html'
      });

      function NavController() {
        $(document).ready(function() {
          /* affix the navbar after scroll below header */
          $("header").toggle().toggle();
          $(".navbar").affix({
            offset: {
              top: $("header").outerHeight(true)
            }
          });
          console.log($("#myCarousel").outerHeight(true));
        });
        // $('body').scrollspy({target: ".navbar", offset: 50});   
        // Add smooth scrolling on all links inside the navbar
        $("#myNavbar a").on('click', function(event) {
          //instead of this we can use ng-click as well
          // Make sure this.hash has a value before overriding default behavior
          if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();

            // Store hash
            var hash = this.hash;
            console.log(hash);
            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
              scrollTop: $(hash).offset().top
            }, 800, function() {

              // Add hash (#) to URL when done scrolling (default click behavior)
              //Don't need this
              // window.location.hash = hash;
            });
          } // End if
        });
        $state.go('defaultStateForSection');
      }
    })();

    //Account



    (function(angular) {
     'use strict';
     var accountModule = angular.module("accountModule",[]);
     accountModule.component('account', {
      bindings: {
      },
      controller: AccountController,
      templateUrl:'/components/account/account.html'
     });

     function AccountController(){

     }
    })(window.angular);

    //blog



    (function(angular) {
     'use strict';
     var blogModule = angular.module("blogModule",[]);
     blogModule.component('blog', {
      bindings: {
      },
      controller: BlogController,
      templateUrl: '/components/blog/blog.html'
 
     });

     function BlogController(){

     }
    })(window.angular);

      body {
          position: relative; 
      }
      .container-fluid{
       padding-left: 0px;
       padding-right: 0px;
      }
      .affix {
          top:0;
          width: 100%;
          z-index: 9999 !important;
      }
      .navbar {
          margin-bottom: 0px;
          border-radius: 0px;
      }

      .affix ~ .container-fluid {
         position: relative;
         top: 50px;
      }
      #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
      #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
      #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
      #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
      #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
          width: 100%;
          height: 100%;
          margin: auto;
      }
      
          /* Set gray background color and 100% height */
        .sidenav {
          background-color: #f1f1f1;
          height: 100%;
        }
        
        /* Set black background color, white text and some padding */
        footer {
          background-color: #555;
          color: white;
          padding: 15px;
        }
        
        /* On small screens, set height to 'auto' for sidenav and grid */
        @media screen and (max-width: 767px) {
          .sidenav {
            height: auto;
            padding: 15px;
          }
          .row.content {height: auto;} 
        }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

    <body ng-app="myapp">
      <nav-bar></nav-bar>

      <div id="section1" class="container-fluid" style="min-height: 2000px">
        <div ui-view="account"></div>
      </div>
      <div id="section2" class="container-fluid" style="min-height: 2000px">
        <div ui-view="blog"></div>
      </div>
    </body>


<!-- Account Section -->

<div class="container-fluid">
      <div class="row content">
        <div class="col-sm-3 sidenav">
          <h4>Pati's Blog</h4>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a ui-sref="defaultStateForSection">Account Home</a></li>
            <li><a ui-sref="accountDetails">Account Details</a></li>
          </ul><br>
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search Blog..">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
            <div ui-view="accountHome"></div>
        </div>
      </div>
    </div>


<!-- Blog Section -->

<div class="container-fluid">
      <div class="row content">
        <div class="col-sm-3 sidenav">
          <h4>Pati's Blog</h4>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a ui-sref="defaultStateForSection">Blog Home</a></li>
            <li><a ui-sref="blogDetails">Blog Details</a></li>
          </ul><br>
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search Blog..">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
            <div ui-view="blogHome"></div>
        </div>
      </div>
    </div>




<!-- nav bar -->

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="/">WebSiteName</a>
</div>
<div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li><a href="#section1">Account</a></li>
      <li><a href="#section2">Blog</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#section41">Section 4-1</a></li>
          <li><a href="#section42">Section 4-2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
  </div>
</nav>

AngularJS - 不同组件的多个子状态进入同一 url '/' 的不同部分，即在 index.html 中使用 ui-router

AngularJS - Multiple child state of different component into different section at same url '/' i.e. in index.html using ui-router

angular-ui-router

angularjs-components