angularjs angular-ui-router

angularjs - Ui.router angular, cualquier resultado y cualquier error



angular ui router angularjs (1)

Tengo un pequeño problema con mis puntos de vista en angular. Intento usar ui.router para configurar mis rutas, pero no funciona. Intento usar la consola, pero está claro. No sé lo que puedo hacer para solucionar este problema.

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

Esta es la vista que quiero mostrar en el navegador.

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

Gracias por tu tiempo.

Aunque declaró los estados, necesita "ingresar" el estado cuando lo inicia por primera vez. Suponiendo que el estado newList es el estado al que desea ir, puede hacerlo de dos maneras:

  1. utilizando $urlRouterProvider para enrutar a /news en el $urlRouterProvider raíz:

    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. a través del método .run en angular

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