I'm trying to get one thing to show when the user visits
mysite.com/projects
and another thing to show when they visit
mysite.com/projects/project
However, despite following the tutorial in the official documentation, my set up won't work.
Does anyone see where I'm going wrong? I've looked at everything and compared character for character with the official docs.
You are mixing concepts in your states. In some places you are referencing /project as it's own state, in others you are trying to reference it as a child state of /projects.
You can only use projects.project when you are embedding the contents of the child within the template of the parent.
I created two forks of your Plunkr, showing both independent routes and parent/child routes.
Note in the parent/child route, there is an additional <div ui-view></div> in the parent template.
Singular routes: http://plnkr.co/edit/jIMcdTuifE8oRpg83vtN?p=preview.
Parent/child: http://plnkr.co/edit/A85svCnngB7x4PJCUUf9?p=preview
You have two problems in your exemple.
First, your link to the projects.project state is incorrect. You need to put the full name of the state in the ui-sref attribute, so projects.project.
Next, your trying to use nested state. When navigating to the projects.project state, the projects.project state will not replace the projects state. In fact, the projects state will host the child state. So you need to add the ui-view directive inside your projects template (the r1.html file).
Here is a functionnal Plunkr: http://plnkr.co/edit/LyBM4QiKiw8sAoI0jiKo
