ng-view is not working, asp.net

Question

my zAngular file:

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>

footer of my shared layout:

     <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)

my cshtml file with ng-view:

<div class="container" ng-controller="PortfolioCtrl">

    <div ng-view></div>
</div>

error message in 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)

everything works fine with just the html page. But nothing shows up on the cshtml page. I would like to note that the gallery works with Angular 1.2.0rc1, and not with AngularJS v1.2.16 (in my shared layout)- there is other angular in the site dependent on this version of angular

Any help would be great

Answer 1

You are declaring your module twice. You should only use the angular.module('name', []); syntax once after which you need to refer to a module without the array syntax. angular.module('name');

    var module = angular.module('Portfolio', ['ngRoute', 'ngResource', 'ngTouch', 'ngAnimate']);

    module.config(function ($routeProvider) {
        // your code
    });

    module.controller('PortfolioCtrl', function ($scope) {
         // your code   
      });

ng-view is not working, asp.net

Question

1 answers

solution1
0 2014-06-27 03:59:35

ng-view is not working, asp.net

Question

1 answers

solution1 0 2014-06-27 03:59:35

solution1
0 2014-06-27 03:59:35