Question

我对角度的看法有点问题。我尝试使用ui.router配置我的路由，但它不起作用。我尝试使用控制台，但很明显。我不知道我能做些什么来解决这个问题。

(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>

这是我想在浏览器中显示的视图。

<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>

感谢您的时间。

Answer 1

虽然你声明了状态，但是当你第一次启动状态时，你需要实际“进入”状态。假设newList状态是您想要进入的状态，您可以通过两种方式实现：

使用$urlRouterProvider以root身份转到/news：

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
  });
});

通过角度

中的.run方法

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

Angular ui.router，任何结果和任何错误

1 个答案: