第一个替代

Question

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

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

Answer 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）并使用页面上的数据。对于Cookies，Get，Post，Web Storage，您可以使用HTML链接和AJAX。

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

Answer 2

是的，您可以通过URL传递params并使用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, " "));
}

将参数从非AngularJS页面传递给AngularJS应用程序

2 个答案:

第一个替代

第二种选择

您可以从