Morph MORPH
SIGN IN SIGN UP
angular / angular.js UNCLAIMED

AngularJS - HTML enhanced for web apps!

0 0 0 JavaScript
Normal View History Raw
docs(bike-shed-migration): change tutorial doctype and add @step tag
2014-02-06 13:33:42 +00:00
@ngdoc tutorial
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
@name 12 - Event Handlers
docs(bike-shed-migration): change tutorial doctype and add @step tag
2014-02-06 13:33:42 +00:00
@step 12
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
@description
<ul doc-tutorial-nav="12"></ul>
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
In this step, you will add a clickable phone image swapper to the phone details page.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
* The phone details view displays one large image of the current phone and several smaller thumbnail
images. It would be great if we could replace the large image with any of the thumbnails just by
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
clicking on the desired thumbnail image. Let's have a look at how we can do this with AngularJS.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<div doc-tutorial-reset="12"></div>
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
## Component Controller
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<br />
**`app/phone-detail/phone-detail.component.js`:**
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```js
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
controller: ['$http', '$routeParams',
function PhoneDetailController($http, $routeParams) {
var self = this;
self.setImage = function setImage(imageUrl) {
self.mainImageUrl = imageUrl;
};
$http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
self.phone = response.data;
self.setImage(self.phone.images[0]);
});
}
]
...
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
In the `phoneDetail` component's controller, we created the `mainImageUrl` model property and set
its default value to the first phone image URL.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
We also created a `setImage()` method (to be used as event handler), that will change the value of
`mainImageUrl`.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
## Component Template
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<br />
**`app/phone-detail/phone-detail.template.html`:**
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```html
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
...
<ul class="phone-thumbs">
<li ng-repeat="img in $ctrl.phone.images">
<img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
</li>
</ul>
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
We bound the `ngSrc` directive of the large image to the `$ctrl.mainImageUrl` property.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
We also registered an {@link ng.directive:ngClick ngClick} handler with thumbnail images. When a
user clicks on one of the thumbnail images, the handler will use the `$ctrl.setImage()` method
callback to change the value of the `$ctrl.mainImageUrl` property to the URL of the clicked
thumbnail image.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<img class="diagram" src="img/tutorial/tutorial_12.png">
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): fix headlines
2018-02-27 17:33:42 +01:00
## Testing
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
To verify this new feature, we added two E2E tests. One verifies that `mainImageUrl` is set to the
first phone image URL by default. The second test clicks on several thumbnail images and verifies
that the main image URL changes accordingly.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<br />
**`e2e-tests/scenarios.js`:**
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
```js
...
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
describe('View: Phone detail', function() {
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
it('should display the first phone image as the main phone image', function() {
var mainImage = element(by.css('img.phone'));
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
});
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
it('should swap the main image when clicking on a thumbnail image', function() {
var mainImage = element(by.css('img.phone'));
var thumbnails = element.all(by.css('.phone-thumbs img'));
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
thumbnails.get(2).click();
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
thumbnails.get(0).click();
expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
});
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
});
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
You can now rerun the tests with `npm run protractor`.
docs(tutorial/step-12): add info about app.css changes Closes https://github.com/angular/angular-phonecat/issues/145
2014-04-27 09:09:59 +01:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
We also have to refactor one of our unit tests, because of the addition of the `mainImageUrl` model
property to the controller. As previously, we will use a mocked response.
docs(tutorial/step-12): add info about app.css changes Closes https://github.com/angular/angular-phonecat/issues/145
2014-04-27 09:09:59 +01:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<br />
**`app/phone-detail/phone-detail.component.spec.js`:**
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
```js
...
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
describe('controller', function() {
var $httpBackend, ctrl
var xyzPhoneData = {
name: 'phone xyz',
images: ['image/url1.png', 'image/url2.png']
};
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
beforeEach(inject(function($componentController, _$httpBackend_, _$routeParams_) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
}));
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
it('should fetch phone details', function() {
expect(ctrl.phone).toBeUndefined();
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
$httpBackend.flush();
expect(ctrl.phone).toEqual(xyzPhoneData);
});
docs(tutorial/step-12): add info about app.css changes Closes https://github.com/angular/angular-phonecat/issues/145
2014-04-27 09:09:59 +01:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
});
docs(tutorial/step-12): add info about app.css changes Closes https://github.com/angular/angular-phonecat/issues/145
2014-04-27 09:09:59 +01:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
...
docs(tutorial/step-12): add info about app.css changes Closes https://github.com/angular/angular-phonecat/issues/145
2014-04-27 09:09:59 +01:00
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
Our unit tests should now be passing again.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): fix headlines
2018-02-27 17:33:42 +01:00
## Experiments
docs(all): convert <pre>/</pre> snippets to GFM snippets
2014-02-06 14:02:18 +00:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<div></div>
docs(tutorial): update step_12.ngdoc This time I feel good about this modification to the document, the code listing on the tutorial page for the animation.js DID NOT match what was actually IN the file for that branch. Updated tutorial to reflect actual contents of file Closes #5922
2014-01-22 14:19:00 +13:00
docs(*): ensure naming is correct for Angular(JS) versions
2017-01-24 17:23:54 +00:00
* Similar to the `ngClick` directive, which binds an AngularJS expression to the `click` event, there
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
are built-in directives for all native events, such as `dblclick`, `focus`/`blur`, mouse and key
events, etc.
docs(tutorial): update step_12.ngdoc This time I feel good about this modification to the document, the code listing on the tutorial page for the animation.js DID NOT match what was actually IN the file for that branch. Updated tutorial to reflect actual contents of file Closes #5922
2014-01-22 14:19:00 +13:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
Let's add a new controller method to the `phoneDetail` component's controller:
docs(tutorial): update step_12.ngdoc This time I feel good about this modification to the document, the code listing on the tutorial page for the animation.js DID NOT match what was actually IN the file for that branch. Updated tutorial to reflect actual contents of file Closes #5922
2014-01-22 14:19:00 +13:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
```js
self.onDblclick = function onDblclick(imageUrl) {
alert('You double-clicked image: ' + imageUrl);
docs(tutorial): update step_12.ngdoc This time I feel good about this modification to the document, the code listing on the tutorial page for the animation.js DID NOT match what was actually IN the file for that branch. Updated tutorial to reflect actual contents of file Closes #5922
2014-01-22 14:19:00 +13:00
};
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
and add the following to the `<img>` element in `phone-detail.template.html`:
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
```html
<img ... ng-dblclick="$ctrl.onDblclick(img)" />
```
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
Now, whenever you double-click on a thumbnail, an alert pops-up. Pretty annoying!
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): fix headlines
2018-02-27 17:33:42 +01:00
## Summary
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
With the phone image swapper in place, we are ready for {@link step_13 step 13} to learn an even
better way to fetch data.
feat(tutorial): add step 12 of the phonecat tutorial
2013-10-08 10:43:01 -07:00
docs(tutorial): fix link to bower in step 12 Muchas gracias! \o/ Closes #7507
2014-05-19 02:42:30 +02:00
docs(tutorial): update to use `v1.5.x` and best practices This is a major re-structuring of the tutorial app's codebase, aiming at applying established best practices (in terms of file naming/layout and code organization) and utilizing several new features and enhancements (most notably components) introduced in recent versions of Angular (especially v1.5). Apart from the overall changes, two new chapters were introduced: one on components and one on code organization. -- In the process, several other things were (incidentally) taken care of, including: * Dependencies were upgraded to latest versions. * Animations were polished. * Outdated links were updated. * The app's base URL was changed to `/` (instead of `/app/`). BTW, this has been tested with the following versions of Node (on Windows 10) and everything worked fine: * 0.11.16 * 4.2.6 * 4.4.2 * 5.10.0 * 6.2.0 -- This was inspired by (and loosely based on) #13834. Again, mad props to @teropa for leading the way :) -- **Note:** The old version of the tutorial, that is compatible with Angular version 1.4 or older, has been saved on the `pre-v1.5.0-snapshot` branch of [angular-phonecat](https://github.com/angular/angular-phonecat). The `v1.4.x` version of the tutorial should be pointed to that branch instead of `master`. -- Related to angular/angular-phonecat#326. Related to angular/angular-seed#341. Closes #14416
2016-03-27 21:32:36 +03:00
<ul doc-tutorial-nav="12"></ul>
Reference in New Issue Copy Permalink