Angular: Rough Notes - Githubissues

bitovi / academy

Everything we know about frontend, backend, UX, and Devops consulting and management.

https://www.bitovi.com/academy/

14 stars 3 forks source link

Angular: Rough Notes #27

Closed justinbmeyer closed 5 years ago

justinbmeyer commented 5 years ago

Angular

[x] Add an image of what is being built (maybe link to the PMO DoneJS app for now so people can see what we are building)
[x] Add the Before you begin and Prerequisites sections (DOM and jQuery has an example of these).

Why Angular

[ ] Example with angular 6 ... should this section be removed?

Building our first app

[x] npm install -g @angular/cli -> should specify the version
[x] Which stylesheet format would you like to use? - does not have an answer
- looks like it was less, example: styleUrls: ['./restaurant.component.less']
[x] Seems link changing angular.json doesn't auto-compile

[x] P1 - npm install -g @angular/cli@7.0.0 => No matching version found for @angular/cli@7.0.0

[ ] Running Tests we should probably call out that npm test needs to run. Also, we should make sure every file is labeled with its location.

justinbmeyer commented 5 years ago

Creating Components

[x] assets angular.json isn't the whole file
[x] Every step should ideally have something visible. It is possible to see something of what we are doing? Even putting these components on the homepage in this step would be helpful. +2 .. @tehfedaykin , I think that somehow adding <pmo-home> to app.component.html so you could see it would be nice.
[x] Maybe don't create those interfaces if they are just going to be moved

[x] "es5BrowserSupport": true is removed. I think the highlighting could just focus on the object added to assets and the place-my-order styles added to styles.
[x] I'd add only to the @highlight like: @higlight XYZ,only ... this will make it so not all of angular.json is visible.
[x] I'd bold so it is harder to miss:

Any time changes are made to the angular.json file, we need to restart our server to catch the new changes.

[x] p0 angular.json has the wrong project name
[x] Make sure people know to update the build section of angular.json (instead of the test section)
[x] p0 .value in the .html file
[ ] change the component before its .html
[ ] add the components to app.component.html right after the components are generated. let folks see the components as soon as possible.

[x] Introduce the HTML in the problem part. You might want a "we will do this by" section similar to RxJS for some of these.
[x] Can we change this?

dynamic title we can change in an h1 tag
[ ] It might be worth creating an image of what the app will look like at this point ...
[x] "How to bind data to the dom" ... I'm not sure this is enough introduction.
[x] Instead of myData maybe myTitle?
[x] The component should be visible when completing the exercise. Have them add <pmo-home> first. Move Viewing New Components up in the "what you need to know" section.
[x] I'd probably add some content within the <div *ngIf="showMyContent; else showMyFalseTemplate"></div>
[x] ng-class .. there's no text describing this
[x] you might move the restaurants array outside the ngOnInit function. This would allow ngOnInit to read a bit better:
```
ngOnInit(){
 setTimeout( () => {
   this.restaurants = restaurants.
 })
}
```
[x] "How pipes are used" ... introduce what the example is doing. I'm a bit confused by the syntax. Also, is exponent a string?
[x] I'd show src/app/restaurant/restaurant.component.html as the goal what we are trying to make work in the problem section. <img src="{{restaurant.images.thumbnail | imageUrl}}" width="100" height="100">. Let them figure out how to get imageUrl working.

[x] - How to bind data to the DOM is stated. I think we should refer to the section above this here.
[x] - myData still used a few places.
[x] - highlighting off?
[ ] - How pipes are used is stated. I think we should refer to the section above this here.
[x] - Might want to give a hint to String.prototype.replace ...

[ ] P0 - the tests don't pass if <pmo-home> is in the page. We can have people add tests later?

justinbmeyer commented 5 years ago

Adding Routing

[x] This doesn't seem to work. I think the following needs to be included:

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';

[x] How should <router-outlet></router-outlet> be used? This should be app/app.component.html

Wednesday

What is rla in <li [ngClass]="{'active' : rla.isActive} "> ?

[x] Add a link to the homepage: <a routerLink="/about" >About</a>

[x] Use mock url

<mock-url pushstate:from="true"></mock-url>
<script src="//unpkg.com/mock-url@^5.0.0" type="module"></script>

[x] <base-href> ... I'm not sure what "compose" means

[x] Wrong highlighting? ... In my previous comment, I expected the following to be highlighted:

const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: '**', component: HomeComponent }
]

[ ] Why is the title <base-href> instead of <base href="PATH">?
[x] Isn't this just the base element? Are you sure this is Angular: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base ?
[x] Replace the whole file with the following: might want to make it more explicit that everything is being removed.
[x] How to create routes that serve components ... I think we should always say something like ... How to create routes that serve components - you've learned this in the sections above.

