DWQA QuestionsCategory: ProgramThe solution of angular UI router
Meditation asked 1 month ago
    <script type="text/javascript">
        var m1=angular.module('myApp',['ui.router']);

        m1. config(["$stateProvider","$urlRouterProvider",routeConfig])
          .controller("testCtrl", angular.noop);
          function routeConfig($stateProvider,$urlRouterProvider){
            $urlRouterProvider.otherwise("/app/page1");
            $stateProvider
            .state("app.page1",{
                url:"/app/page1",
                templateUrl:"page1.html"
            })
          }

    </script>
    <div ng-controller="testCtrl as ctrl">
        <ol>
        <li><a ui-sref="app.page1">app</a></li>
        </ol>
        <div ui-view></div>
    </div>
    <script type="text/ng-template" id="page1.html">
    this is page 1 for app.
    </script>

Ask, here why will report an error, template page1. HTML does not show, Xiaobai solution, thank you!

Chobits replied 1 month ago

Remove single quotes

Chobits replied 1 month ago

=_= The template 1page1.html is still not displayed. Is there a problem with app.page1? Can you take a look at it for me, please

Chobits replied 1 month ago

Visual inspection shows that there is a problem with your single quotation mark: “page1. HTML” – > “page1. HTML”

2 Answers
Showonne answered 1 month ago

ui-routerof use.Split is to represent a sub route. You defined itapp.p1Yes, but yoursappWhat about routing? Isn’t that right? The correct usage should be on the parent routeappIn HTML<ui-view>Define UI views with different IDS, and then match the corresponding sub pages through views map in the sub route.

Qian Long answered 1 month ago
app.config(function ($stateProvider, $urlRouterProvider, 
$resourceProvider) {
  $stateProvider
  //Home page
  .state('home', {
    url: '/home',
    templateUrl: '../pages/home.html'
  })
  //Application List
  .state('home.application_list', {
    url: '/apps',
    templateUrl: '../pages/application-list.html',
    controller: 'application_list'
  })
  //Default route
  $urlRouterProvider.otherwise('/home/fixpacks');
  $resourceProvider.defaults.stripTrailingSlashes = false;
});

The owner can refer to this configuration