anchor.diff:        import { Component } from 'angular2/core';
         import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
   
  -      import { SpeakersComponent, SpeakerService } from './+speakers';
  +      import { HeroesComponent, HeroService } from './+heroes';
         import { DashboardComponent } from './+dashboard';
         import { NavComponent } from './layout/nav.component';
   
         @Component({
  -        selector: 'my-app',
  +        selector: 'toh-app',
           templateUrl: 'app/app.component.html',
           styleUrls: ['app/app.component.css'],
           directives: [ROUTER_DIRECTIVES, NavComponent],
           providers: [
             ROUTER_PROVIDERS,
  -          SpeakerService
  +          HeroService
           ]
         })
         @RouteConfig([
           { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
  -        { path: '/speakers/...', name: 'Speakers', component: SpeakersComponent },
  +        { path: '/heroes/...', name: 'Heroes', component: HeroesComponent },
         ])
         export class AppComponent { }
         ```
   
   <a href="#toc">Back to top</a>
   :marked
  -  ### Route Naming
  -  <a id="131"></a>
  -  #### Style 131
  -
  -    - Use the naming convention for the routes with the component name without the Component suffix.
  -    
  -      **Why?** This maps the route name to the component and makes it easy to identify.
  -      
  -      ```typescript
  -      { path: '/dashboard', name: 'Dashboard', component: DashboardComponent }
  -      ```    
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ## Application Structure LIFT Principle
  -  ### LIFT
  -  <a id="140"></a>
  -  #### Style 140
  -
  -    - Structure your app such that you can `L`ocate your code quickly, `I`dentify the code at a glance, keep the `F`lattest structure you can, and `T`ry to stay DRY. The structure should follow these 4 basic guidelines, listed in order of importance.
  -
  -      *Why LIFT?*: Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. Another way to check your app structure is to ask yourself: How quickly can you open and work in all of the related files for a feature?
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### Locate
  -  <a id="141"></a>
  -  #### Style 141
  -
  -    - Make locating your code intuitive, simple and fast.
  -
  -      **Why?** I find this to be super important for a project. If the team cannot find the files they need to work on quickly, they will not be able to work as efficiently as possible, and the structure needs to change. You may not know the file name or where its related files are, so putting them in the most intuitive locations and near each other saves a ton of time. A descriptive folder structure can help with this.
  -
  -      ```
  -      /node_modules
  -      /client
  -        /app
  -          /avengers
  -          /blocks
  -            /exception
  -            /logger
  -          /core
  -          /dashboard
  -          /data
  -          /layout
  -          /widgets
  -        /content
  -        index.html
  -      package.json
  -      ```
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### Identify
  -  <a id="142"></a>
  -  #### Style 142
  -
  -    - When you look at a file you should instantly know what it contains and represents.
  -
  -      **Why?** You spend less time hunting and pecking for code, and become more efficient. If this means you want longer file names, then so be it. Be descriptive with file names and keeping the contents of the file to exactly 1 component. Avoid files with multiple controllers, multiple services, or a mixture. There are deviations of the 1 per file rule when I have a set of very small features that are all related to each other, they are still easily identifiable.
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### Flat
  -  <a id="143"></a>
  -  #### Style 143
  -
  -    - Keep a flat folder structure as long as possible. When you get to 7+ files, begin considering separation.
  -
  -      **Why?** Nobody wants to search 7 levels of folders to find a file. Think about menus on web sites … anything deeper than 2 should take serious consideration. In a folder structure there is no hard and fast number rule, but when a folder has 7-10 files, that may be time to create subfolders. Base it on your comfort level. Use a flatter structure until there is an obvious value (to help the rest of LIFT) in creating a new folder.
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### T-DRY (Try to Stick to DRY)
  -  <a id="144"></a>
  -  #### Style 144
  -
  -    - Be DRY, but don't go nuts and sacrifice readability.
  -
  -      **Why?** Being DRY is important, but not crucial if it sacrifices the others in LIFT, which is why I call it T-DRY. I don’t want to type session-view.html for a view because, well, it’s obviously a view. If it is not obvious or by convention, then I name it.
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ## Application Structure
  -
  -  ### Overall Guidelines
  -  <a id="150"></a>
  -  #### Style 150
  -
  -    - Have a near term view of implementation and a long term vision. In other words, start small but keep in mind on where the app is heading down the road. All of the app's code goes in a root folder named `app`. All content is 1 feature per file. Each component, service, pipe is in its own file. All 3rd party vendor scripts are stored in another root folder and not in the `app` folder. I didn't write them and I don't want them cluttering my app.
  -
  -    **example coming soon**
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### Layout
  -  <a id="151"></a>
  -  #### Style 151
  -
  -    - Place components that define the overall layout of the application in a folder named `layout`. These may include a shell view and component may act as the container for the app, navigation, menus, content areas, and other regions.
  -    
  -      **Why?** Organizes all layout in a single place re-used throughout the application.
  -
  -<a href="#toc">Back to top</a>
  -:marked
  -  ### Folders-by-Feature Structure
  -  <a id="152"></a>
  -  #### Style 152
  -
  -    - Create folders named for the feature they represent. When a folder grows to contain more than 7 files, start to consider creating a folder for them. Your threshold may be different, so adjust as needed.
  -
  -      **Why?** A developer can locate the code, identify what each file represents at a glance, the structure is flat as can be, and there is no repetitive nor redundant names.
  -
  -      **Why?** The LIFT guidelines are all covered.
  -
  -      **Why?** Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.
  -
  -      **Why?** When there are a lot of files (10+) locating them is easier with a consistent folder structures and more difficult in flat structures.
  -
  -    **example coming soon**
  -
  -<a href="#toc">Back to top</a>
  -:marked
     ## Appendix
   
     ### File Templates and Snippets
  
positive.code: 
  :marked
    ### Small Functions
    <a id="002"></a>
    #### Style 002
  
    - Define small functions, no more than 75 LOC (less is better).
  
  
negative.code: <a href="#toc">Back to top</a>
  :marked
    ### Single Responsibility
    <a id="07-42"></a>
    #### Style 07-42
  
      - Services should have a [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is encapsulated by its context. Once a service begins to exceed that singular purpose, a new one should be created.
  
  