justinbmeyer commented 5 years ago

Creating Navigation

[x] src/index.html instead of app/app.component.html again
[x] Clicking the <a routerLink="/home" routerLinkActive="active">Home</a> link breaks with:

[x] path that can be static or built dynamically, and ... trails off ....
[x] Why is constructor() { highlighted
[x] Adding a basic active class ... incorrect highlighting? (would be good to introduce all examples)
[x] is it worth explaining why some attributes look like routerLinkActive="my-active-class" and others like [routerLinkActiveOptions]="{exact: true}" at some point?
[ ] routerLinkActive="my-active-class" .... it's crazy that this will know about nested routerLinks
[x] Add a link to whatever supports #rla="routerLinkActive" behavior

[x] Static Segment codepen has an error.
[x] Might want to explicitly state the difference between static and dynamic with other words. Static links are hard coded values. Something like: Dynamic links are built from data and can be updated when that data changes.
[x] Made Adding a basic active class and following h3s under RouterLinkActive h2
[x] Might want to break up <li routerLinkActive #myroutervariable="routerLinkActive" [ngClass]="{'my-active-class' : myroutervariable.isActive}" > into multiple lines. Generally I try to keep each attribute on its own line (if there's more than one attribute).

Wed, March 27

[x] Update the spec file src/app/app.component.spec.ts to be: ... what is changed? There is no highlighting. Looks like expect(compiled.querySelector('h1').textContent).toContain('place-my-order.com'); is changed. We should highlight.
[ ] The final solution should probably have the whole file updated. This is where place-my-order.com comes from ..

justinbmeyer commented 5 years ago

Writing a Restaurant Service

[x] We should tell people to restart the npm start once the proxy is in place .. also verify the proxy.
[x] We should tell people to keep running the api server.
[ ] This step doesn't have any output, something a user can see or test.

[x] P0 - app.module.ts needs to be updated to include ImageUrlPipe. This isn't added until state-city-options.

Wednesday

[x] The following doesn't really YELL "make sure to run npm run api. It asks to double check.

Double check the api is working by running npm run api and navigating to localhost:7070/restaurants. You should see a JSON list of restaurant data. It will be helpful to have a second terminal tab to run the api command from.
[x] Link to HTTPClientModule docs

[x] Angular Services - Example doesn't work and isn't highlighted right.
[x] Write a Restaurant Service to fetch a list of restaurants - How can someone know it is working? Can we give them the test code?
[x] How to use httpClient to make a get request ... mention what you needed is up above.
[ ] Write an Interface to Describe the Restaurant Object and Data Response - How can someone know it is working? Can they add this to their service code and the app will break (or tests will not run?).
[x] > This interface can be written in the src/app/restaurant/restaurant.service.ts file. *Hint, you'll need to import the restaurant interface for this interface.
This interface - which interface?
the restaurant interface for this interface - interface for this interface?
[x] How to write an interface in TypeScript link to this guide :-)
[x] We should give them restaurant.ts with it partially filled out (including the export). Something like:
```
interface Item {}
interface Menu {}
...
export interface Restaurant {}
```
We should probably have given them the finalized restaurant.service.ts too ...

Wed March 27

[x] Create a Proxy to Serve API after touch, we might want to tell people to update proxy.conf.json with the following json.
[x] touch proxy.conf.json isn't type shell?
[x] Angular Services should highlight this.users = this.usersService.getUsers(); and probably the <li *ngFor="let user of users"> block to show how the service is used and then displayed ...
[ ] Using HTTPClient to make a request there is an error in the codepen: Cannot read property '__source' of undefined
[x] P0 To Verify Your Solution is Correct The highlighting in src/app/restaurant/restaurant.service.spec.ts seems off. Should it be collapsed? Where does restaurants:ResponseData come from if it's not imported? Actually .. this code example is broken.

Thursday, March 28th

[x] To Verify Your Solution is Correct - src/app/restaurant/restaurant.service.spec.ts - the highlighting seems off. Also, the JSON is changed when it probably could be the same from the test before.

justinbmeyer commented 5 years ago

Use Restaurant API data

[x] P0 - There's an error when this is complete:

core.js:15714 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule) 
[HttpClient]: 
StaticInjectorError(Platform: core)[HttpClient]: 
NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError(AppModule)[HttpClient]: 
StaticInjectorError(Platform: core)[HttpClient]: 
NullInjectorError: No provider for HttpClient!

This was because the HttpClientModule was not a listed import in app.module.ts

[x] Why HttpClientModule needs some explanation.

[x] P0 - Another error:

ERROR TypeError: Cannot set property 'isPending' of undefined
at restaurant.component.ts:19

