{"action":"created","issue":{"url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/13","repository_url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online","labels_url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/13/labels{/name}","comments_url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/13/comments","events_url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/13/events","html_url":"https://github.com/ShifaMicrotechSupport/shifa-online/issues/13","id":144033525,"number":13,"title":"Repertory Routing Parameter and page load","user":{"login":"nasihere","id":4184377,"avatar_url":"https://avatars.githubusercontent.com/u/4184377?v=3","gravatar_id":"","url":"https://api.github.com/users/nasihere","html_url":"https://github.com/nasihere","followers_url":"https://api.github.com/users/nasihere/followers","following_url":"https://api.github.com/users/nasihere/following{/other_user}","gists_url":"https://api.github.com/users/nasihere/gists{/gist_id}","starred_url":"https://api.github.com/users/nasihere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nasihere/subscriptions","organizations_url":"https://api.github.com/users/nasihere/orgs","repos_url":"https://api.github.com/users/nasihere/repos","events_url":"https://api.github.com/users/nasihere/events{/privacy}","received_events_url":"https://api.github.com/users/nasihere/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"nasihere","id":4184377,"avatar_url":"https://avatars.githubusercontent.com/u/4184377?v=3","gravatar_id":"","url":"https://api.github.com/users/nasihere","html_url":"https://github.com/nasihere","followers_url":"https://api.github.com/users/nasihere/followers","following_url":"https://api.github.com/users/nasihere/following{/other_user}","gists_url":"https://api.github.com/users/nasihere/gists{/gist_id}","starred_url":"https://api.github.com/users/nasihere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nasihere/subscriptions","organizations_url":"https://api.github.com/users/nasihere/orgs","repos_url":"https://api.github.com/users/nasihere/repos","events_url":"https://api.github.com/users/nasihere/events{/privacy}","received_events_url":"https://api.github.com/users/nasihere/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2016-03-28T17:32:45Z","updated_at":"2016-03-28T17:54:06Z","closed_at":null,"body":"Setup\r\n\r\nThe Angular Component Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular 2 core. It is in its own library within the Angular npm bundle. We make it available by loading its script in our index.html, after the Angular core script.\r\n\r\n\r\n<script src=\"node_modules/angular2/bundles/router.dev.js\"></script>\r\n<base href>\r\n\r\nMost routing applications should add a <base> element just after the <head> tag to tell the router how to compose navigation URLs.\r\n\r\nIf the app folder is the application root, as it is for our sample application, set the href value exactly as shown here.\r\n\r\n\r\n<base href=\"/\">\r\n\r\n\r\nConfiguration\r\n\r\nWhen the browser's URL changes, the router looks for a corresponding RouteDefinition from which it can determine the component to display.\r\n\r\nA router has no route definitions until we configure it. The preferred way to simultaneously create a router and add its routes is with a @RouteConfig decorator applied to the router's host component.\r\n\r\nIn this example, we configure the top-level AppComponent with three route definitions\r\n\r\napp.component.ts (excerpt)\r\n\r\n@Component({ ... })\r\n@RouteConfig([\r\n  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},\r\n  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},\r\n  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}\r\n])\r\nexport class AppComponent { }\r\n\r\nRouter Outlet\r\n\r\nNow we know how the router gets its configuration. When the browser URL for this application becomes /heroes, the router matches that URL to the RouteDefintion named Heroes and displays the HeroListComponent in a RouterOutlet that we've placed in the host view's HTML.\r\n\r\n\r\n<!-- Routed views go here -->\r\n<router-outlet></router-outlet>"},"comment":{"url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/comments/202506951","html_url":"https://github.com/ShifaMicrotechSupport/shifa-online/issues/13#issuecomment-202506951","issue_url":"https://api.github.com/repos/ShifaMicrotechSupport/shifa-online/issues/13","id":202506951,"user":{"login":"nasihere","id":4184377,"avatar_url":"https://avatars.githubusercontent.com/u/4184377?v=3","gravatar_id":"","url":"https://api.github.com/users/nasihere","html_url":"https://github.com/nasihere","followers_url":"https://api.github.com/users/nasihere/followers","following_url":"https://api.github.com/users/nasihere/following{/other_user}","gists_url":"https://api.github.com/users/nasihere/gists{/gist_id}","starred_url":"https://api.github.com/users/nasihere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nasihere/subscriptions","organizations_url":"https://api.github.com/users/nasihere/orgs","repos_url":"https://api.github.com/users/nasihere/repos","events_url":"https://api.github.com/users/nasihere/events{/privacy}","received_events_url":"https://api.github.com/users/nasihere/received_events","type":"User","site_admin":false},"created_at":"2016-03-28T17:54:06Z","updated_at":"2016-03-28T17:54:06Z","body":"@RouteConfig()\r\n\r\nA router holds a list of route definitions. The list is empty for a new router. We must configure it.\r\n\r\nA router also needs a Host Component, a point of origin for its navigations.\r\n\r\nIt's natural to combine the creation of a new router, its configuration, and its assignment to a host component in a single step. That's the purpose of the @RouteConfig decorator which we put to good use here:\r\n\r\n```\r\n\r\n@Component({ ... })\r\n@RouteConfig([\r\n  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},\r\n  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent}\r\n])\r\n```\r\nexport class AppComponent { }"}}