Angular ui.router, any result and any error

2019-08-01 04:26发布

站内问答 / 移动开发
896 1 4

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条回答
爷的心禁止访问
2楼-- · 2019-08-01 05:01

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:

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

  2. via .run method in angular

    app.run(['$state',function($state){
  $state.go('newList');
}])
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)