Angular ui.router, any result and any error

问题

I have a little problem with my views in angular. I try to use ui.router to config my routes but it doesn't work. I try to use the console but it's clear. I don't know what i can do fix this problem.

(function(){

  'use strict';

  const app = angular.module('myApp', ['common.services', 'common.servicesMock', 'ui.router']);
    app.config(function($stateProvider, $locationProvider) {
        $locationProvider.hashPrefix("");

        $stateProvider
            .state('newList', {
                template: 'views/newsListView.html',
                url: '/news',
                controller: 'newsCtrl as vm',
            });

        //Delete the # in the routes
        $locationProvider.html5Mode({ 
        enabled: true,
        requireBase: false
        });
    });

}())

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wiki</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="styles/bootstrap.min.css">

  <link rel="stylesheet" href="styles/app.css">
</head>

<body ng-app="myApp">
  <div class="container">
    <div ui-view>

    </div>
  </div>


  <!-- Libraries & Framweorks -->
  <script src="scripts/js/angular.min.js"></script>
  <script src="scripts/js/angular-mocks.js"></script>
  <script src="scripts/js/angular-resource.min.js"></script>
  <script src="scripts/js/angular-ui-router.min.js"></script>

  <script src="scripts/js/jquery-3.1.1.min.js"></script>
  <script src="scripts/js/bootstrap.min.js"></script>

  <!-- App Scripts -->
  <script src="scripts/app.js"></script>

  <!-- Controllers -->
  <script src="scripts/controllers/newsCtrl.js"></script>
  <script src="scripts/controllers/categoriesCtrl.js"></script>

  <!-- Services -->
  <script src="scripts/common/services/common.services.js"></script>
  <script src="scripts/common/services/categories/categoriesService.js"></script>
  <script src="scripts/common/services/common.servicesMock.js"></script>
  <script src="scripts/common/services/news/newsResource.js"></script>


</body>
</html>

This is the view i want to show in the browser.

<div class="row center" ng-controller="categoriesCtrl as vm">
        <button type="button" class="btn btn-default" ng-click="vm.toggleCategories()">{{vm.showCategories ? "Hide" : "Show"}} Categories</button>
        <br>
        <div ng-show="vm.showCategories" class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active" ng-repeat="cate in vm.categories">
                <input type="radio" name="options" id="{{cate}}" autocomplete="off">{{cate}}
            </label>
        </div>
    </div>


    <div class="row">
        <div class="row">
            <fieldset>
                <legend class="title">Outstanding</legend>
            </fieldset>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="newsItem in vm.news | filter:{important: true} | orderBy: '-date'">
                <div class="thumbnail">
                    <img ng-src='{{newsItem.banner}}' class="banner">
                    <div class="caption">
                        <span class="date">{{newsItem.date | date}}</span>
                        <h3>{{newsItem.newsTitle}}</h3>
                        <p>
                            {{newsItem.newsDesciption.substring(0,200) + "..."}}
                        </p>
                        <p>
                            <a href="#" class="btn btn-primary">Read More</a>
                            <a href="#" class="btn btn-default">Edit</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <fieldset>
                <legend class="title">Last News</legend>
            </fieldset>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 thumbnail-xs" ng-repeat="newsItem in vm.news | filter:{important: false} | orderBy: '-date'">
                <div class="thumbnail">
                    <img ng-src='{{newsItem.banner}}' class="banner">
                    <div class="caption">
                        <span class="date">{{newsItem.date | date}}</span>
                        <h3>{{newsItem.newsTitle}}</h3>
                        <p>
                            {{newsItem.newsDesciption.substring(0,200) + "..."}}
                        </p>
                        <p>
                            <a href="#" class="btn btn-primary">Read More</a>
                            <a href="#" class="btn btn-default">Edit</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks for your time.

回答1:

Although you declared the states, you need to actually "enter" the state when you first launch it. Assuming the newList state is the state that you want to go to, you can do it in two ways:

using $urlRouterProvider to route to /news at root:

app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
  $locationProvider.hashPrefix("");

  $urlRouterProvider.when('/','/news');
  $stateProvider
    .state('newList', {
      template: 'views/newsListView.html',
      url: '/news',
      controller: 'newsCtrl as vm',
    });

  //Delete the # in the routes
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

via .run method in angular

app.run(['$state',function($state){
  $state.go('newList');
}])

来源：https://stackoverflow.com/questions/41781329/angular-ui-router-any-result-and-any-error

标签

angularjs

angular-ui-router