Javascript AngularJS滑块-路由问题（我无法正确路由按钮/页面）
我是AngularJS的新手，我正在尝试制作一个从在线示例中复制的滑块。 目前，我在我想要的页面（gallery.html）上出现了滑块，自动图片更改也可以正常工作，但是，当我尝试按下“下一步/上一步”按钮时，它只会将我带到一个没有任何内容的随机页面 我认为问题在于我的HREF在箭头上，但我真的不知道从这里走到哪里。另外，我的滑块指令是否位于正确的位置（在gallery.html的顶部） 文件结构：Javascript AngularJS滑块-路由问题（我无法正确路由按钮/页面）,javascript,html,css,angularjs,angular-ui-router,Javascript,Html,Css,Angularjs,Angular Ui Router,我是AngularJS的新手，我正在尝试制作一个从在线示例中复制的滑块。 目前，我在我想要的页面（gallery.html）上出现了滑块，自动图片更改也可以正常工作，但是，当我尝试按下“下一步/上一步”按钮时，它只会将我带到一个没有任何内容的随机页面 我认为问题在于我的HREF在箭头上，但我真的不知道从这里走到哪里。另外，我的滑块指令是否位于正确的位置（在gallery.html的顶部） 文件结构： <!DOCTYPE html> <html lang="en" ng-app=
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/gallery">Gallery</a></li>
<li><a href="#/music">Music</a></li>
<li><a href="#/other-work">Other-work</a></li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
-鲍尔_组件
-css
-----stylemain.css
-img
-----电话
----------…一堆png文件…
-js
-----app.js
-----controller.js
-部分
-----gallery.html
-电话
-----…一堆json文件…
-index.html 这是我的索引。html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/gallery">Gallery</a></li>
<li><a href="#/music">Music</a></li>
<li><a href="#/other-work">Other-work</a></li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/gallery">Gallery</a></li>
<li><a href="#/music">Music</a></li>
<li><a href="#/other-work">Other-work</a></li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
“严格使用”；
/*控制器*/
var galleryControllers=angular.module（'galleryControllers'[
“ngAnimate”
]);
GalleryController.controller（'mainImageCtrl'，['$scope'，'$http'，
函数（$scope，$http）{
$http.get（'phones/phones.json'）.success（函数（数据）{
$scope.images=数据；
});
}]);
GalleryController.directive（'slider'，function（$timeout）{
返回{
限制：“AE”，
替换：正确，
范围：{
图像：'='
},
链接：功能（范围、要素、属性）{
scope.currentIndex=0；
scope.next=函数（）{
scope.currentIndex0？scope.currentIndex--：scope.currentIndex=scope.images.length-1；
};
作用域$watch（'currentIndex'，函数（）{
scope.images.forEach（函数（图像）{
image.visible=false；
});
scope.images[scope.currentIndex].visible=true；
});
/*开始：用于自动幻灯片放映*/
无功定时器；
var sliderFunc=函数（）{
计时器=$timeout（函数（）{
scope.next（）；
计时器=$timeout（sliderFunc，2000）；
},2000);
};
sliderFunc（）；
作用域.$on（“$destroy”，函数（）{
$timeout.cancel（计时器）；
});
/*结束：用于自动幻灯片放映*/
}
};
});
//GalleryController.controller（'singleImageCtrl'、['$routeParams'、'$scope'，
//功能（$scope，$routeParams）{
//$scope.phoneId=$routeParams.phoneId；
// }]);
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/gallery">Gallery</a></li>
<li><a href="#/music">Music</a></li>
<li><a href="#/other-work">Other-work</a></li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
搜索：
排序方式：
按字母顺序排列的
最新的
<a ui-sref="root">link</a>
appModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/signin');
$stateProvider
.state("root", {
url: "/signin",
templateUrl: "views/signin.html",
controller: 'AuthController'
})
链接
appModule.config（['$stateProvider'，'$urlRouterProvider'，函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/sign'）；
$stateProvider
.state（“根”{
url:“/sign”，
templateUrl:“views/sign.html”，
控制器：“AuthController”
})
使用ui sref=“root”已经知道要执行的路径。使用$stateProvider而不是$routeProvider，并使用.state（）定义状态，然后在controlleri中执行$state.go（'/'）。最好不要使用模块和每个控制器创建新的var。每次都使用angular.module（'name'）.controller（）。