restaurants isn't initialized ... initialized it to

 public restaurants: {
  value: Restaurant[];
  isPending: boolean;
 } = {value: [], isPending: false};

[x] I'm unable to set a debugger before that line and see what's up .. some debugging tips are probably needed.

[x] Shorten the title. Maybe "Use Restaurant API data"?

Thur March 28th

Currently this page:

Teaches people how to inject a service
Gives them a test to verify RestaurantComponent is using the service and expresses the state of the request as {value, isPending} (which uses the generic Data<T>).
Has them update restaurant.component.ts to work accordingly.
Then tells them to:
1. update restaurant.component.html to use the new {value, isPending} structure
2. update restaurant.component.spec.ts

I see two main opportunities for improvement:

[x] The exercise doesn't have a visualizable solution because the .html file isn't updated until later.
[x] This adds the {value, isPending} format, but doesn't really introduce it.

I see two solutions:

Single Exercise - (easy for us) - Give people the final .html. Explain how the .restaurants property should look ({value, isPending}). Give people the Data<T> interface. Give people the final .test. Let them figure everything else out.

Double Exercise - (harder for us) - Split into two exercises. The first works with the existing .html file. The developers will have to simply write this.restaurants = res.data. The second one has them changing restaurants to the new format ({value, isPending}) and rewriting the .html file. I'd give people a functional test that tests that the data loads from the service AND that a pending state is shown. The first exercise will only make the first test pass, the second one will make the second test pass.

justinbmeyer commented 5 years ago

Creating city & state options for filtering restaurants

[x] src/app/app.module.ts - lets show the whole file
[x] P0 - <option value="" *ngIf="states.isPending">Loading...</option>
RestaurantComponent.html:6 ERROR TypeError: Cannot read property 'isPending' of undefined. I made this work by removing all the <select> element contents.
[x] P0 Given that nothing is produced think this section isn't named right. I think getCities and getStates need to happen here ... or some dummy data needs to be used.

I just added some dummy data.

I also kept this code:

this.restaurantService.getRestaurants().subscribe((res: Config) => {
      this.restaurants.value = res.data;
      this.restaurants.isPending = false;
    });

Thurs, March 28th

[x] FormGroup It would be nice if this example showed why you might use a formGroup? Is it so you can get objects?
[x] To simplify the examples, the routing could probably be removed.
[x] FormArray I think the highlighting is off. It should probably include the construction bit: new FormArray. Also, could this example show adding something to the users FormArray? I assume angular would add a new row.
[x] FormBuilder It would be nice to show doing something with the FormBuilder. I assume it handles when <input>s are added dynamically. Might be cool to have a button that adds a checkbox. Then suddenly the serialized data includes the value of the checkbox.
[x] Here's some code to get you started: src/app/restaurant/restaurant.component.ts Probably need to highlight the import import { FormBuilder, FormGroup } from '@angular/forms';
[x] Here's some code to get you started: src/app/restaurant/restaurant.component.ts Might want to include the createForm() function and the call to it in ngOnInit().

justinbmeyer commented 5 years ago

Listening to Form Value Changes

[x] ~~ There are multiple subscriptions ~~

Thurs, March 28th

[x] If you want to show something that actually would leak, change the observable to keep counting and never complete like:
```
setInterval( ()=> {  console.log("incrementing"); observer.next(++count) })
```
You'd need a button to remove/teardown the component. Comment out the unsubscribe() and they will see that observable keep counting. Tell people to uncomment the unsubscribe() to see it stop.
[x] This example creates a subscription, then adds to it. You might want to show the first subscription being created since it is mentioned.
[ ] Exercise: Write service methods to get states and cities - how to use HttpParams: - Example does not work.
[x] How to write a generic Provide a description of what this example shows / what one should learn from it.
[x] How to write a generic This is broken. I don't think it's valid typescript.
[ ] We need to remove a few tests that are no longer relevant to our app's current state .. is there any test actually verifying the behavior? My tests still pass after this change.

justinbmeyer commented 5 years ago

Filtering Cities and Restaurants

[x] P0 - I worked on this a bit. Made it so 1/2 way it just pulls data w/o making it filter values. I highlighted the changes.
[x] Config<T> I think this should be Response or ResponseData
[x] In the Updating Component to add new service methods section, getRestaurants() is never called.

I updated this so it works. I kept it showing restaurants the whole time. When cities restaurants are changed to require filtering, I made it so it shows those for "IL" / "Chicago"

