Угловой ui.router, любой результат и любая ошибка

У меня есть небольшая проблема с моими взглядами в угловом. Я пытаюсь использовать ui.router для настройки моих маршрутов, но он не работает. Я пытаюсь использовать консоль, но это понятно. Я не знаю, что я могу исправить эту проблему.Угловой 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>

Спасибо за ваше время.

источник

2017-01-21 Dani Alcaraz

Хотя вы заявили о состоянии, вам нужно фактически «ввести» состояние при первом запуске. Если предположить, что newList состояние является состояние, которое вы хотите идти, вы можете сделать это двумя способами:

использованием $urlRouterProvider маршрутизировать к /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'); 
}])

источник

2017-01-21 15:58:23 CozyAzure

Угловой ui.router, любой результат и любая ошибка

ответ

Смежные вопросы