Современные лучшие практики и шаблоны Angular за годы эволюции. Масштабируемая архитектура, неизменяемые структуры данных, сервисы состояния и совершенно новые автономные компоненты. Создайте приложение от начала до конца, быстро оттачивая свои навыки работы с Angular.
В этом курсе вы изучите основы разработки через тестирование при создании простого веб-приложения Angular. Это даст вам уверенность в использовании TDD для сред с большим количеством тестов, таких как разработка корпоративных веб-приложений. Вы точно будете знать, с чего начать, и получите рабочий пример создания целых функций с нуля с использованием TDD.
Спроектируйте, разработайте и разверните свой собственный продукт с нуля в соответствии с текущими промышленными практиками, работая с monrepos. Речь идет не только о создании проекта, но и о понимании концепций, связанных с ним. Он будет постоянно обновляться, когда я сталкиваюсь с новыми методами. Это будет один пит-стоп, когда дело доходит до передовых концепций в веб-разработке.
zerotomastery.io
Изучите Angular у профессионала отрасли. Это единственный курс Angular, который вам нужен, чтобы изучить Angular, создавать приложения корпоративного уровня с нуля и получить работу Angular Developer в 2025 году.
frontendmasters
Узнайте, как использовать возможности Angular для создания мощных реальных приложений с нуля. Мы начнем с Angular CLI, чтобы быстро запустить наше приложение, а затем узнаем о компонентах, шаблонах, маршрутизации, формах и взаимодействии на стороне сервера. По мере создания нашего приложения мы обсудим проверенные методы и шаблоны, которые вы можете сразу же использовать, чтобы начать разработку отличных веб-приложений.
frontendmasters
Angular традиционно ориентирован на работу на стороне клиента, но научиться делегировать работу серверу имеет много преимуществ. Лучший способ научиться - это делать, поэтому мы собираемся создать функциональный сайт, который поможет нам отточить наши навыки бессерверной архитектуры с использованием Angular и Angular Universal (технология Angular SSR). В процессе мы коснемся того, почему этот подход выгоден для стоимости проекта, времени разработ
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