2014-11-03 5 views
13

Ich habe eine Anwendung, die angularjs verwendet und funktioniert gut, wenn die Optimierung in der Datei BundleConfig.cs auf false festgelegt ist.AngularJS funktioniert nicht, wenn die Optimierung aktiviert ist ASP.NET MVC

Aber wenn ich die Optimierung auf True meine Winkelausdruck Arbeit, was bedeutet, dass eckig lädt, aber meine Dienste und Controller nicht wotk und andere jquery/javscript funktioniert gut.

Haben Sie eine Idee, was hier passiert? Im Folgenden finden Sie einige von meinen Code

BundleConfig.cs

using System.Configuration; 
using System.Web; 
using System.Web.Optimization; 

namespace HRMS 
{ 
    public class BundleConfig 
    { 
     // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/angular") 
       .Include("~/Scripts/common/angular.js" 
      )); 
      bundles.Add(new ScriptBundle("~/bundles/app") 
       .Include("~/Scripts/angular/app.js" 
      )); 
      bundles.Add(new ScriptBundle("~/bundles/common") 
       .Include("~/Scripts/common/common.js")); 

      bundles.Add(new ScriptBundle("~/bundles/services") 
       .IncludeDirectory("~/Scripts/angular/services", "*.js")); 

      bundles.Add(new ScriptBundle("~/bundles/controller") 
       .IncludeDirectory("~/Scripts/angular/controller", "*.js")); 


      bundles.Add(new ScriptBundle("~/bundles/jquery") 
       .Include("~/Scripts/common/jquery-{version}.js" 
         , "~/Scripts/common/jquery-ui.js")); 









      bundles.Add(new ScriptBundle("~/bundles/metis").Include(
         "~/Scripts/common/plugins/metisMenu/metisMenu.min.js", 
         "~/Scripts/common/sb-admin-2.js")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/common/modernizr-*")); 

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/common/bootstrap.js", 
         "~/Scripts/common/respond.js")); 

      bundles.Add(new ScriptBundle("~/bundles/select2").Include(
         "~/Scripts/common/plugins/select2/select2.js")); 

      bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
         "~/Scripts/common/plugins/tinymce/tinymce.min.js")); 

      bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/bootstrap.css", 
         "~/Content/sb-admin-2.css", 
         "~/Content/plugins/metisMenu/metisMenu.min.css", 
         "~/Content/font-awsm/css/font-awesome.css", 
         "~/Content/plugins/select2.css", 
         "~/Content/plugins/select2-bootstrap.css", 
         "~/Content/jquery-ui.css")); 


      BundleTable.EnableOptimizations = 
      bool.Parse(ConfigurationManager.AppSettings["BundleOptimisation"]); 

     } 

    } 
} 

Mein Layout-Seite:

<!DOCTYPE html> 
<html lang="en" ng-app="allyhrms"> 
<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>@ViewBag.Title - Ally HRMS</title> 

     @Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/common") 


@Scripts.Render("~/bundles/angular") 
@Scripts.Render("~/bundles/app") 
@Scripts.Render("~/bundles/services") 
@Scripts.Render("~/bundles/controller") 



@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/metis") 
@Scripts.Render("~/bundles/tinymce") 
@Scripts.Render("~/bundles/select2") 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    @RenderSection("Script", false) 
</head> 

App.js // für Winkel Anwendung

(function() { 
    var ally = angular.module('allyhrms', []); 
})(); 

Meine Leistungen sind mit diesem Stil gemacht. Zum Beispiel ist einer meiner Dienste wie. LocationService.js

angular.module('allyhrms').service('LocationService', function ($http) { 
    this.States = function() { 
     return GetData($http, "/Location/States", {}); 
    }; 
    this.Cities = function (model) { 
     return PostData($http, "/Location/Cities", { s: model }); 
    } 
}); 

LocationController.js

angular.module('allyhrms').controller('LocationController', [ 
    'LocationService', 'ExceptionService', '$scope', function (locationService, exceptionService, $scope) { 
     $scope.State = { 
      Id: 0, 
      StateName: '' 
     }; 
     $scope.City = { 
      Id: 0, 
      StateId: 0, 
      CityName: '' 
     } 
     $scope.States = []; 
     $scope.Cities = []; 
     function loadData() { 
      locationService.States().then(function(response) { 
       $scope.States = response.data.model; 
      }); 

     } 
     loadData(); 
     $scope.onStateChanged = function() { 
      locationService.Cities($scope.State).then(function(response) { 
       $scope.Cities = response.data.model; 
      }); 
     }; 
    } 
]); 

Antwort

25

Dies ist ein sehr häufiges Problem, dass happens when using inline annotation for injecting the dependencies, rather than using an Array of strings.

Also, wenn Sie dies tun:

.controller('dummyController', ['$scope', function($scope){...}]) 

Zum Beispiel:

.controller('dummyController', function($scope){...}) 

sollten Sie dies tun, in Ihrem Code Sie dies tun, die nicht gut funktionieren, wenn die Code wird minimierte:

angular.module('allyhrms').service('LocationService', function ($http) { 
    this.States = function() { 
     return GetData($http, "/Location/States", {}); 
    }; 
    this.Cities = function (model) { 
     return PostData($http, "/Location/Cities", { s: model }); 
    } 
}); 

Sie sollten es wie folgt stattdessen tun:

angular.module('allyhrms').service('LocationService',['$http', function ($http) { 
    this.States = function() { 
     return GetData($http, "/Location/States", {}); 
    }; 
    this.Cities = function (model) { 
     return PostData($http, "/Location/Cities", { s: model }); 
    } 
}]); 
+1

lol .. ich habe das gerade herausgefunden und war hier, um diese Frage zu entfernen, aber du hast es schon beantwortet, Bravo :) – user2539602

+0

Das ist perfekt! Vielen Dank! – Parth

0

Für mich ist das Problem war, dass select2 Version meiner minimierte und unminified select2.js waren unterschiedliche und inkompatible und ermöglicht die Optimierung meiner minimierte Datei verwendet, die mit meinem Rahmen unvereinbar verursacht die select2 nicht sichtbar sein