Update sample app

[timkindberg]

• use ui-router module instead of compat
• use new ui-sref where necessary
• not use $routeProvider
• set up index state via stateProvider not routeProvider.when
• split the index code out into smaller files, e.g. Index.html, states.js, styles.css
• use more best practices
• more showy example for multiple named views.

[timkindberg]

@nateabele, @jeme, @ksperling can you please review what I've done so far on updating the sample? This is literally the most I've actually worked with angular, its quite embarrassing, but I'd love to hear any feedback or critiques on how I could have done things better or different. I'm trying to write the app almost as if it would use all known best practices, without going too overboard and also some leniency to show off various features.

Branch WIP https://github.com/angular-ui/ui-router/tree/update-sample/sample

[nateabele]

I think you nailed it. Two things:

• This: url: '/{contactId}' is a perfect opportunity to demonstrate regular expression matching for parameters
• I know this is still a work-in-progress, so I'm assuming you'll be changing the links over to use ui-sref at some point?

[timkindberg]

Thanks @nateabele! I'll consider adding a regular expression for that url.

I'm adding in all ui-srefs still. I'm actually finding that relative state paths in ui-sref are pretty pointless. Mainly because many times you can't really rely on what state you'll be in when the directive is activated. So it breaks half the time, because its unable to find the relative state. I'm sticking to absolute state paths for the ui-srefs. I could see maybe if a dev knew for sure that a link is only going to show up in one single state and then go away when navigating to any parent or child, then you could use relative paths.

You can look at the commit for what I had done. I really just don't want seasoned angular devs (like you guys) to scoff at how the sample is set up or feel that it is contributing to bad practices or anti-patterns.

Couple of specific questions if you wouldn't mind answering:

• Obviously splitting out styles into styles.css is fine, but how do you feel about how I split the js into module.js, states.js, factory.js and contacts.json. Is it a good separation and file names?
• The code I am very self conscious of is factory.js. I can't tell if I just hacked it together. I tried to follow best practices as I have interpreted them from articles and tutorials.
  • Is the 'contacts' factory well written?
  • Is the 'utils' factory a realistic way to do global util functions?

THANKS AGAIN!

[nateabele]

Mainly because many times you can't really rely on what state you'll be in when the directive is activated.

Okay, I was wondering if that would be the case, I just hadn't tested it yet. I'll have to add some logic there and/or in ui-view to ensure that ui-sref inherits from the state that its enclosing template is being loaded for.

[timkindberg]

I'll have to add some logic there and/or in ui-view to ensure that ui-sref inherits from the state that its enclosing template is being loaded for.

👍 Didn't even think of that. Brilliant.

Ok I've added in all the ui-sref, changed that one url param to use regex, and added a couple more comments. I think I'm done for now. I'll attempt to squash my commits, let's hope I can do it this time. And I'll submit a PR.