Billy, Nice recommendations list - certainly all links that I used in the early days too (2 months ago, lol). Was tasked with writing a large scale production system using Angular recently, i found those resources good for getting some ideas. The David Mosher video on security was nice as a starting point.
However, to take things further, and actually get productive writing a robust commercial application, I'd like to add two more resources: 1). PluralSight training videos - there are some excellent video and downloadable code resources here. Set up a free trial account to get a sense of what it is all about. See the Joe Eames course on MEAN Stack - even if only interested in the Angular sections. 2). The book "Mastering Web Application Development with AngularJS -Build single-page web applications using the power of AngularJS" by Pawel Kozlowski and Peter Bacon Darwin is a must read imho. (I think the authors might contribute to this forum occasionally too...) That covers security in depth, Internationalization, and especially how to structure a larger application and break it up into testable Modules. This is where I find not enough attention - you can study endless small hello world type applications but until you write a sizeable application don't get a sense of what works and what doesn't in terms of project structure. This book provided one way to do it that works. Perhaps even more valuable is the source code example application that accompanies the book - available for download at http://www.packtpub.com/support Lots of nice, easy to copy approaches that likely many projects can benefit from. Since I was writing a MEAN stack application, the code had even more relevance as some of the server side concepts were also valuable. Cheers, On 26 Apr 2014, at 12:24, Joberto Diniz <[email protected]> wrote: > Nice stuff, thanks. > Well, actually all the user management is done by https://www.userapp.io/ > which has built-in angular library. So I decided to give it a try instead of > write my own. > > On Saturday, April 26, 2014 12:17:03 AM UTC-3, Billy Figueroa wrote: > 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. -- 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.
