【问题标题】：Pass parameters to AngularJS app from non-AngularJS page从非 AngularJS 页面向 AngularJS 应用程序传递参数
【发布时间】：2014-06-01 23:52:28
【问题描述】：

是否有在非 AngularJS 页面中初始化 AngularJS 应用程序的最佳实践方法？我正在向现有网页添加一个新功能，需要传入一个参数。具体来说，有一组选项卡，一个新选项卡将启动一个带有当前会话所需参数的 Angular 应用程序。

也许将参数构建到 URL 中（即 URL 参数等）？

【问题讨论】：

标签： angularjs parameters

【解决方案1】：

第一种选择

对于 Intranet 网站，我建议使用 Ajax GET 请求。这样你就不需要发送数据了。它已经在页面上可用。这是来自 AngularJS 教程 (https://docs.angularjs.org/tutorial/step_05) 的数据示例：

$http.get('phones/phones.html').success(function(data) {
    $("div.mainContent").html = data;
    $scope.phones = [
        {'name': 'Nexus',
         'snippet': 'Fast'}
    ];
});

phones.html的内容：

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <span>{{phone.name}}</span>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

第二种选择

第二种方法是通过 GET 参数获取网页中填充了数据的网页。

<a href="/tab.html?name=Nexus&snippet=Fast">

C# Razor 代码：

<!DOCTYPE html>

<html>
<head>
    <title>Title</title>
</head>
<body>
  $scope.phones = [
    {'name': '@Request.Params["name"]',
     'snippet': '@Request.Params["snippet"]'}
  ];
  <div>
    <ul class="phones">
      <li ng-repeat="phone in phones | filter:query">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
    </ul> 
  </div>
</body>
</html>

您可以选择的所有方法

如果通过 AJAX 加载新页面，您可以使用 cookie、获取参数、发布参数、Web 存储（HTML5 功能）、Websockets（HTML5 功能，例如 SignalR）并使用页面上的数据。对于 Cookie、Get、Post、Web 存储，您可以使用 HTML 链接和 AJAX。

这四个之间的选择取决于您需要发送的数据大小以及您对 SEO 的看法。 Get 和 cookie 不适合大量数据。获取，AJAX，Websockets 对 SEO 不利。 Cookies 和 Web Storage 取决于浏览器，可能会被用户删除。

【讨论】：

谢谢，但这是针对 Intranet 站点的。不过对其他人有用的信息！

【解决方案2】：

是的，您可以通过 URL 传递参数并使用 JS 函数从 Angular 应用程序中获取它：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.href);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

【讨论】：

有没有办法从非 Angular 应用程序向服务器发送 POST 并让它返回加载 Angular 的响应？也许只是一些嵌入了带有所需参数的 ng-init 的 html？
也许吧，但请记住，Angular 期望表单数据是 JSON。你可以序列化它，但我可能只是使用 URL 参数。