ASP_MVC5 - 角度 - 與提供商共享變量

我是關於ASP網絡與angularjs耦合。我有一個主要的佈局和2個內容頁面我想花我的全局變量在page1到page2。我使用提供者來傳遞變量。這是我的問題：我只是無法在我的page2中獲得一個變量。ASP_MVC5 - 角度 - 與提供商共享變量

我的佈局頁：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>@ViewBag.Title - Mon application ASP.NET</title> 
 
    @Styles.Render("~/Content/css") 
 
    @Scripts.Render("~/bundles/modernizr") 
 

 
</head> 
 
<body ng-app="MainApp"> 
 
    <div class="container body-content"> 
 
     @RenderBody() 
 
     <hr /> 
 
     <footer> 
 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
 
     </footer> 
 
    </div> 
 

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

 
    <script src="~/Scripts/angular.js"></script> 
 
    <script src="~/MyScripts/MainApp.js"></script> 
 
    <script src="~/MyScripts/Page1Ctrl.js"></script> 
 
    <script src="~/MyScripts/Page2Ctrl.js"></script> 
 
    <script src="~/MyScripts/GlobalParam.js"></script> 
 

 
</body> 
 
</html>

我第1頁：

@{ 
 
    ViewBag.Title = "¨Page1"; 
 
} 
 
<h2>@ViewBag.Title.</h2> 
 
<h3>@ViewBag.Message</h3> 
 

 
<div ng-controller="Page1Ctrl"> 
 
    <p><a class="btn btn-default" ng-click="passVariable('5')">Pass variable (5) to Page2 with provider</a></p> 
 
</div>

我的第2頁：

@{ 
 
    ViewBag.Title = "¨Page2"; 
 
} 
 
<h2>@ViewBag.Title.</h2> 
 
<h3>@ViewBag.Message</h3> 
 

 

 
<div ng-controller="Page2Ctrl"> 
 

 
    <label>received value : {{reveiveValue}}</label> 
 

 
</div>

我的主要APP：

var MainApp = angular.module('MainApp', 
 
    [ 
 
     'Page1App', 
 
     'Page2App', 
 
     'GlobalParam' 
 
    ]);

我pageCtrl1：

'use strict'; 
 
var Page1App = angular.module('Page1App', ['GlobalParam']) 
 
Page1App.controller('Page1Ctrl', function ($scope, $window, Param) { 
 
    $scope.passVariable = function (val) { 
 
     $scope.shared = val; 
 
     $window.location.href = '/Home/Page2'; 
 
    } 
 
})

我pageCtrl2：

'use strict'; 
 
var Page2App = angular.module('Page2App', ['GlobalParam']) 
 
Page2App.controller('Page2Ctrl', function ($scope, Param) { 
 
    $scope.reveiveValue = Param.value; 
 
})

我的服務：

angular.module('GlobalParam', []) 
 
    .provider('Param', [function() { 
 
     this.$get = ['$http', '$q', 
 
      function ($http, $q) { 
 
       return { 
 
        value:0 
 
       }; 
 
      }]; 
 
    }])

感謝你的幫助

來源

2015-11-06 ALFA

在這裏，你正在做一個服務器端重定向：

$window.location.href = '/Home/Page2';

這顯然將執行往返於服務器和重新加載整個頁面。這會殺死你可能已經完成的任何JavaScript /角色的東西。所以，如果你想有一個服務器端的過程中通過一些變量重定向你可以使用查詢字符串參數：

$scope.passVariable = function (val) { 
    $window.location.href = '/Home/Page2?myVariable=' + encodeURIComponent(val); 
}

，並在你的目標視圖可以使用服務器端的剃刀模板使這個變量：

<label>received value : @Request["myVariable"]</label>

如果你想找回你可能在你的模板創建一些全局變量在客戶端上這個服務器端變量的值：

<script> 
    window.myVariable = @Html.Raw(Json.Encode(Request["myVariable"])); 
</script>

然後用window.myVariable需要在您的腳本中。

另一方面，如果你想有一個SPA應用程序，那麼你不應該做任何服務器端重定向。在這種情況下，您可以考慮使用angular ui router，它允許您在客戶端重定向（僅修改url的片段部分的重定向 - #）期間傳遞變量。

來源

2015-11-06 07:11:21

哦！我非常感謝你，我明白。我將用ui-route進行測試，稍後再回來。我想SPA應用 – ALFA

OK，所以如果你想有一個SPA應用程序，你一定要簽出該UI的路由器，有一個非常纖薄* * MVC控制器，它僅提供這將是您的SPA應用程序的主機的單一視圖。然後，您的SPA應用程序可以對服務器端API進行異步調用以獲取數據。 –

https://github.com/dotnetcurry/SPA-Angularjs-ASPNET-WebAPI/tree/master/MVC_Using_Angular。 – ALFA

我做了一個小測試。爲什麼我總是重定向到服務器？

主要HTML：

@{ 
 
    Layout = null; 
 
} 
 

 
<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>MainApp</title> 
 
    <script src="~/Scripts/angular.js"></script> 
 
    <script src="~/Scripts/angular-route.js"></script> 
 
    <script src="~/MyScripts/MainApp.js"></script> 
 
    <script src="~/MyScripts/Page1Ctrl.js"></script> 
 
    <script src="~/MyScripts/Page2Ctrl.js"></script> 
 
    <script src="~/MyScripts/GlobalParam.js"></script> 
 

 
</head> 
 
<body ng-app="MainApp"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="Page1">Page1</a></li> 
 
     <li><a href="Page2">Page2</a></li> 
 
    </ul> 
 
    <div> 
 
     <div ng-view></div> 
 
    </div> 
 
</body> 
 
</html>

MainApp.js

var MainApp = angular.module('MainApp', ["ngRoute"]); 
 
MainApp.factory("ShareData", function() { 
 
    return { value: 0 } 
 
}); 
 

 
//Defining Routing 
 
MainApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
 
    $routeProvider.when('/Page1', 
 
         { 
 
          templateUrl: 'Home/Page1', 
 
          controller: 'Page1Ctrl' 
 
         }); 
 
    $routeProvider.when('/Page2', 
 
         { 
 
          templateUrl: 'Home/Page2', 
 
          controller: 'Page2Ctrl' 
 
         }); 
 

 
    // $locationProvider.html5Mode(true); 
 
    //$locationProvider.html5Mode(true).hashPrefix('!') 
 
}]);

Controlleur ASP：

public class HomeController : Controller { 
 

 

 
     public ActionResult MainApp() { 
 
      return View(); 
 
     } 
 

 

 
     public ActionResult Page1() { 
 
      return View(); 
 
     } 
 

 
     public ActionResult Page2() { 
 

 
      return View(); 
 
     } 
 

 
    }

來源

2015-11-06 08:43:49 ALFA

ASP_MVC5 - 角度 - 與提供商共享變量

回答

相關問題