{"action":"created","comment":{"url":"https://api.github.com/repos/angular/angular.io/pulls/comments/48589696","id":48589696,"diff_hunk":"@@ -0,0 +1,707 @@\n+include ../../../../_includes/_util-fns\n+\n+:marked\n+  ## Component Communication\n+\n+  Real applications rarely use a single component to implement the entire functionality of the app. To create structured, testable \n+  and maintainable applications, we'd better decompose the entire logic into a set of loosely-coupled (or decoupled) components.\n+  This way, we can create smaller building blocks with their own boundaries of responsibility, and compose the entire application\n+  from them.\n+  \n+  Generally, an Angular app is a tree of components &mdash; with the bootstrapped component in its root. Thinking of an app's \n+  structure as a tree, there are components that are in the same branch of the component tree &mdash; these form parent and child hierarchies\n+  &mdash;, and components in different branches &mdash; they are not directly related. Evidently, components need to communicate with each other\n+  to carry out the tasks the app is created for.\n+  \n+  As we already learned, _component_ is a pivotal concept of Angular, and it was designed with _inter-component communication_ in mind.\n+  We can think of the following information flows:\n+  * From a parent to its children\n+  * From a child to its parent\n+  * Among unrelated, completely decoupled components\n+  \n+  In this chapter, we will learn six frequently used Angular mechanisms and techniques available for inter-component communication.\n+  We will also get acquainted with the tradeoffs of each mechanism, and understand the scenarios best suited for using a particular method of communication.\n+  Before diving deeply into the details, here is a short overview of these techniques:\n+  \n+  __#1: Parent to child communication with input property binding__\n+  \n+  The `prop-value` expression of the parent is bound to the `child-prop` input property of the child. `child-prop` is updated every time when `prop-value` changes:\n+  \n++makeExample('component-communication/ts/fragments/property-binding-intro.html')\n+  \n+:marked\n+  We can bind multiple properties of a single child component to the parent, and, implicitly, we can bind multiple children to the parent &mdash; \n+  ie. with `ng-for`:\n+  \n++makeExample('component-communication/ts/fragments/property-binding-intro-2.html')\n+  \n+:marked\n+  [Jump to details](#-1-parent-to-child-communication-with-input-property-binding)\n+\n+:marked\n+  __#2: Child to parent communication with event emitting__\n+  \n+  When a child needs to communicate with its parent, it can emit an event. The parent can define  its own event handler method , and bind this method \n+  to the child's output property:\n+\n++makeExample('component-communication/ts/fragments/event-binding-intro.html')\n+  \n+:marked\n+  Here, the child event is emitted by the `raiseMyEvent` method. The parent declares the `handleMyEvent()` method and binds it to the `child-event`\n+  output property of the child. Events can have arguments &mdash; here, `\"Fired!\"` is the argument &mdash;, which can be passed to the parent.\n+  At the parent side `$event` represents the argument of the emitted event.\n+  \n+  [Jump to details](#-2-child-to-parent-communication-with-event-emitting)\n+\n+  __#3: Child to parent communication with direct method calling__\n+  \n+  Nothing prevents us to implement our parent so that it passes a reference to itself to its children, and those use that reference\n+  to access their parent's methods and properties. When the parent embeds its children as content markup, we can hand the parent reference to \n+  children in a trivial way like this:\n+  \n++makeExample('component-communication/ts/fragments/parent-reference-1.html')\n+  \n+:marked\n+  Beside this very technique, there are other ways to pass the parent reference to children, with little tricks we can even use dependency injection\n+  to inject the parent into the child component's constructor.\n+  The concrete technique does not matter: **Angular discourages this model, because it can sidestep the change detection mechanism, and so it may break\n+  the data flow model.**\n+  \n+  [Jump to details](#-3-child-to-parent-communication-with-direct-method-calling)\n+\n+  __#4: Duplex parent/child communication through a service object__\n+  \n+  Parent and child components share their responsibilities. In this sharing both component types have their own responsibilities including UI logic\n+  and others. The parent and its children both can manage state information about the UI logic. Often, the majority of communication is about\n+  managing the overall state information of this component fabric.\n+  \n+  In many cases the logic can be outsourced to a separate service that is the single source of truth, stores the state and provides operations to\n+  access and alter the state. In such a scenario, parent and child components do not need to talk with each other directly, each of them \n+  communicates with the intermediary service:\n+  \n++makeExample('component-communication/ts/fragments/service-intro.ts', 'service')\n+\n+:marked\n+  This service is injected into the parent and child components via Angular dependency injection (via component constructors):\n+\n++makeExample('component-communication/ts/fragments/service-intro.ts', 'components')\n+\n+:marked\n+  Both component types can access the service instance injected into the constructor. The dependency injection mechanism takes care &mdash; \n+  unless we do not configure it in another way &mdash; that the parent and its child components use the same service instance.\n+  We can design and implement the approprate service methods and properties, and access them from within the components. \n+  \n+  [Jump to details](#-4-duplex-parent-child-communication-through-a-service-object)\n+\n+  __#5: Communication among unrelated components via a message bus__\n+  \n+  In many inter-component communication scenario, the communicating parties are not in a perent-child relation with each other. They can\n+  be siblings, located in separate branches of the component hierarchy, or even be totally unrelated to each other. \n+  In such scenarios, components can communicate with each others directly or through intermediary object.\n+  \n+  In this chapter, we will create a message bus that is used as a common communication channel for sending and listening to messages:\n+  \n++makeExample('component-communication/ts/fragments/message-bus-intro.ts')\n+\n+:marked\n+  We rely on Angular's dependency injection to allow the components to use the message bus.\n+  \n+  [Jump to details](#-5-communication-among-unrelated-components-via-a-message-bus)\n+\n+  __#6: Parent to child communication where children are transposed in &mdash; using `@ContentChildren`__\n+  \n+  Often, we define nested content in a parent component's definition:\n+  \n++makeExample('component-communication/ts/fragments/contentchildren-intro.html')\n+\n+:marked\n+  Here,`child-content` is just a directive that defines content:\n+  \n++makeExample('component-communication/ts/fragments/contentchildren-intro.ts', 'child-content')\n+\n+:marked\n+  We'd like to render a view so that a particluar component, ie. `ChildComponent`, is used for each `child-content`:\n+  \n++makeExample('component-communication/ts/fragments/contentchildren-intro.ts', 'child-comp')\n+\n+:marked\n+  Somehow, we need to transpose the `child-content` elements into `parent-comp` as `ChildComponent` instances, and want to communicate\n+  from the parent component to its children. We know that input data binding is a simple and great way to implement parent-to-child \n+  communication so that we'd like to apply a template like this, where `myContent` represents the collection of `child-content` elements we\n+  nested into `parent-comp`:\n+  \n++makeExample('component-communication/ts/fragments/contentchildren-intro.ts', 'parent-comp-def', null, {pnk: /(myContent)/g})\n+\n+:marked\n+  The issue is that we do not know how to get a collection of `child-content` elements and store them in `myContent` so that we\n+  can iterate through this collection, define the child component instances, and establish the input property binding.\n+  \n+  Angular provides the `@ContentChildren` annotation we can use to define that we need to get a collection of children that are used\n+  as content within our parent component. The framework takes care of initializing this collection during component instantiation, \n+  detects changes, and dynamically updates the collection of children:\n+  \n++makeExample('component-communication/ts/fragments/contentchildren-intro.ts', 'parent-comp', null, {pnk: /(@ContentChildren)/g})\n+\n+:marked\n+  [Jump to details](#-6-parent-to-child-communication-where-children-are-transposed-in-mdash-using-contentchildren-)\n+\n+  ### The Hero Job Board sample\n+  \n+  In this chapter, we will build a sample application that help us involve our heroes in actions when we really need their help.\n+  In this app, users can act on behalf of the person in need, and also on behalf of each hero. The basic workflow is the following:\n+  1. The person in need invites heroes to listen to job requests.\n+  1. When there's a decent job that requires superpower, the person in need announces a job request that is received by all heroes.\n+  1. Heroes can opt to undertake the job.\n+  1. When having received applications for the job, the person in need assigns the job to the one of the responding heroes.\n+  1. The assigned hero is notified about winning the job, the others receive a message about losing the opportunity.\n+  \n+  Here is a screenshot of our complete application:\n+  \n+figure.image-display\n+  img(src=\"/resources/images/devguide/component-communication/app-ui-snapshot.png\" alt=\"UI in action\")\n+  \n+:marked\n+  ### Live Example\n+  \n+  The application is available as a live example. It is a single Angular app that uses the router configured with separate routing paths \n+  for each scenario. To try the sample code of a specific scenario, use the tabs right beneath the __Component Communication__ title.\n+  \n+  [Live Example](/resources/live-examples/component-communication/ts/plnkr.html)\n+  \n+  Let's start, and dive into the details!\n+  \n+  ## #1: Parent to child communication with input property binding\n+  \n+  Angular allows components to declare _data-bound input properties_. These are like regular component, but the value of an \n+  input property takes its value from the expression bound to it. The framework automatically updates data-bound input properties\n+  during change detection.\n+  \n+  This is a _one-way binding_. As the source value changes, the destination property of the component is changed, but it does not \n+  happen in the opposite direction: altering the value of the input property within the component does not affect the source.\n+  \n+  Input data binding can be used to pass data from a parent component to a single child, to all or a set of its children.\n+  As its name suggests, we can pass only data values with input property binding. This method is not suitable for sending messages that can be represented only\n+  with method calls, and this mechanism does not allow passing data from a child component to its parent.\n+  \n+  ### Establishing an input property binding\n+  \n+  To create an input property binding, we need to carry out these steps:\n+  1. Adding an input property to the child component (apply the `@Input()` decorator on the particular property)\n+  1. Using this property with the _input binding syntax_ in the parent template to bind it to an expression\n+  \n+  The Hero Job Board application uses input data binding to pass the information about an invited hero from `HeroJobBoard` (parent) to all\n+  `HeroPanel` children. The `HeroJobBoard` component is the one that knows the circle of heroes who should be invited to listen to job requests, and it embeds \n+  a `HeroPanel` component instance for each hero.\n+  \n+  In this scenario, `HeroPanel` declares an input property, `hero`, as the `@Input()` decorator suggests:\n+  \n++makeExample('component-communication/ts/app/invite-heroes/hero-panel.ts', null, 'invite-heroes/hero-panel.ts', {pnk: /(@Input\\(\\))/g})\n+\n+:marked\n+  `HeroJobBoard` can iterate through its `invitedHeroes` collection and set up its `HeroPanel` children so that a single hero is\n+  assigned to each of them through the `hero` input property. As we learned before, the Angular property binding syntax \n+  (property name wrapped into square brackets) is used:\n+\n++makeExample('component-communication/ts/app/invite-heroes/hero-job-board.ts', null, 'invite-heroes/hero-job-board.ts', {pnk: /(\\[hero\\])/g})\n+  \n+:marked\n+  The `Hero.heroes` static collection contains six heroes for demonstration purposes. When the application starts, `invitedHeroes` is empty, \n+  but clicking the __Invite heroes__ button invokes `inviteHeroes()` and fills up the `invitedHeroes` array. According the template definition, \n+  these bindings are established between `HeroJobBoard` and its `HeroPanel` children:\n+  \n+figure.image-display\n+  img(src=\"/resources/images/devguide/component-communication/parent-and-children.png\" alt=\"Input data binding\")\n+  \n+:marked\n+  When we run the app and click the **Invite heroes** button, the application UI reflects this stucture:\n+\n+figure.image-display\n+  img(src=\"/resources/images/devguide/component-communication/heroes-invited-ui.png\" alt=\"Heroes are invited\")\n+  \n+:marked\n+  ### Using `@Input`\n+  \n+  `Input` is defined in the core module of Angular, and we need to import it so that we can use it:\n+  \n++makeExample('component-communication/ts/app/invite-heroes/hero-panel.ts', 'import', null, {blk: /(Input)/g})\n+\n+:marked\n+  `@Input()` always must be used with parentheses:\n+\n++makeExample('component-communication/ts/app/invite-heroes/hero-panel.ts', 'input-def', null, {pnk: /(@Input\\(\\))/g})\n+\n+:marked\n+.alert.is-critical\n+  :marked\n+    It's easy to forget the parentheses. Our application will fail mysteriously if we do.\n+:marked\n+  Instead of using the `@Input()` annotation, we can use the `inputs` annotation property of `@Component()` to specify input properties.\n+\n+  Using the alternative method, we could have defined the `hero` input property this way:\n+  \n++makeExample('component-communication/ts/fragments/using-inputs.ts', null, null, {pnk: /(inputs)/g})\n+\n+:marked\n+.alert.is-helpful\n+  :marked\n+    In this chapter, we are age going to use the `@Input()` annotation.\n+:marked\n+  ### The convenience of input data binding\n+  \n+  The change detection mechanism of Angular makes input data binding easy-to-use. We can utilize the input property values in expressions, too,\n+  and it makes displaying data simple.\n+  \n+  We have already implemented the functionality behind the __Invite heroes__ function with input data binding. The same mechanism allows us\n+  to implement announcing jobs. As the altered definition of `HeroPanel` shows, now it has another input property, `request`, which has two\n+  occurrences within the template:\n+\n++makeExample('component-communication/ts/app/send-job-request/hero-panel.ts', 'component', 'send-job-request/hero-panel.ts (extract)', {pnk: /(&quot;request&quot;|{{request \\|\\|.*\\}\\})/g})\n+\n+:marked\n+  As the value of `request` changes, the value of the `class` attribute is updated, as well as the text of the `<h4>` tag through the \n+  `request || 'No job announced'` expression. The `HeroJobBoard` side of the input data binding is as simple as we expect:\n+  \n++makeExample('component-communication/ts/fragments/sending-request.ts', null, 'send-job-request/hero-job-board.ts (extract)', {pnk: /(\\[request\\]=request)/g})\n+\n+:marked\n+  After inviting heroes, clicking the **Ask** button invokes `announceJob()` that sets the `request` property of `HeroJobBoard` &mdash; and Angular propagates this\n+  change to all `HeroPanel` instances:\n+\n+figure.image-display\n+  img(src=\"/resources/images/devguide/component-communication/send-job-request-ui.png\" alt=\"Job request is sent\")\n+  \n+:marked\n+  Now, let's see how a child can communicate with its parent.\n+  \n+  ## #2: Child to parent communication with event emitting\n+  \n+  Input property binding is an easy-to-use technique that works great in most parent-to-child communication scenarios. As the expression bound to\n+  the input property changes, the modification is immediately propagated to all children. At first we may think that this mechanism could be\n+  applied in the opposite direction, to send data from a child to its parent.\n+  \n+  _Angular does not implement input data binding in this direction._\n+  \n+  It is a deliberate design decision. Angular was designed with _unidirectional data flow_ in mind. This approach allows better performance \n+  when detecting and propagating property changes, which would not be easily available with a _two-directional data flow_ mechanism. \n+  The unidirectional data flow approach allows avoiding issues coming from recursion, too, when both communicating parties watch for property \n+  changes and at the same time may change the very same property's value.\n+  \n+  Instead of using a duplex communication channel between parent and child components, we can use two simplex channels, one from the parent to \n+  a child (or children), and another one in the opposite direction, from the child to its parent. While we can use input property binding\n+  from parent to child, Angular offers event emitting (output event binding) for child-to-parent communication.\n+  \n+  ### Establishing output event binding\n+  \n+  To set up output event emitting, we need to carry out these steps:\n+  1. Adding an outpt property to the child component (apply the `@Output()` decorator on the particular property)\n+  1. Declaring this property as an `EventEmitter`\n+  1. Using this property with the _output event binding syntax_ in the parent template to bind it to an event handler method\n+  \n+  The Hero Job Board application uses output event binding to sign that a hero undertakes the announced job. The `HeroPanel` component declares \n+  an output property as a type of `EventEmitter`, through which &mdash; as the type name suggests &mdash; it can emit an event. The parent \n+  `HeroJobBoard` component can use the output property to attach an event handler to that particular event.\n+  \n+  `HeroPanel` declares the `onJobTaken` output event property, as the `@Output` decorator indicates:\n+  \n++makeExample('component-communication/ts/app/take-job-event/hero-panel.ts', 'component', 'take-job-event/hero-panel.ts (extract)', {pnk: /(@Output\\(\\)|takeJob\\(\\)|onJobTaken\\.next)/g})","path":"public/docs/ts/latest/guide/component-communication.jade","position":306,"original_position":306,"commit_id":"27ca29150e0d3ad774fafee3bf01b7ff0707cef3","original_commit_id":"c2b8f95f36484baaebc4e374aed9618d4a85f8fa","user":{"login":"wardbell","id":129061,"avatar_url":"https://avatars.githubusercontent.com/u/129061?v=3","gravatar_id":"","url":"https://api.github.com/users/wardbell","html_url":"https://github.com/wardbell","followers_url":"https://api.github.com/users/wardbell/followers","following_url":"https://api.github.com/users/wardbell/following{/other_user}","gists_url":"https://api.github.com/users/wardbell/gists{/gist_id}","starred_url":"https://api.github.com/users/wardbell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wardbell/subscriptions","organizations_url":"https://api.github.com/users/wardbell/orgs","repos_url":"https://api.github.com/users/wardbell/repos","events_url":"https://api.github.com/users/wardbell/events{/privacy}","received_events_url":"https://api.github.com/users/wardbell/received_events","type":"User","site_admin":false},"body":"**Don't use the *deprecated* `next` method;  use `emit`!**\r\n\r\nFind and fix all occurrences.","created_at":"2015-12-30T07:15:51Z","updated_at":"2015-12-30T07:15:51Z","html_url":"https://github.com/angular/angular.io/pull/622#discussion_r48589696","pull_request_url":"https://api.github.com/repos/angular/angular.io/pulls/622","_links":{"self":{"href":"https://api.github.com/repos/angular/angular.io/pulls/comments/48589696"},"html":{"href":"https://github.com/angular/angular.io/pull/622#discussion_r48589696"},"pull_request":{"href":"https://api.github.com/repos/angular/angular.io/pulls/622"}}},"pull_request":{"url":"https://api.github.com/repos/angular/angular.io/pulls/622","id":54748724,"html_url":"https://github.com/angular/angular.io/pull/622","diff_url":"https://github.com/angular/angular.io/pull/622.diff","patch_url":"https://github.com/angular/angular.io/pull/622.patch","issue_url":"https://api.github.com/repos/angular/angular.io/issues/622","number":622,"state":"open","locked":false,"title":"[WIP] docs(component communication): new chapter","user":{"login":"wardbell","id":129061,"avatar_url":"https://avatars.githubusercontent.com/u/129061?v=3","gravatar_id":"","url":"https://api.github.com/users/wardbell","html_url":"https://github.com/wardbell","followers_url":"https://api.github.com/users/wardbell/followers","following_url":"https://api.github.com/users/wardbell/following{/other_user}","gists_url":"https://api.github.com/users/wardbell/gists{/gist_id}","starred_url":"https://api.github.com/users/wardbell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wardbell/subscriptions","organizations_url":"https://api.github.com/users/wardbell/orgs","repos_url":"https://api.github.com/users/wardbell/repos","events_url":"https://api.github.com/users/wardbell/events{/privacy}","received_events_url":"https://api.github.com/users/wardbell/received_events","type":"User","site_admin":false},"body":"WORK IN PROGRESS - do not merge\r\nNew chapter in review.\r\nReplaces #543","created_at":"2015-12-29T18:48:14Z","updated_at":"2015-12-30T07:15:51Z","closed_at":null,"merged_at":null,"merge_commit_sha":"6ce5dd92c759ff70f6931d09134984a36e805e31","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/angular/angular.io/pulls/622/commits","review_comments_url":"https://api.github.com/repos/angular/angular.io/pulls/622/comments","review_comment_url":"https://api.github.com/repos/angular/angular.io/pulls/comments{/number}","comments_url":"https://api.github.com/repos/angular/angular.io/issues/622/comments","statuses_url":"https://api.github.com/repos/angular/angular.io/statuses/27ca29150e0d3ad774fafee3bf01b7ff0707cef3","head":{"label":"IdeaBlade:devguide-component-communication-new","ref":"devguide-component-communication-new","sha":"27ca29150e0d3ad774fafee3bf01b7ff0707cef3","user":{"login":"IdeaBlade","id":1630193,"avatar_url":"https://avatars.githubusercontent.com/u/1630193?v=3","gravatar_id":"","url":"https://api.github.com/users/IdeaBlade","html_url":"https://github.com/IdeaBlade","followers_url":"https://api.github.com/users/IdeaBlade/followers","following_url":"https://api.github.com/users/IdeaBlade/following{/other_user}","gists_url":"https://api.github.com/users/IdeaBlade/gists{/gist_id}","starred_url":"https://api.github.com/users/IdeaBlade/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IdeaBlade/subscriptions","organizations_url":"https://api.github.com/users/IdeaBlade/orgs","repos_url":"https://api.github.com/users/IdeaBlade/repos","events_url":"https://api.github.com/users/IdeaBlade/events{/privacy}","received_events_url":"https://api.github.com/users/IdeaBlade/received_events","type":"Organization","site_admin":false},"repo":{"id":40154922,"name":"angular.io","full_name":"IdeaBlade/angular.io","owner":{"login":"IdeaBlade","id":1630193,"avatar_url":"https://avatars.githubusercontent.com/u/1630193?v=3","gravatar_id":"","url":"https://api.github.com/users/IdeaBlade","html_url":"https://github.com/IdeaBlade","followers_url":"https://api.github.com/users/IdeaBlade/followers","following_url":"https://api.github.com/users/IdeaBlade/following{/other_user}","gists_url":"https://api.github.com/users/IdeaBlade/gists{/gist_id}","starred_url":"https://api.github.com/users/IdeaBlade/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IdeaBlade/subscriptions","organizations_url":"https://api.github.com/users/IdeaBlade/orgs","repos_url":"https://api.github.com/users/IdeaBlade/repos","events_url":"https://api.github.com/users/IdeaBlade/events{/privacy}","received_events_url":"https://api.github.com/users/IdeaBlade/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/IdeaBlade/angular.io","description":"Website for Angular 2","fork":true,"url":"https://api.github.com/repos/IdeaBlade/angular.io","forks_url":"https://api.github.com/repos/IdeaBlade/angular.io/forks","keys_url":"https://api.github.com/repos/IdeaBlade/angular.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/IdeaBlade/angular.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/IdeaBlade/angular.io/teams","hooks_url":"https://api.github.com/repos/IdeaBlade/angular.io/hooks","issue_events_url":"https://api.github.com/repos/IdeaBlade/angular.io/issues/events{/number}","events_url":"https://api.github.com/repos/IdeaBlade/angular.io/events","assignees_url":"https://api.github.com/repos/IdeaBlade/angular.io/assignees{/user}","branches_url":"https://api.github.com/repos/IdeaBlade/angular.io/branches{/branch}","tags_url":"https://api.github.com/repos/IdeaBlade/angular.io/tags","blobs_url":"https://api.github.com/repos/IdeaBlade/angular.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/IdeaBlade/angular.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/IdeaBlade/angular.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/IdeaBlade/angular.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/IdeaBlade/angular.io/statuses/{sha}","languages_url":"https://api.github.com/repos/IdeaBlade/angular.io/languages","stargazers_url":"https://api.github.com/repos/IdeaBlade/angular.io/stargazers","contributors_url":"https://api.github.com/repos/IdeaBlade/angular.io/contributors","subscribers_url":"https://api.github.com/repos/IdeaBlade/angular.io/subscribers","subscription_url":"https://api.github.com/repos/IdeaBlade/angular.io/subscription","commits_url":"https://api.github.com/repos/IdeaBlade/angular.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/IdeaBlade/angular.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/IdeaBlade/angular.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/IdeaBlade/angular.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/IdeaBlade/angular.io/contents/{+path}","compare_url":"https://api.github.com/repos/IdeaBlade/angular.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/IdeaBlade/angular.io/merges","archive_url":"https://api.github.com/repos/IdeaBlade/angular.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/IdeaBlade/angular.io/downloads","issues_url":"https://api.github.com/repos/IdeaBlade/angular.io/issues{/number}","pulls_url":"https://api.github.com/repos/IdeaBlade/angular.io/pulls{/number}","milestones_url":"https://api.github.com/repos/IdeaBlade/angular.io/milestones{/number}","notifications_url":"https://api.github.com/repos/IdeaBlade/angular.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/IdeaBlade/angular.io/labels{/name}","releases_url":"https://api.github.com/repos/IdeaBlade/angular.io/releases{/id}","created_at":"2015-08-04T00:40:19Z","updated_at":"2015-11-20T12:59:41Z","pushed_at":"2015-12-30T03:09:07Z","git_url":"git://github.com/IdeaBlade/angular.io.git","ssh_url":"git@github.com:IdeaBlade/angular.io.git","clone_url":"https://github.com/IdeaBlade/angular.io.git","svn_url":"https://github.com/IdeaBlade/angular.io","homepage":"https://angular.io","size":17227,"stargazers_count":2,"watchers_count":2,"language":"HTML","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":4,"mirror_url":null,"open_issues_count":0,"forks":4,"open_issues":0,"watchers":2,"default_branch":"master"}},"base":{"label":"angular:master","ref":"master","sha":"95955e48e8430a599538fcae7f84d5bb4b9d3e14","user":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"repo":{"id":31985425,"name":"angular.io","full_name":"angular/angular.io","owner":{"login":"angular","id":139426,"avatar_url":"https://avatars.githubusercontent.com/u/139426?v=3","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/angular/angular.io","description":"Website for Angular 2","fork":false,"url":"https://api.github.com/repos/angular/angular.io","forks_url":"https://api.github.com/repos/angular/angular.io/forks","keys_url":"https://api.github.com/repos/angular/angular.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/angular/angular.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/angular/angular.io/teams","hooks_url":"https://api.github.com/repos/angular/angular.io/hooks","issue_events_url":"https://api.github.com/repos/angular/angular.io/issues/events{/number}","events_url":"https://api.github.com/repos/angular/angular.io/events","assignees_url":"https://api.github.com/repos/angular/angular.io/assignees{/user}","branches_url":"https://api.github.com/repos/angular/angular.io/branches{/branch}","tags_url":"https://api.github.com/repos/angular/angular.io/tags","blobs_url":"https://api.github.com/repos/angular/angular.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/angular/angular.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/angular/angular.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/angular/angular.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/angular/angular.io/statuses/{sha}","languages_url":"https://api.github.com/repos/angular/angular.io/languages","stargazers_url":"https://api.github.com/repos/angular/angular.io/stargazers","contributors_url":"https://api.github.com/repos/angular/angular.io/contributors","subscribers_url":"https://api.github.com/repos/angular/angular.io/subscribers","subscription_url":"https://api.github.com/repos/angular/angular.io/subscription","commits_url":"https://api.github.com/repos/angular/angular.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/angular/angular.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/angular/angular.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/angular/angular.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/angular/angular.io/contents/{+path}","compare_url":"https://api.github.com/repos/angular/angular.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/angular/angular.io/merges","archive_url":"https://api.github.com/repos/angular/angular.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/angular/angular.io/downloads","issues_url":"https://api.github.com/repos/angular/angular.io/issues{/number}","pulls_url":"https://api.github.com/repos/angular/angular.io/pulls{/number}","milestones_url":"https://api.github.com/repos/angular/angular.io/milestones{/number}","notifications_url":"https://api.github.com/repos/angular/angular.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/angular/angular.io/labels{/name}","releases_url":"https://api.github.com/repos/angular/angular.io/releases{/id}","created_at":"2015-03-10T22:32:34Z","updated_at":"2015-12-29T09:55:30Z","pushed_at":"2015-12-30T03:09:08Z","git_url":"git://github.com/angular/angular.io.git","ssh_url":"git@github.com:angular/angular.io.git","clone_url":"https://github.com/angular/angular.io.git","svn_url":"https://github.com/angular/angular.io","homepage":"https://angular.io","size":16745,"stargazers_count":174,"watchers_count":174,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":193,"mirror_url":null,"open_issues_count":105,"forks":193,"open_issues":105,"watchers":174,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/angular/angular.io/pulls/622"},"html":{"href":"https://github.com/angular/angular.io/pull/622"},"issue":{"href":"https://api.github.com/repos/angular/angular.io/issues/622"},"comments":{"href":"https://api.github.com/repos/angular/angular.io/issues/622/comments"},"review_comments":{"href":"https://api.github.com/repos/angular/angular.io/pulls/622/comments"},"review_comment":{"href":"https://api.github.com/repos/angular/angular.io/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/angular/angular.io/pulls/622/commits"},"statuses":{"href":"https://api.github.com/repos/angular/angular.io/statuses/27ca29150e0d3ad774fafee3bf01b7ff0707cef3"}}}}