I have made dynamic pages for my recipes in Wix and I had an user form for feedback in the dynamic pages , I'm able to get the feedback but can't able to know for which item they are ?
I want to get the title of recipe along with the user feedback into
my database.
Please help me solve it.
You can get information from the Dynamic Dataset like this:
var myVariable;
$w("#dynamicDataset").onReady( () => {
let itemObj = $w("#dynamicDataset").getCurrentItem();
myVariable = itemObj.fieldKey; //get the relevant field key
});
After this you can submit the data using the Wix Data API. Just make sure to pass on the myVariable so that you know where the submission came from. Sample code below.
let data = {
fieldKey1: randomVariable,
fieldKey2: someVariable,
pageInfo: myVariable
}
wixData.insert('collectionName', data);
Read more about dynamic dataset's getCurrentItem() function here: https://www.wix.com/corvid/reference/wix-dataset.DynamicDataset.html#getCurrentItem
Also, the submission has to go through using the Wix Data API's insert() function. Read about it here: https://www.wix.com/corvid/reference/wix-data.html#insert
i'm trying to add recaptcha to an existing contact form.
i have done step 1 (client side integration) on google
but i don't understand step2
the directions for server side say:
send a POST request with these parameters:
URL: https://www.google.com/recaptcha/api/siteverify
secret (required) 6LfWAFAUAAAAALhRhjHZ1OdoMexS50EqSuxoF5jq
response (required) The value of 'g-recaptcha-response'.
remoteip The end user's ip address.
i have my own secret key but how do i "send a POST"?
if anyone has the patience to explain this whole step, i'd greatly appreciate it.
When user deals with re-captcha, re-captcha response is appended into the relevant div by google code. You wouldn't need to worry about it.
What you need to do is to ensure if it is there and valid.
For my case, I use jqBootstrapValidation to help validating my form components.
$("#myElement").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// do something useful for error case
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
// ...
var g_captcha_response = $("#g-recaptcha-response").val();
// if response does not exist, do NOT proceed
if (!(g_captcha_response && g_captcha_response.length>0)){
return;
}
// User is HUMAN. So charge ahead.!
...
EDIT
I use recaptcha-V2 for my site.
I've been working on how to make a SPA crawlable by google based on google's instructions. Even though there are quite a few general explanations I couldn't find anywhere a more thorough step-by-step tutorial with actual examples. After having finished this I would like to share my solution so that others may also make use of it and possibly improve it further.
I am using MVC with Webapi controllers, and Phantomjs on the server side, and Durandal on the client side with push-state enabled; I also use Breezejs for client-server data interaction, all of which I strongly recommend, but I'll try to give a general enough explanation that will also help people using other platforms.
Before starting, please make sure you understand what google requires, particularly the use of pretty and ugly URLs. Now lets see the implementation:
Client Side
On the client side you only have a single html page which interacts with the server dynamically via AJAX calls. that's what SPA is about. All the a tags in the client side are created dynamically in my application, we'll later see how to make these links visible to google's bot in the server. Each such a tag needs to be able to have a pretty URL in the href tag so that google's bot will crawl it. You don't want the href part to be used when the client clicks on it (even though you do want the server to be able to parse it, we'll see that later), because we may not want a new page to load, only to make an AJAX call getting some data to be displayed in part of the page and change the URL via javascript (e.g. using HTML5 pushstate or with Durandaljs). So, we have both an href attribute for google as well as on onclick which does the job when the user clicks on the link. Now, since I use push-state I don't want any # on the URL, so a typical a tag may look like this:
<a href="http://www.xyz.com/#!/category/subCategory/product111" onClick="loadProduct('category','subCategory','product111')>see product111...</a>
'category' and 'subCategory' would probably be other phrases, such as 'communication' and 'phones' or 'computers' and 'laptops' for an electrical appliances store. Obviously there would be many different categories and sub categories. As you can see, the link is directly to the category, sub category and the product, not as extra-parameters to a specific 'store' page such as http://www.xyz.com/store/category/subCategory/product111. This is because I prefer shorter and simpler links. It implies that I there will not be a category with the same name as one of my 'pages', i.e. 'about'.
I will not go into how to load the data via AJAX (the onclick part), search it on google, there are many good explanations. The only important thing here that I do want to mention is that when the user clicks on this link, I want the URL in the browser to look like this:
http://www.xyz.com/category/subCategory/product111. And this is URL is not sent to the server ! remember, this is a SPA where all the interaction between the client and the server is done via AJAX, no links at all! all 'pages' are implemented on the client side, and the different URL does not make a call to the server (the server does need to know how to handle these URLs in case they are used as external links from another site to your site, we'll see that later on the server side part). Now, this is handled wonderfully by Durandal. I strongly recommend it, but you can also skip this part if you prefer other technologies. If you do choose it, and you're also using MS Visual Studio Express 2012 for Web like me, you can install the Durandal Starter Kit, and there, in shell.js, use something like this:
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
activate: function () {
router.map([
{ route: '', title: 'Store', moduleId: 'viewmodels/store', nav: true },
{ route: 'about', moduleId: 'viewmodels/about', nav: true }
])
.buildNavigationModel()
.mapUnknownRoutes(function (instruction) {
instruction.config.moduleId = 'viewmodels/store';
instruction.fragment = instruction.fragment.replace("!/", ""); // for pretty-URLs, '#' already removed because of push-state, only ! remains
return instruction;
});
return router.activate({ pushState: true });
}
};
});
There are a few important things to notice here:
The first route (with route:'') is for the URL which has no extra data in it, i.e. http://www.xyz.com. In this page you load general data using AJAX. There may actually be no a tags at all in this page. You will want to add the following tag so that google's bot will know what to do with it:
<meta name="fragment" content="!">. This tag will make google's bot transform the URL to www.xyz.com?_escaped_fragment_= which we'll see later.
The 'about' route is just an example to a link to other 'pages' you may want on your web application.
Now, the tricky part is that there is no 'category' route, and there may be many different categories - none of which have a predefined route. This is where mapUnknownRoutes comes in. It maps these unknown routes to the 'store' route and also removes any '!' from the URL in case it's a pretty URL generated by google's seach engine. The 'store' route takes the info in the 'fragment' property and makes the AJAX call to get the data, display it, and change the URL locally. In my application, I don't load a different page for every such call; I only change the part of the page where this data is relevant and also change the URL locally.
Notice the pushState:true which instructs Durandal to use push state URLs.
This is all we need in the client side. It can be implemented also with hashed URLs (in Durandal you simple remove the pushState:true for that). The more complex part (at least for me...) was the server part:
Server Side
I'm using MVC 4.5 on the server side with WebAPI controllers. The server actually needs to handle 3 types of URLs: the ones generated by google - both pretty and ugly and also a 'simple' URL with the same format as the one that appears in the client's browser. Lets look on how to do this:
Pretty URLs and 'simple' ones are first interpreted by the server as if trying to reference a non-existent controller. The server sees something like http://www.xyz.com/category/subCategory/product111 and looks for a controller named 'category'. So in web.config I add the following line to redirect these to a specific error handling controller:
<customErrors mode="On" defaultRedirect="Error">
<error statusCode="404" redirect="Error" />
</customErrors><br/>
Now, this transforms the URL to something like: http://www.xyz.com/Error?aspxerrorpath=/category/subCategory/product111. I want the URL to be sent to the client that will load the data via AJAX, so the trick here is to call the default 'index' controller as if not referencing any controller; I do that by adding a hash to the URL before all the 'category' and 'subCategory' parameters; the hashed URL does not require any special controller except the default 'index' controller and the data is sent to the client which then removes the hash and uses the info after the hash to load the data via AJAX. Here is the error handler controller code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Routing;
namespace eShop.Controllers
{
public class ErrorController : ApiController
{
[HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH"), AllowAnonymous]
public HttpResponseMessage Handle404()
{
string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
var response = Request.CreateResponse(HttpStatusCode.Redirect);
response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#{0}", parameters));
return response;
}
}
}
But what about the Ugly URLs? These are created by google's bot and should return plain HTML that contains all the data the user sees in the browser. For this I use phantomjs. Phantom is a headless browser doing what the browser is doing on the client side - but on the server side. In other words, phantom knows (among other things) how to get a web page via a URL, parse it including running all the javascript code in it (as well as getting data via AJAX calls), and give you back the HTML that reflects the DOM. If you're using MS Visual Studio Express you many want to install phantom via this link.
But first, when an ugly URL is sent to the server, we must catch it; For this, I added to the 'App_start' folder the following file:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace eShop.App_Start
{
public class AjaxCrawlableAttribute : ActionFilterAttribute
{
private const string Fragment = "_escaped_fragment_";
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var request = filterContext.RequestContext.HttpContext.Request;
if (request.QueryString[Fragment] != null)
{
var url = request.Url.ToString().Replace("?_escaped_fragment_=", "#");
filterContext.Result = new RedirectToRouteResult(
new RouteValueDictionary { { "controller", "HtmlSnapshot" }, { "action", "returnHTML" }, { "url", url } });
}
return;
}
}
}
This is called from 'filterConfig.cs' also in 'App_start':
using System.Web.Mvc;
using eShop.App_Start;
namespace eShop
{
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
filters.Add(new AjaxCrawlableAttribute());
}
}
}
As you can see, 'AjaxCrawlableAttribute' routes ugly URLs to a controller named 'HtmlSnapshot', and here is this controller:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace eShop.Controllers
{
public class HtmlSnapshotController : Controller
{
public ActionResult returnHTML(string url)
{
string appRoot = Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory);
var startInfo = new ProcessStartInfo
{
Arguments = String.Format("{0} {1}", Path.Combine(appRoot, "seo\\createSnapshot.js"), url),
FileName = Path.Combine(appRoot, "bin\\phantomjs.exe"),
UseShellExecute = false,
CreateNoWindow = true,
RedirectStandardOutput = true,
RedirectStandardError = true,
RedirectStandardInput = true,
StandardOutputEncoding = System.Text.Encoding.UTF8
};
var p = new Process();
p.StartInfo = startInfo;
p.Start();
string output = p.StandardOutput.ReadToEnd();
p.WaitForExit();
ViewData["result"] = output;
return View();
}
}
}
The associated view is very simple, just one line of code:
#Html.Raw( ViewBag.result )
As you can see in the controller, phantom loads a javascript file named createSnapshot.js under a folder I created called seo. Here is this javascript file:
var page = require('webpage').create();
var system = require('system');
var lastReceived = new Date().getTime();
var requestCount = 0;
var responseCount = 0;
var requestIds = [];
var startTime = new Date().getTime();
page.onResourceReceived = function (response) {
if (requestIds.indexOf(response.id) !== -1) {
lastReceived = new Date().getTime();
responseCount++;
requestIds[requestIds.indexOf(response.id)] = null;
}
};
page.onResourceRequested = function (request) {
if (requestIds.indexOf(request.id) === -1) {
requestIds.push(request.id);
requestCount++;
}
};
function checkLoaded() {
return page.evaluate(function () {
return document.all["compositionComplete"];
}) != null;
}
// Open the page
page.open(system.args[1], function () { });
var checkComplete = function () {
// We don't allow it to take longer than 5 seconds but
// don't return until all requests are finished
if ((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 10000 || checkLoaded()) {
clearInterval(checkCompleteInterval);
var result = page.content;
//result = result.substring(0, 10000);
console.log(result);
//console.log(results);
phantom.exit();
}
}
// Let us check to see if the page is finished rendering
var checkCompleteInterval = setInterval(checkComplete, 300);
I first want to thank Thomas Davis for the page where I got the basic code from :-).
You will notice something odd here: phantom keeps re-loading the page until the checkLoaded() function returns true. Why is that? this is because my specific SPA makes several AJAX call to get all the data and place it in the DOM on my page, and phantom cannot know when all the calls have completed before returning me back the HTML reflection of the DOM. What I did here is after the final AJAX call I add a <span id='compositionComplete'></span>, so that if this tag exists I know the DOM is completed. I do this in response to Durandal's compositionComplete event, see here for more. If this does not happen withing 10 seconds I give up (it should take only a second to so the most). The HTML returned contains all the links that the user sees in the browser. The script will not work properly because the <script> tags that do exist in the HTML snapshot do not reference the right URL. This can be changed too in the javascript phantom file, but I don't think this is necassary because the HTML snapshort is only used by google to get the a links and not to run javascript; these links do reference a pretty URL, and if fact, if you try to see the HTML snapshot in a browser, you will get javascript errors but all the links will work properly and direct you to the server once again with a pretty URL this time getting the fully working page.
This is it. Now the server know how to handle both pretty and ugly URLs, with push-state enabled on both server and client. All ugly URLs are treated the same way using phantom so there's no need to create a separate controller for each type of call.
One thing you might prefer to change is not to make a general 'category/subCategory/product' call but to add a 'store' so that the link will look something like: http://www.xyz.com/store/category/subCategory/product111. This will avoid the problem in my solution that all invalid URLs are treated as if they are actually calls to the 'index' controller, and I suppose that these can be handled then within the 'store' controller without the addition to the web.config I showed above.
Google is now able to render SPA pages:
Deprecating our AJAX crawling scheme
Here is a link to a screencast-recording from my Ember.js Training class I hosted in London on August 14th. It outlines a strategy for both your client-side application and for you server-side application, as well as gives a live demonstration of how implementing these features will provide your JavaScript Single-Page-App with graceful degradation even for users with JavaScript turned off.
It uses PhantomJS to aid in crawling your website.
In short, the steps required are:
Have a hosted version of the web application you want to crawl, this site needs to have ALL of the data you have in production
Write a JavaScript application (PhantomJS Script) to load your website
Add index.html ( or “/“ ) to the list of URLs to crawl
Pop the first URL added to the crawl-list
Load page and render its DOM
Find any links on the loaded page that links to your own site (URL filtering)
Add this link to a list of “crawlable” URLS, if its not already crawled
Store the rendered DOM to a file on the file system, but strip away ALL script-tags first
At the end, create a Sitemap.xml file with the crawled URLs
Once this step is done, its up to your backend to serve the static-version of your HTML as part of the noscript-tag on that page. This will allow Google and other search engines to crawl every single page on your website, even though your app originally is a single-page-app.
Link to the screencast with the full details:
http://www.devcasts.io/p/spas-phantomjs-and-seo/#
I used Rendertron to solve the SEO problem in ASP.net core and Angular on the client side, it is a middleware that differentiates requests based on being crawler or client, so when the request is from the crawler side the response generated with briefly and quickly on the fly.
rendered site for normal clients:
rendered site for Crawlers:
In Startup.cs
Configure rendertron services:
public void ConfigureServices(IServiceCollection services)
{
// Add rendertron services
services.AddRendertron(options =>
{
// rendertron service url
options.RendertronUrl = "http://rendertron:3000/render/";
// proxy url for application
options.AppProxyUrl = "http://webapplication";
// prerender for firefox
//options.UserAgents.Add("firefox");
// inject shady dom
options.InjectShadyDom = true;
// use http compression
options.AcceptCompression = true;
});
}
It is true that this method is a little different and requires a short code to produce content specific to the crawler, but it is useful for small projects such as CMS or portal site, etc.
This method can be done in most programming languages or server-side frameworks such as ASP.net core, Python (Django), Express.js, Firebase.
To view the source and more details: https://github.com/GoogleChrome/rendertron
Year 2021 Update
SPA should use History API in order to be SEO friendly.
Transitions between SPA pages are typically effected via history.pushState(path) call. What happens next is framework dependent. In case React is used, a component called React Router monitors history and displays/renders the React component configured for the path used.
Achieving SEO for a simple SPA is straightforward.
Achieving SEO for a more advanced SPA (that uses selective prerendering for better performance) is more involved as shown in the article. I'm the author.
You can use or create your own service for prerender your SPA with the service called prerender. You can check it out on his website prerender.io and on his github project (It uses PhantomJS and it renderize your website for you).
It's very easy to start with. You only have to redirect crawlers requests to the service and they will receive the rendered html.
I have a Magento site with multiple languages. I have setup the language packs and everything seems to translate properly on the website. Also the transactional e-mails are sent in the correct language EXCEPT for the "Forgot Password" e-mail which is always sent in German. Here's what I did:
Installed language packs and made sure all templates and folder structures are correct. Example: /app/locale/nl_NL/template/email/
Under System » Transactional Emails: I applied the template, chose the locale and saved.
Then I went to System » Configuration » Sales Emails, I switched to each language from the "Current Configuration Scope" dropdown, and I chose the templates I created in Transactional Emails for each language (each store view).
After looking around online for a solution, it seems others had this problem too and someone mentioned that Magento is picking the "Forgot Password" template from the first locale folder found in /app/locale/. In my case I had: de_DE, en_US, fr_FR, nl_NL. So It picks the template from the German de_DE pack.
NOTE: Also, in the backend under "Configuration" there's a tab on the left called "LOCALE PACKS" which only has "Locale de_DE" under it, even though I have other language packs which don't show up here. Not sure if this is relevant.
Site: http://site1.cp1.glimworm.com/magento/
Magento Community version: 1.7.0.2
Locale packs:
Mage_Locale_en_US
Locale_Mage_community_de_DE
Locale_Mage_community_fr_FR
Mage_Locale_nl_NL
Any idea how I can get the correct email template from the corresponding language to be sent as opposed to always German? Any help will be greatly appreciated! I can provide more info as well.
I have same problem in magento v1.5. After a long research i found this solution and its working for me.
Mage/Customer/Model/Customer.php
in this file i have make some changes as following.
find this line of code
if (!$storeId)
{
$storeId = $this->_getWebsiteStoreId($this->getSendemailStoreId());
}
and replace with
$storeId = ($storeId == '0')?$this->getSendemailStoreId():$storeId;
if ($this->getWebsiteId() != '0' && $storeId == '0')
{
$storeIds = Mage::app()->getWebsite($this->getWebsiteId())->getStoreIds();
reset($storeIds);
$storeId = current($storeIds);
}
I had the same problem, and it looks like user2282917's solution works with a little modify:
You should edit the sendPasswordResetConfirmationEmail function in the Customer.php not the sendNewAccountEmail. Try to replace the code there, and it will working.
Overwrite the forgotPasswordPostAction controller on the AccountController.php.
You need to set the correct store id so that the locale will be used.
/**
* Forgot customer password action
*/
public function forgotPasswordPostAction()
{
$email = (string) $this->getRequest()->getPost('email');
if ($email) {
if (!Zend_Validate::is($email, 'EmailAddress')) {
$this->_getSession()->setForgottenEmail($email);
$this->_getSession()->addError($this->__('Invalid email address.'));
$this->_redirect('*/*/forgotpassword');
return;
}
/** #var $customer Mage_Customer_Model_Customer */
$customer = $this->_getModel('customer/customer')
->setWebsiteId(Mage::app()->getStore()->getWebsiteId())
->loadByEmail($email);
if ($customer->getId()) {
try {
$newResetPasswordLinkToken = $this->_getHelper('customer')->generateResetPasswordLinkToken();
$customer->changeResetPasswordLinkToken($newResetPasswordLinkToken);
// Add store ID so that correct locale will be set
$customer->setStoreId(Mage::app()->getStore()->getId());
$customer->sendPasswordResetConfirmationEmail();
} catch (Exception $exception) {
$this->_getSession()->addError($exception->getMessage());
$this->_redirect('*/*/forgotpassword');
return;
}
}
$this->_getSession()
->addSuccess( $this->_getHelper('customer')
->__('If there is an account associated with %s you will receive an email with a link to reset your password.',
$this->_getHelper('customer')->escapeHtml($email)));
$this->_redirect('*/*/');
return;
} else {
$this->_getSession()->addError($this->__('Please enter your email.'));
$this->_redirect('*/*/forgotpassword');
return;
}
}
In the below file
Mage/Customer/Model/Customer.php
In sendPasswordResetConfirmationEmail function() change the
$storeId = $this->getStoreId();
to
$storeId = Mage::app()->getStore()->getStoreId();
Thanks
In our case... We found that when a Customer Account was created by Admin the "email send from" option was not saved and only used for the first account creation email. Any subsequent email sent are sent from the default store view of the website the customer was allocated.
The real problem is how, when the customer store id is identified when none is set.
The method sendPasswordResetConfirmationEmail (Magento 1.9.1) when the store id is 0 (admin or not set), defaults to _getWebsiteStoreId which will return the first store id associated to that website.
The problem is that Magento assumes the first store id associated with the website id is the default store... We found this is not the case when a Sort Order is set against the store record.
Simply put make sure your default store assocaited with a web site is also specified with a sort order of 0.
Hope this link will be usefull to you
In link they have used New Password but Instead of New Password Use Forgot Password template In step 4
Thanks..
The password reset email is send in Mage_Customer_Model_Customer::_sendEmailTemplate(). Here the emailtemplate is loaded. If it was loaded in admin in "Systemn > Transactional Emails" and configured to be used, your template will be used.
Else the default template is loaded from file in Mage_Core_Model_Email_Template::sendTransactional. This is done using $this->loadDefault($templateId, $localeCode); The template ist loaded using
$templateText = Mage::app()->getTranslator()->getTemplateFile(
$data['file'], 'email', $locale
);
Here locale folders are checked in following order:
Specified locale
Locale of default store
en_US locale
The first matched locale is chosen. As Mage::app() doesn't know about the store which was passed with the emailtemplate, the default defaultstore is loaded, which is german in your case. It has nothing to do with the order of the locale folders.
So in your case I suggest to check if your emailtemplate is selected in admin configuration in "System > Config > Customerconfiguration > Password Options" or use Mage::getStoreConfig(Mage_Customer_Model_Customer::XML_PATH_REMIND_EMAIL_TEMPLATE, $storeId) if it is set for your store.
The reason for why you are receiving the email templates in another language than the one expected is dependent of the language in which you first created your account. Try to check this to be in your own language when you first created the account.
Check this under Customers> Account Information to see how your account was created.
/Kalif
I am working a project using the AngularJS framework. I am pretty new to using this framework; in the past I have only worked with pure JavaScript and jQuery. The project is a kind of web designer application for a niche market.
As the user moves between pages while designing I want to maintain a session of all the changes they are making.
Now if the user signs in we load the session using data from the database. When the user clicks on save button we update the database with the session data. Someone told me that I can maintain session in Angular similar to backbone. Is this possible? If yes, can you please direct me to a tutorial that does not focus on directives or UI? If this is not possible are there other viable options?
Here is a kind of snippet for you:
app.factory('Session', function($http) {
var Session = {
data: {},
saveSession: function() { /* save session data to db */ },
updateSession: function() {
/* load data from db */
$http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
return Session;
});
Here is Plunker example how you can use that:
http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview
Because the answer is no longer valid with a more stable version of angular, I am posting a newer solution.
PHP Page: session.php
if (!isset($_SESSION))
{
session_start();
}
$_SESSION['variable'] = "hello world";
$sessions = array();
$sessions['variable'] = $_SESSION['variable'];
header('Content-Type: application/json');
echo json_encode($sessions);
Send back only the session variables you want in Angular not all of them don't want to expose more than what is needed.
JS All Together
var app = angular.module('StarterApp', []);
app.controller("AppCtrl", ['$rootScope', 'Session', function($rootScope, Session) {
Session.then(function(response){
$rootScope.session = response;
});
}]);
app.factory('Session', function($http) {
return $http.get('/session.php').then(function(result) {
return result.data;
});
});
Do a simple get to get sessions using a factory.
If you want to make it post to make the page not visible when you just go to it in the browser you can, I'm just simplifying it
Add the factory to the controller
I use rootScope because it is a session variable that I use throughout all my code.
HTML
Inside your html you can reference your session
<html ng-app="StarterApp">
<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
You can also try to make service based on window.sessionStorage or window.localStorage to keep state information between page reloads. I use it in the web app which is partially made in AngularJS and page URL is changed in "the old way" for some parts of workflow. Web storage is supported even by IE8. Here is angular-webstorage for convenience.
You would use a service for that in Angular. A service is a function you register with Angular, and that functions job is to return an object which will live until the browser is closed/refreshed. So it's a good place to store state in, and to synchronize that state with the server asynchronously as that state changes.
Typically for a use case which involves a sequence of pages and in the final stage or page we post the data to the server. In this scenario we need to maintain the state. In the below snippet we maintain the state on the client side
As mentioned in the above post. The session is created using the factory recipe.
Client side session can be maintained using the value provider recipe as well.
Please refer to my post for the complete details.
session-tracking-in-angularjs
Let's take an example of a shopping cart which we need to maintain across various pages / angularjs controller.
In typical shopping cart we buy products on various product / category pages and keep updating the cart. Here are the steps.
Here we create the custom injectable service having a cart inside using the "value provider recipe".
'use strict';
function Cart() {
return {
'cartId': '',
'cartItem': []
};
}
// custom service maintains the cart along with its behavior to clear itself , create new , delete Item or update cart
app.value('sessionService', {
cart: new Cart(),
clear: function () {
this.cart = new Cart();
// mechanism to create the cart id
this.cart.cartId = 1;
},
save: function (session) {
this.cart = session.cart;
},
updateCart: function (productId, productQty) {
this.cart.cartItem.push({
'productId': productId,
'productQty': productQty
});
},
//deleteItem and other cart operations function goes here...
});