[x] this.restaurantService.getRestaurants("IL","Chicago").subscribe((res: ResponseData) => {

_Wednesday

[x] Link to HttpParams

[x] Exercise: Update getRestaurants method to take state and city params link to set('filter[address.state]', state) in previous pages.
[x] people change both the test and the service. Maybe pick one as there's nothing visual for someone to know they did it right.
[x] Filtering Cities & Restaurants this title doesn't completely filter. It's only changing the service layer.

justinbmeyer commented 5 years ago

Nested Restaurant Routes

[x] P0 import { ReactiveFormsModule } from '@angular/forms'; not imported

At the Creating a route for restaurant/{{restaurant-slug}} header, the app wasn't working because getUrl wasn't implemented (but was in the view). I added this earlier. However, restaurant.images.banner and other restaurant properties are used in the view. This prevents seeing something from working.

I suggest making a mock restaurant when first creating the restaurant. Or remove using this data from the initial detail.component.html file. Ideally the apps should work at the end of each section.

[x] - P0 shows .css instead of .less
[x] - localhost:4200/restaurants/crab-place might not exist.. the names are randomly generated. We can change the API to make this work.

[x] Titles should be consistent
[x] is ngOnInit explained previously? What about angular lifecycles?

justinbmeyer commented 5 years ago

Building the order form

[x] Importing 3rd Party Plugins - src/app/order/app.module.ts imports menu-items/menu-items.component but it's not generated.

[ ] p0 adding the items selected does not work

[ ] Show (click)="onClickMe()" taking an argument
[ ] Extra markup for <pmo-menu-items></<pmo-menu-items>
[ ] show how to import event emitter

[x] Create New Route for Ordering probably needs Exercise: to be consistent
[x] P0 On this step: In your new order component, edit the src/order/order.component.html file to be: I see the following error: . I think this is because RestaurantDetailComponent does not exist. I think it should still be DetailComponent. I fixed this everywhere.
[x] Extra space in the following (in several templates) ((I fixed 2 of them))
```
   </ng-template>
</div>
```
[x] In your new order component, edit ... I think there should be some title before this. This comes at the end of an exercise. This seems to be the start of a new one.
[x] src/app/order/order.component.ts introduce what this file is doing.
[x] P1 after updating src/app/order/order.component.ts with val.forEach((item: any) => {, if you uncheck a checkbox, you get the following error:
[x] P1 - OrderComponent should create test is breaking at this step.
[x] P0 - Adding <pmo-menu-items></pmo-menu-items> is shown twice, but without passing the values.
[x] P2 - Exercise: Emitting data to parent components's src/app/order/menu-items.component.ts has no highlighting.
[x] Why is onChanges commented out? It would be nice to see the changes at this point.
[x] Control Value Accessor part doesn't have a heading.
[ ] I don't see where the amount should be updated?

justinbmeyer commented 5 years ago

Order History Component

[x] P0 - uses css instead of .less
[x] It would be very good if you could see the component before it was finished. Do the routing first so you can see something.
[ ] Should you be able to change the status of the order?

justinbmeyer commented 5 years ago

Real Time Connection

[x] P0 - uses css instead of .less
[x] P0 - changes its name from HistoryComponent to OrderHistoryComponent and the selector too.

justinbmeyer commented 5 years ago

Writing Unit Tests

[ ] Write a test for new RestaurantService method & Write the new method We should give people the method. Lets keep people doing one thing at once.
[ ] How could people have the mock data?

justinbmeyer commented 5 years ago

Order Service

[ ] Exercise: Export Items and Order interfaces - There's not a verifiable solution.

tehfedaykin commented 5 years ago

Angular Training Kansas City Retro

In 4 hours was able to get through city & state options at an aggressive pace(~10 min per exercise). Pace was too accelerated for most attendees. Attendees with more backend experience struggled with front-end form parts of the content, like dropdowns.

No issues with any of the code samples or spec files, except for one spec file that was collapsed and didn't show a needed import at the top.

2nd half of content was missing a few code examples before requiring knowledge in an exercise.

12-16 hours would be more appropriate for entirety of Angular content.

Angular Training moving Forward:

finish implementing github list of issues
add link to completed app in github repo
create "Bonus" sections of content to take solutions further(using CVA, using RxJS, etc)
charge $100 per attendee/day
offer 5 days of training - JS, DOM, TypeScript, RxJS, Angular for attendees to choose a la cart
create Landing Page for training with letter for employer support
ask attendees for tech leads emails for outreach on training offers

bitovi / academy

Angular: Rough Notes #27

Meta

Angular

Why Angular

Building our first app

Creating Components

Adding Routing

Creating Navigation

Writing a Restaurant Service

Use Restaurant API data

Creating city & state options for filtering restaurants

Listening to Form Value Changes

Filtering Cities and Restaurants

Nested Restaurant Routes

Building the order form

Order History Component

Real Time Connection

Writing Unit Tests

Order Service

Angular Training Kansas City Retro

Angular Training moving Forward: