简体   繁体   中英

How to render ui-routes?

的index.html

ui-routing

This is my very intial index.html. I am in need to use nested routing. Now as per the docs available. I created this index.html. Barely it have 2 ui-sref but its not even rendering

在此处输入图片说明

What I am missing.Can somebody tell me? I am very new to ui-routing.

Apart from it one very imp to ask? Suppose I have url /albums/hindi where hindi is a partial view is rendered using ng-routes/ng-view but from this level of can I config such that from this level of nesting of url use ui-routing. **

I mean to say can I have ui-view inside ng-view.

You should provide code snippets, not pictures , and even better the plunker...

There is a working plunker

You are almost there, just the way how the ui-sref or href is called is not correct.

So, this could be the adjusted index.html

<html ng-app="routingApp" ng-strict-di>
  <head>
    <title>my app</title>
    <style>ul { padding-left: 0; } li { list-style: none; }</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
    ></script>
    <script src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
    ></script>
    <script src="script.js"></script>
  </head> 

  <body>

      // ui-sref
      <a ui-sref="state1">state1</a>
      <a ui-sref="state1.list">state1.list</a>
      //href
      <a href="#/state1">/state1</a>
      <a href="#/state1/list">/state1/list</a>


      <div ui-view=""></div>

And in script.js we can have these states (unchanged)

  .state('state1', {
      url: "/state1",
      templateUrl: 'partials/state1.html',
  })
  .state('state1.list', {
      url: "/list",
      templateUrl: 'partials/state1.list.html',
      controller: 'ListCtrl',
  })
  .state('state1.list.detail', {
      url: "/:title",
      template: '<b>{{$stateParams.title}}</b>',
  })

Check it here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM