-
Урок 1.
00:12:53
The Missing Introduction to Angular
-
Урок 2.
00:14:02
Component Architecture, State and One-Way Data Flow
-
Урок 3.
00:06:26
Project Setup and Walkthrough
-
Урок 4.
00:07:13
Understand Angular Bootstrapping
-
Урок 5.
00:07:00
Interpolation and Expressions
-
Урок 6.
00:07:38
Property Binding Syntax
-
Урок 7.
00:11:22
Event Binding Syntax
-
Урок 8.
00:05:18
Template Ref Variables
-
Урок 9.
00:06:55
Create a Child Feature Module
-
Урок 10.
00:05:13
Create a Smart Container Component
-
Урок 11.
00:08:29
Use the NgOnInit Lifecycle Hook
-
Урок 12.
00:06:01
Type Definitions with Interfaces
-
Урок 13.
00:06:19
Create and Render a Dumb Component
-
Урок 14.
00:06:34
Pass State to Dumb Components via @Input
-
Урок 15.
00:11:00
Scoped Styles in Components
-
Урок 16.
00:04:53
Style a Host Element
-
Урок 17.
00:05:29
View Encapsulation: Shadow DOM and Emulated
-
Урок 18.
00:06:30
Set Inline Styles with Style Bindings
-
Урок 19.
00:06:20
Complex Inline Styles with NgStyle
-
Урок 20.
00:04:56
Set Classes with Class Bindings
-
Урок 21.
00:05:17
Complex Classes with NgClass
-
Урок 22.
00:05:01
Use a Pipe to Format Currency
-
Урок 23.
00:05:30
Use NgIf for Conditional Rendering
-
Урок 24.
00:02:38
Use <ng-container> for Virtual Elements
-
Урок 25.
00:04:34
Use the NgIf, Else and Then Syntax
-
Урок 26.
00:05:45
NgIf Syntax with <ng-template>
-
Урок 27.
00:05:19
NgFor and Iterating Collections
-
Урок 28.
00:04:38
Improve NgFor Performance with TrackBy
-
Урок 29.
00:04:37
Access NgFor Index, Odd and Even Variables
-
Урок 30.
00:04:47
Advanced NgFor Syntax with <ng-template>
-
Урок 31.
00:08:37
Use NgSwitch for Case Rendering
-
Урок 32.
00:03:36
Advanced NgSwitch Syntax with <ng-template>
-
Урок 33.
00:07:36
Create a Form Container and Dumb Component
-
Урок 34.
00:03:44
Use NgForm with a Template Ref Variable
-
Урок 35.
00:05:03
<input> Binding with NgModel
-
Урок 36.
00:07:54
Radio Button Binding with NgModel
-
Урок 37.
00:07:16
<select> and <option> Rendering and Binding
-
Урок 38.
00:01:35
Textarea Binding with NgModel
-
Урок 39.
00:05:48
Add Validation Constraints and Form Status
-
Урок 40.
00:07:12
NgModel Template Refs and Validation States
-
Урок 41.
00:07:39
Show Error Messages on Validation Change
-
Урок 42.
00:04:31
Style Invalid Input Fields Globally
-
Урок 43.
00:06:57
Form Submit with NgSubmit
-
Урок 44.
00:02:32
Disable Submit and Safety Check Submissions
-
Урок 45.
00:07:46
Trigger Validation Messages On Submit
-
Урок 46.
00:04:08
Control NgModel Writes with ngModelOptions
-
Урок 47.
00:03:55
Trigger a Form State and Validation Reset
-
Урок 48.
00:03:01
Show Visual Feedback on Form Submission
-
Урок 49.
00:08:08
Emit Form Payload to Smart Container via @Output
-
Урок 50.
00:10:37
One-Way Data Binding to NgModel
-
Урок 51.
00:03:58
Create an @Injectable Service
-
Урок 52.
00:07:40
Share State in Components via Services
-
Урок 53.
00:05:41
Class Methods as State Selectors
-
Урок 54.
00:07:17
Immutable State Creation
-
Урок 55.
00:12:02
Immutable State Updates
-
Урок 56.
00:05:13
Immutable State Deletions
-
Урок 57.
00:04:58
Configure and Proxy a Local HTTP Server
-
Урок 58.
00:09:46
Read Data with HttpClient GET
-
Урок 59.
00:10:38
Store State with Observable Pipes
-
Урок 60.
00:07:38
Branch off an Observable to Access State
-
Урок 61.
00:07:19
Create Data with HttpClient POST
-
Урок 62.
00:09:14
Update Data with HttpClient PUT
-
Урок 63.
00:05:40
Delete Data with HttpClient DELETE
-
Урок 64.
00:11:11
Error Handling with catchError() and throwError()
-
Урок 65.
00:02:47
Retry Failed Requests with retry()
-
Урок 66.
00:04:58
Use retryWhen() to Delay Retries
-
Урок 67.
00:07:36
Set HttpHeaders and RequestOptions
-
Урок 68.
00:08:40
Root Module Routes with forRoot()
-
Урок 69.
00:02:59
Create Nested Child Routes
-
Урок 70.
00:04:03
Redirect Routes to New Paths
-
Урок 71.
00:02:41
Handle 404 Not Found Routes with Wildcards
-
Урок 72.
00:07:49
Lazy-Loading Feature Modules
-
Урок 73.
00:06:15
Declarative Navigation with routerLink Directives
-
Урок 74.
00:06:48
Dynamic Route Params and ActivatedRoute
-
Урок 75.
00:08:15
Pass Custom Data to Routed Components
-
Урок 76.
00:05:21
Programmatic Navigation with Router.navigate()
-
Урок 77.
00:07:20
The Idea Behind Standalone Angular
-
Урок 78.
00:05:36
Bootstrap a Standalone Component instead of NgModule
-
Урок 79.
00:05:59
Providing a Route Config via importProvidersFrom
-
Урок 80.
00:03:50
Import NgModules into Standalone Components
-
Урок 81.
00:04:33
Lazy-Load Component-Less Route Configs
-
Урок 82.
00:10:15
Providing Standalone Directives, Components and Pipes
-
Урок 83.
00:04:34
Code Split and Lazy-Load at the Component Level
-
Урок 84.
00:03:45
Scoped or Component-Level Providers and “providedIn”
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