Angular ui.router, any result and any error

Question

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.

CozyAzure · Accepted Answer · 2017-01-21 16:18:41Z

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

Collectives™ on Stack Overflow

Angular ui.router, any result and any error

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related