Ember.js When we click a link_to, do we hit the router.js first? Or is the relevant template loaded? When do we not hit the router.js?

My two questions are in bold, but there is fair amount of code that is given for context. The questions mainly have to do with when the router.js is hit and how ember knows what templates to load.

I am making a toy library-finder app. I had some questions about how the router, route handlers, templates, and controllers are connected.

This is my router:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
  this.route('contact');

  this.route('admin', function() {
    this.route('invitations');
    this.route('contacts');
  });

  this.route('libraries', function() {
    this.route('new');
    this.route('edit', { path: '/:library_id/edit' });
  });
});

export default Router;

So when I visit the /libraries...

1. I hit the router.js file FIRST

2. the router.js file takes me to the libraries.hbs template first right? This is the template:

   <h1>Libraries</h1>
   
   <div class="well">
       <ul class="nav nav-pills">
         {{#link-to 'libraries.index' tagName="li"}}<a href>List all them</a>{{/link-to}}
         {{#link-to 'libraries.new' tagName="li"}}<a href>Add new</a>{{/link-to}}
       </ul>
    </div>
   
   {{outlet}}
   
   

The outlet renders the libraries/index.hbs template then right? This is my libraries/index.hbs:

<h2>List</h2>

<div class="row">
  {{#each model as |library|}}
    <div class="col-md-4">
      <div class="panel panel-default library-item">
          <div class="panel-heading">
              <h3 class="panel-title">{{library.name}}</h3>
          </div>
          <div class="panel-body">
              <p>Address: {{library.address}}</p>
              <p>Phone: {{library.phone}}</p>
          </div>
          <div class="panel-footer text-right">
              {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}}
              <button class="btn btn-danger btn-xs" {{action 'deleteLibrary' library}}>Delete</button>
          </div>
      </div>
    </div>
  {{/each}}
</div>

4. When this link is clicked:

     {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}}
   
   

Where do we hit first? Do we hit the router.js again? The edit path in the router.js has a path, what does that do? How does the URL render? Where does the library_id come from?

This is my edit template:

<h2>Edit Library</h2>

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          {{input type="text" value=model.name class="form-control" placeholder="The name of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Address</label>
        <div class="col-sm-10">
          {{input type="text" value=model.address class="form-control" placeholder="The address of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          {{input type="text" value=model.phone class="form-control" placeholder="The phone number of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" {{action 'saveLibrary' model}}>Save changes</button>
        </div>
    </div>
</div>

The submit button has an action called 'saveLibrary' which takes an object. When I click that submit button, I don't hit the router.js file again right? All that happens is that it looks for an action defined in the current context which is the route handler right?

Here is my routes/libraries/edit.js file:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('library', params.library_id);
  },

  actions: {
    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo('libraries'));
    },

    willTransition(transition) {

      let model = this.controller.get('model');

      if (model.get('hasDirtyAttributes')) {
        let confirmation = confirm("Your changes haven't saved yet. Would you like to leave this form?");

        if (confirmation) {
          model.rollbackAttributes();
        } else {
          transition.abort();
        }
      }
    }
  }
});

And the saveLibrary method has a transition which then hits the router.js file right? The transitions change the url depending on how they are defined in the router.js file right?