Angular ui.router，任何结果和任何错误 [英] Angular ui.router, any result and any error
本文介绍了Angular ui.router，任何结果和任何错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的角度观点有点问题.我尝试使用ui.router来配置我的路由，但是它不起作用.我尝试使用控制台，但很明显.我不知道该怎么办才能解决这个问题.
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>
感谢您的时间.
推荐答案
尽管您声明了状态，但是在首次启动状态时实际上需要输入"该状态.假设newList状态是您要进入的状态，可以通过两种方式进行操作:
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:
-
使用
$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方法成角度显示
via .run method in angular
app.run(['$state',function($state){
$state.go('newList');
}])
这篇关于Angular ui.router，任何结果和任何错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
