Checkout this link https://github.com/jmcunningham/AngularJS-Learning
and read through the authentication tutorials. It will give you a better idea than anything I can describe here. also look for examples of Dan Wahlin's sample app. Here it is... https://github.com/DanWahlin/CustomerManagerStandard/tree/master/CustomerManager/app/customersApp look through his AuthService and inspect the app.js file to see how he uses a service to keep track of if users are signed in There are a few things to keep track off. You will most likely need to do your handling of the data on the back end for sessions etc. You could do it on the front end but its not as secure. So you will need some service to create some sort of session or cookie with (i.e. php) or some other way (node etc). Then you will have to write logic to restrict which routes an authenticated user vs non authenticated user can view. Next you have to understand that angular will not persist data by default. If someone reloads or refreshes their page while they are "signed in" their data will disapear so you will have to keep track of this your self on the sever side or use some sort of library to persist the data on the front end (i.e. localStorage, webStorage, breeze.js, persistence.js etc) overall, I m not sure how "fast" you need to get this done but angular forces you to think differently than you are probably used to when writing apps. Take some time to read through some of those links in the github learning angularjs or go to egghead.io and watch their screencast tutorials. You can also watch David Mosher's videos on youtube https://www.youtube.com/user/vidjadavemo/videos or this introduction video by Dan Wahlin https://www.youtube.com/watch?v=i9MHigUZKEM its prob the best video to start https://github.com/DanWahlin/CustomerManagerStandard/tree/master/CustomerManager/app/customersApp On Friday, April 25, 2014 8:47:20 PM UTC-4, Joberto Diniz wrote: > > How do you guys handle this public site -> login -> logged site steps in a > SPA application? > Am I in the wrong direction here? > > On Friday, April 25, 2014 2:36:38 PM UTC-3, Joberto Diniz wrote: >> >> Hi. My question is quite simple, and what I found out so far didn't >> delight me. >> I have an Index.html that is the main page for logged users. Inside it >> there is a menu and ng-view directive that handles the partials. That's >> fine. >> However, when the user Is not logged, I show the Home.html partial, but >> this html is completely different from Index.html. It shouldn't be rendered >> in the ng-view. It should be rendered like a normal page. The same applies >> for the Login.html. It's completely different, that is, there are no nav >> bar. The structure is different, and use ng-hide/show seems awkward. >> >> What should I do? >> >> *app.js* >> var scoreApp = angular.module('scoreApp', ['ngRoute', 'angularMoment', >> 'UserApp', 'UserApp.facebook-picture', 'ui.bootstrap', 'underscore']) >> .config(['$routeProvider', '$locationProvider', function >> ($routeProvider, $locationProvider) { >> $routeProvider.when('/', { templateUrl: >> '/app/partials/Home.html', public: true }); >> $routeProvider.when('/Votacao', { templateUrl: >> '/app/partials/Voting.html', controller: 'VotingController' }); >> $routeProvider.when('/Login', { templateUrl: >> '/app/partials/Login.html', login: true }); >> $routeProvider.otherwise({ redirectTo: '/' }); >> $locationProvider.html5Mode(true); >> }]) >> >> *Index.html* >> <!DOCTYPE html> >> <html lang="pt-br" ng-app="scoreApp"> >> <head> >> <meta charset="utf-8" /> >> <title>Awesome Score App</title> >> <meta name="viewport" content="width=device-width, initial-scale=1.0" >> /> >> >> <link href="// >> netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >> rel="stylesheet" /> >> <link href="// >> netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" >> rel="stylesheet" /> >> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300" >> rel="stylesheet" /> >> <link href="app/css/bootstrap-social.css" rel="stylesheet" /> >> <link href="app/css/app.css" rel="stylesheet" /> >> </head> >> <body> >> <div class="container"> >> <nav class="navbar navbar-default navbar-fixed-top ng-cloak" >> role="navigation" ng-cloak ng-controller="MenuController"> >> <div class="navbar-header"> >> <a class="navbar-brand" href="/">Score App</a> >> </div> >> <div class="navbar-collapse collapse"> >> <ul class="nav navbar-nav" ng-show="user.authenticated"> >> <li><a href="/Votacao">Votação <span class="badge" >> ng-hide="scoresToVote == 0">{{scoresToVote}}</span></a></li> >> </ul> >> <ul class="nav pull-right" style="margin-right:10px;" >> ng-show="user.authenticated"> >> <li class="dropdown"> >> <a class="dropdown-toggle" data-toggle="dropdown" >> href="#"> >> <img class="nav-user-photo" >> ua-facebook-picture /> >> <span class="user-info"> >> {{user.first_name}} >> </span> >> <i class="fa fa-caret-down"></i> >> </a> >> <ul class="dropdown-menu"> >> <li><a href="#" ua-logout><i class="fa >> fa-power-off"></i>Logout</a></li> >> </ul> >> </li> >> </ul> >> </div> >> </nav> >> >> <ng-view></ng-view> >> >> </div> >> > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
