我有我的角度观点有点问题。 我尝试使用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>
谢谢你的时间。