我的zAngular文件:
angular.module('Portfolio', ['ngRoute', 'ngResource'])
.config(function ($routeProvider) {
$routeProvider.when('/Home/Portfolio', { templateUrl: 'templates/Portfolio.html', controller: 'PortfolioCtrl' })
});
//registrationModule.controller('PortfolioCtrl', ['ngAnimate', 'ngTouch', function ($scope) {
//}]);
angular.module('Portfolio', ['ngAnimate', 'ngTouch'])
.controller('PortfolioCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{ src: 'http://images.freehdw.com/800/3d-abstract_other_windmill-in-park_33583.jpg', desc: 'Image 01' },
{ src: 'http://2.bp.blogspot.com/-4WJHXS8hVhA/UGlk5wJAjqI/AAAAAAAAFBE/GCwAtynyY9Q/s1600/Huge-Windmill-Holland-Tulip-Field-HD-Wallpaper--NatureWallBase.Blogspot.Com.jpg', desc: 'Image 02' },
{ src: 'http://p1.pichost.me/640/7/1296144.jpg', desc: 'Image 03' },
{ src: 'http://www.desktopaper.com/wp-content/uploads/latest-windmill-farm-wallpaper.jpg', desc: 'Image 04' },
{ src: 'http://www.7is7.com/otto/estonia/kuremaa_windmill.jpg', desc: 'Image 05' },
{ src: 'http://www.dream-wallpaper.com/free-wallpaper/photography-wallpaper/windmill-1-wallpaper/1440x900/free-wallpaper-18.jpg', desc: 'Image 06' }
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
my portfolio.hmtl:
<!DOCTYPE html>
<html ng-app="Portfolio">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- add javascripts -->
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
<script src="../zAngular.js"></script>
<link href="../../Content/style.css" rel="stylesheet" />
</head>
<body ng-controller="PortfolioCtrl">
<!-- slider container -->
<div class="container slider">
<!-- enumerate all photos -->
<img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" width="800" height="500" />
<!-- prev / next controls -->
<img class="arrow prev" ng-click="showPrev()">
<img class="arrow next fa-arrow-right" src="../../Images/NextArrow.png" ng-click="showNext()">
<!-- extra nav1igation controls -->
<ul class="nav1">
<li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
<img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" width="50" height="31"/>
</li>
</ul>
</div>
</body>
</html>
我的共享布局的页脚:
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/zAngular.js"></script>
<script src="~/Scripts/Registration-Module/registration-module.js"></script>
</script>
@*@Scripts.Render("~/bundles/angular")*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
我的带有ng-view的cshtml文件:
<div class="container" ng-controller="PortfolioCtrl">
<div ng-view></div>
</div>
Cshtml中的错误消息:
Error: [ng:areq] Argument 'PortfolioCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.16/ng/areq?p0=PortfolioCtrl&p1=not%20a%20function%2C%20got%20undefined
at http://localhost:62540/Scripts/angular.js:78:12
at assertArg (http://localhost:62540/Scripts/angular.js:1443:11)
at assertArgFn (http://localhost:62540/Scripts/angular.js:1453:3)
at http://localhost:62540/Scripts/angular.js:7131:9
at http://localhost:62540/Scripts/angular.js:6538:34
at forEach (http://localhost:62540/Scripts/angular.js:330:20)
at nodeLinkFn (http://localhost:62540/Scripts/angular.js:6525:11)
at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5986:15)
at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5989:13)
at compositeLinkFn (http://localhost:62540/Scripts/angular.js:5989:13)
只需html页面一切正常。但是没有任何内容出现在cshtml页面上。我想要注意的是,该库使用Angular 1.2.0rc1,而不是AngularJS v1.2.16(在我的共享布局中) - 站点中还有其他角度依赖于此版本的角度
任何帮助都会很棒
答案 0 :(得分:0)
您正在宣布您的模块两次。你应该只使用angular.module(&#39; name&#39;,[]);语法之后,您需要引用没有数组语法的模块。 angular.module(&#39;名称&#39);
var module = angular.module('Portfolio', ['ngRoute', 'ngResource', 'ngTouch', 'ngAnimate']);
module.config(function ($routeProvider) {
// your code
});
module.controller('PortfolioCtrl', function ($scope) {
// your code
});