ultimatecourses.com
Ultimateangular - профессиональная площадка по обучению разработчиков Angular, имея в своем составе именитых разработчиков самого angular.
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Angular Basics (v18),
а также все другие курсы, прямо сейчас!
Премиум
-
Урок 1. 00:12:53The Missing Introduction to Angular
-
Урок 2. 00:14:02Component Architecture, State and One-Way Data Flow
-
Урок 3. 00:06:26Project Setup and Walkthrough
-
Урок 4. 00:07:13Understand Angular Bootstrapping
-
Урок 5. 00:07:00Interpolation and Expressions
-
Урок 6. 00:07:38Property Binding Syntax
-
Урок 7. 00:11:22Event Binding Syntax
-
Урок 8. 00:05:18Template Ref Variables
-
Урок 9. 00:06:55Create a Child Feature Module
-
Урок 10. 00:05:13Create a Smart Container Component
-
Урок 11. 00:08:29Use the NgOnInit Lifecycle Hook
-
Урок 12. 00:06:01Type Definitions with Interfaces
-
Урок 13. 00:06:19Create and Render a Dumb Component
-
Урок 14. 00:06:34Pass State to Dumb Components via @Input
-
Урок 15. 00:11:00Scoped Styles in Components
-
Урок 16. 00:04:53Style a Host Element
-
Урок 17. 00:05:29View Encapsulation: Shadow DOM and Emulated
-
Урок 18. 00:06:30Set Inline Styles with Style Bindings
-
Урок 19. 00:06:20Complex Inline Styles with NgStyle
-
Урок 20. 00:04:56Set Classes with Class Bindings
-
Урок 21. 00:05:17Complex Classes with NgClass
-
Урок 22. 00:05:01Use a Pipe to Format Currency
-
Урок 23. 00:05:30Use NgIf for Conditional Rendering
-
Урок 24. 00:02:38Use <ng-container> for Virtual Elements
-
Урок 25. 00:04:34Use the NgIf, Else and Then Syntax
-
Урок 26. 00:05:45NgIf Syntax with <ng-template>
-
Урок 27. 00:05:19NgFor and Iterating Collections
-
Урок 28. 00:04:38Improve NgFor Performance with TrackBy
-
Урок 29. 00:04:37Access NgFor Index, Odd and Even Variables
-
Урок 30. 00:04:47Advanced NgFor Syntax with <ng-template>
-
Урок 31. 00:08:37Use NgSwitch for Case Rendering
-
Урок 32. 00:03:36Advanced NgSwitch Syntax with <ng-template>
-
Урок 33. 00:07:36Create a Form Container and Dumb Component
-
Урок 34. 00:03:44Use NgForm with a Template Ref Variable
-
Урок 35. 00:05:03<input> Binding with NgModel
-
Урок 36. 00:07:54Radio Button Binding with NgModel
-
Урок 37. 00:07:16<select> and <option> Rendering and Binding
-
Урок 38. 00:01:35Textarea Binding with NgModel
-
Урок 39. 00:05:48Add Validation Constraints and Form Status
-
Урок 40. 00:07:12NgModel Template Refs and Validation States
-
Урок 41. 00:07:39Show Error Messages on Validation Change
-
Урок 42. 00:04:31Style Invalid Input Fields Globally
-
Урок 43. 00:06:57Form Submit with NgSubmit
-
Урок 44. 00:02:32Disable Submit and Safety Check Submissions
-
Урок 45. 00:07:46Trigger Validation Messages On Submit
-
Урок 46. 00:04:08Control NgModel Writes with ngModelOptions
-
Урок 47. 00:03:55Trigger a Form State and Validation Reset
-
Урок 48. 00:03:01Show Visual Feedback on Form Submission
-
Урок 49. 00:08:08Emit Form Payload to Smart Container via @Output
-
Урок 50. 00:10:37One-Way Data Binding to NgModel
-
Урок 51. 00:03:58Create an @Injectable Service
-
Урок 52. 00:07:40Share State in Components via Services
-
Урок 53. 00:05:41Class Methods as State Selectors
-
Урок 54. 00:07:17Immutable State Creation
-
Урок 55. 00:12:02Immutable State Updates
-
Урок 56. 00:05:13Immutable State Deletions
-
Урок 57. 00:04:58Configure and Proxy a Local HTTP Server
-
Урок 58. 00:09:46Read Data with HttpClient GET
-
Урок 59. 00:10:38Store State with Observable Pipes
-
Урок 60. 00:07:38Branch off an Observable to Access State
-
Урок 61. 00:07:19Create Data with HttpClient POST
-
Урок 62. 00:09:14Update Data with HttpClient PUT
-
Урок 63. 00:05:40Delete Data with HttpClient DELETE
-
Урок 64. 00:11:11Error Handling with catchError() and throwError()
-
Урок 65. 00:02:47Retry Failed Requests with retry()
-
Урок 66. 00:04:58Use retryWhen() to Delay Retries
-
Урок 67. 00:07:36Set HttpHeaders and RequestOptions
-
Урок 68. 00:08:40Root Module Routes with forRoot()
-
Урок 69. 00:02:59Create Nested Child Routes
-
Урок 70. 00:04:03Redirect Routes to New Paths
-
Урок 71. 00:02:41Handle 404 Not Found Routes with Wildcards
-
Урок 72. 00:07:49Lazy-Loading Feature Modules
-
Урок 73. 00:06:15Declarative Navigation with routerLink Directives
-
Урок 74. 00:06:48Dynamic Route Params and ActivatedRoute
-
Урок 75. 00:08:15Pass Custom Data to Routed Components
-
Урок 76. 00:05:21Programmatic Navigation with Router.navigate()
-
Урок 77. 00:07:20The Idea Behind Standalone Angular
-
Урок 78. 00:05:36Bootstrap a Standalone Component instead of NgModule
-
Урок 79. 00:05:59Providing a Route Config via importProvidersFrom
-
Урок 80. 00:03:50Import NgModules into Standalone Components
-
Урок 81. 00:04:33Lazy-Load Component-Less Route Configs
-
Урок 82. 00:10:15Providing Standalone Directives, Components and Pipes
-
Урок 83. 00:04:34Code Split and Lazy-Load at the Component Level
-
Урок 84. 00:03:45Scoped or Component-Level Providers and “providedIn”
https://ultimatecourses.com/learn/angular-basics
Is Todd that fucked up?)
https://ultimatecourses.com/learn/angular-pro
https://ultimatecourses.com/learn/angular-pro
proxy.conf.json
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"logLevel": "debug"
}
}
but what is more importantly, read the manual
https://angular.io/guide/build#proxying-to-a-backend-server
or
https://stackoverflow.com/a/71764796/1521866
basically, you need to add "proxyConfig": "proxy.conf.json" line into "development" section and re-run your server. then the route would be available at localhost:4200/api/donuts
Install the cuncurrently library:
npm i concurrently
and after the line:
"db": "json-server --watch db.json --delay 1000",
paste another one:
"concurrently": "concurrently --kill-others \"npm run db\" \"npm run start\""
now, open your terminal and type npm run concurrenlty It should run json-server and then your server.
ngOnInit(): void {
this.donut = {}; //TODO: DELETE THE EMPTY OBJECT ONCE IT'S USELESS!
}
it's basically, for testing purpose. Instead of creating an empty object with specified fields (empty fields). it works my way as good as shown in the video.
A better approach would be to create a new Service:
ng g s admin/services/utils --skip-tests
Then we add a function creating a Random ID (taken from Stockoverflow):
makeid(length: number) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
let counter = 0;
while (counter < length) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
counter += 1;
}
return result;
}
In our DonutService we inject our UntilsService
constructor(private utilsService: UtilsService) { }
and finally, we add a generated id to our object we place into a new array:
create(donut: Donut): void {
const id = this.utilsService.makeid(6)
this.donuts = [...this.donuts, {id, ...donut}];
}
As for the readOne method. I wonder if I can write like this:
readOne(donutId: string): Donut {
const foundElement = this.donuts.find(d => d.id === donutId)
return foundElement ? foundElement : {};
}
{}; will print an empty object. But if you assign it to a real one - it won't complain. I've already checked it out.
handleSubmit(form: NgForm) {
if (form.invalid) form.form.markAllAsTouched();
this.create.emit(form.value);
form.resetForm();
}
The code does exactly the same, but it's written clearer.
I'm just curious if this has been updated by the author.
Thanks.
https://ultimatecourses.com/learn/angular-pro
could please update this code, it is updated to "Angular Basics (v15)" .
Thank you