Render different layout views

Joberto Diniz

unread,

Apr 25, 2014, 1:36:38 PM4/25/14

to ang...@googlegroups.com

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>

<head>

<title>Awesome Score App</title>

</head>

<body>

<a class="navbar-brand" href="/">Score App</a>

</div>

<li><a href="/Votacao">Votação <span class="badge" ng-hide="scoresToVote == 0">{{scoresToVote}}</span></a></li>

</ul>

</span>

</a>

<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>

Billy Figueroa

unread,

Apr 25, 2014, 4:49:13 PM4/25/14

to ang...@googlegroups.com

I m not sure me or others understand really what your problem is...

Joberto Diniz

unread,

Apr 25, 2014, 4:54:00 PM4/25/14

to ang...@googlegroups.com

I don't want Login.html to be a partial view rendered in the ng-view directive. I want Login.html to be a "full" view, with <html> and <body> tags.

When user hit /Login or the app redirects to /Login, the Login.html cannot be rendered in the ng-view directive.

Better?

Raul Vieira

unread,

Apr 25, 2014, 5:00:35 PM4/25/14

to ang...@googlegroups.com

You'll need to handle this on the server. This part of your site won't be part of the spa.

Sent from my iPhone

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Billy Figueroa

unread,

Apr 25, 2014, 5:02:03 PM4/25/14

to ang...@googlegroups.com

AH lol yes

Angular is not really made for this from what I understand. IT CAN BE made into that. The way Angular, and SPA (Single Page Apps) work is that you have one shell page and your views are loaded in there based on the path of the url. If you want to actually do a different page then you will have to put it in the main directory like you did with the index page and call it home. The difference is instead of using a url like...

www.somewebsite.com/#/home

you are going to have to use a url like so...

www.somewebsite.com/home#/

I gotta run but that should give you a little idea of what the issue is

Joberto Diniz

unread,

Apr 25, 2014, 8:47:20 PM4/25/14

to ang...@googlegroups.com

How do you guys handle this public site -> login -> logged site steps in a SPA application?

Am I in the wrong direction here?

Billy Figueroa

unread,

Apr 25, 2014, 11:17:03 PM4/25/14

to ang...@googlegroups.com

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

Joberto Diniz

unread,

Apr 25, 2014, 11:24:10 PM4/25/14

to ang...@googlegroups.com

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.

Richard Seldon

unread,

Apr 25, 2014, 11:35:57 PM4/25/14

to ang...@googlegroups.com

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,

Billy Figueroa

unread,

Apr 26, 2014, 12:22:01 AM4/26/14

to ang...@googlegroups.com

Thanks Richard I ll have to look into that book with the longest title ever lol

Right now I m about 1/3 of the way through "ng-book"

Richard Seldon

unread,

Apr 26, 2014, 12:28:21 AM4/26/14

to ang...@googlegroups.com

Hi Billy, yeah, that’s a good read too! Didn’t read it front to back, but read parts when needed. The accompanying video series is worth watching - building out an email client if I have the right title to video accessories from memory. Still learning every day, and I was definitely reassured to see your list of recommendations as they matched my own experiences with best resources discovered to date. Thanks for sharing.

On 26 Apr 2014, at 13:22, Billy Figueroa <figu...@gmail.com> wrote:

Thanks Richard I ll have to look into that book with the longest title ever lol

Right now I m about 1/3 of the way through "ng-book"

On Friday, April 25, 2014 11:35:57 PM UTC-4, Richard Seldon wrote:

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 athttp://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.

Billy Figueroa

unread,

Apr 28, 2014, 9:55:00 AM4/28/14

to ang...@googlegroups.com

I was watching the video over a few days as you mentioned this. Its good to know some others are taking or have taken the same path I m going through

Reply all

Reply to author

Forward