我是第一次尝试在AngularJS中使用ui-router，但我认为我已经错误地设置了script.js文件。任何帮助，将不胜感激。是app.controller的问题??我哪里出错？
var app = angular.module("catalogue", ['ui.router'])
app.config(function($stateProvider) {
var homeState = {
name: 'home',
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
},
var category1State = {
name: 'category1',
url: '/category1',
templateUrl: 'category1.html',
controller: 'Category1Ctrl'
},
var category2State = {
name: 'category2',
url: '/category2',
templateUrl: 'category2.html',
controller: 'Category2Ctrl'
},
var category3State = {
name: 'category3',
url: '/category3',
templateUrl: 'category3.html',
controller: 'Category3Ctrl'
};
otherwise({redirectTo: '/home' })
$stateProvider.state(homeState);
$stateProvider.state(category1State);
$stateProvider.state(category2State);
$stateProvider.state(category3State);
});
app.controller('HomeCtrl', ['$scope', '$http', function($scope, $http, $stateParams) {
$http.get('home.json').then(function(response){
$scope.home = response.data;
});
}])
app.controller('Category1Ctrl', ['$scope', '$http', function($scope, $http, $stateParams) {
$http.get('category1.json').then(function(response){
$scope.category1 = response.data;
});
}])
app.controller('Category2Ctrl', ['$scope', '$http', function($scope, $http, $stateParams) {
$http.get('category2.json').then(function(response){
$scope.category2 = response.data;
});
}])
app.controller('Category3Ctrl', ['$scope', '$http', function($scope, $http) {
$http.get('category3.json').then(function(response){
$scope.category3 = response.data;
});
}])
和我的index.html
<!DOCTYPE html>
<html lang="en" ng-app="catalogue">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Catalogue </title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted"> Catalogue </h3>
<nav>
<ul class="nav nav-justified">
<li><a ui-sref="home" ui-sref-active="active">Home </a></li>
<li><a ui-sref="category1" ui-sref-active="active">Category1</a></li>
<li><a ui-sref="category2" ui-sref-active="active">Category2</a></li>
<li><a ui-sref="category3" ui-sref-active="active">Category3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
<div ng-controller="HomeCtrl">
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2017 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<ui-view></ui-view>
</body>
</html>
答案 0 :(得分：0)
下面是一个示例codepen让你开始，希望它有所帮助：
(function() {
'use strict';
function config($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
controller: 'MainController as vm'
})
.state('other', {
url: '/other',
controller: 'OtherController as vm'
});
$httpProvider.interceptors.push(function() {
return {
response: function(res) {
/* This is the code that transforms the response. `res.data` is the
* response body */
res.data = {
data: data
};
res.data.meta = {
status: res.status
};
console.log(JSON.stringify(res));
return res;
}
};
});
}
function cacheFactory($cacheFactory) {
return $cacheFactory('headlineCache', {
capacity: 1
});
}
function MainController(httpInterceptor) {
var vm = this;
console.log('MainController');
vm.title = 'Main Title';
httpInterceptor
.consoleLog();
}
function OtherController() {
var vm = this;
vm.title = 'Other Title';
console.log('OtherController');
}
function httpInterceptor($http) {
return {
consoleLog: consoleLog
};
function consoleLog() {
return console.log('httpInterceptor');
}
}
function contactCard() {
return {
scope: false,
restrict: 'E',
template: '<div><h2></h2><p></p></div>'
};
}
angular
.module('app', ['ui.router'])
.config(config)
.controller('MainController', MainController)
.controller('OtherController', OtherController)
.directive('contactCard', contactCard)
.factory('cacheFactory', cacheFactory)
.factory('httpInterceptor', httpInterceptor);
}());.container-fluid {
background-color: #222;
color: #fff;
aside {
position: absolute;
left: 1px;
top: 5px;
ul {
list-style-type: none;
padding: 10px;
li {
margin: 0 0 4px 4px;
}
li a {
padding: 4px;
text-decoration: none;
color: #fff;
}
.active {
background-color: #fff;
color: #222;
border-radius: 4px;
}
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<div class="container-fluid" ng-app="app">
<aside>
<ul>
<li><a ui-sref="home" ui-sref-active="active">Home</a>
</li>
<li><a ui-sref="other" ui-sref-active="active">Other</a>
</li>
</ul>
</aside>
<div class="container" ui-view>
<h1 class="text-center" ng-bind="vm.title"></h1>
</div>
</div>