Is there a best practice way of initializing an AngularJS app inside a non-AngularJS page? I'm adding a new feature to an existing webpage and need to pass a parameter in. Specifically, there is a set of tabs, and a new tab will launch an Angular app with the needed param from the current session.
Maybe build the parameter into the URL (ie URL param, etc)?
For intranet website I would recommend using Ajax GET request. This way you do not need to send data. It is already availible on the page. Here is an example with data from AngularJS tutorial (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'}
];
});
The contents of 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>
The second approach is to get a webpage with data populated in in a webpage from GET parameters.
<a href="/tab.html?name=Nexus&snippet=Fast">
C# Razor code:
<!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>
You can use cookies, Get parameters, Post parameters, Web Storage (HTML5 feature), Websockets (HTML5 feature, e.g. SignalR) and using the data on the page if loading new page via AJAX. For Cookies, Get, Post, Web Storage you can use both HTML links and AJAX.
The choice between these four depends on the size of data you need to send and wheather you think about SEO. Get and cookies are not suitable for large amount of data. Get, AJAX, Websockets are bad for SEO. Cookies and Web Storage depend on the browser and may be deleted by user.
Yes, you can pass the params in through the URL and use a JS function to grab it out from within the Angular app:
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, " "));
}
