10 Tips I Wish I Knew When I Started Using Angular

By Wassim CHEGHAM | @manekinekko

How To Be Successful With Your Next Angular Projects.

10 Tips I Wish I Knew When I Started Using Angular By Wassim CHEGHAM | @manekinekko How To Be Successful With Your Next Angular Projects. 12

10 tips I wish I knew when I started using Angular | Angular World Tour

By Wassim Chegham

10 tips I wish I knew when I started using Angular | Angular World Tour

« Make it work, make it right, make it fast » - Kent Beck We all know this quote. But we sometimes stop at the first stage, lacking time or prioritization. Onboarding a new developer in a team is the best time to check if your codebase is « scalable and healthy ». We will explain in this talk some feedbacks from many years doing consulting on Angular projects with concrete use-cases: - what are the bad practices to avoid? - what are the opinionated choices of Angular which can help you? Regardless of your team's size or your colleagues' experience, what are the best architectural choices you can do to enhance that?

3 years ago
5,809

Wassim Chegham PRO

Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev

	export const routes: Route[] = [
	{
	path: '',
	redirectTo: '/home',
	pathMatch: 'full'
	},
	{
	path: 'home',
	loadChildren: () => import('../home/home.module')
	.then(e => e.HomeModule)
	},
	{
	path: 'editor',
	loadChildren: () => import('./editor/editor.module')
	.then(e => e.EditorModule)
	},
	{
	path: 'upload',
	loadChildren: () => import('./upload/upload.module')
	.then(e => e.UploadModule)
	},
	{
	path: '**',
	redirectTo: '/home'
	}
	];

	export const routes: Route[] = [
	{
	path: '',
	redirectTo: '/home',
	pathMatch: 'full'
	},
	{
	path: 'home',
	component: HomeComponent
	},
	{
	path: 'editor',
	component: EditorComponent
	},
	{
	path: 'upload',
	component: UploadComponent
	},
	{
	path: '**',
	redirectTo: '/home'
	}
	];

	➜ scripts git:(master) / tree
	.
	├── clean-changelog.js
	├── cloudbuild
	│ ├── deploy.sh
	│ ├── kubectl
	│ │ ├── Dockerfile
	│ │ ├── cloudbuild.yaml
	│ │ ├── kubectl.bash
	│ │ └── publish.sh
	│ ├── ngcontainer
	│ │ ├── Dockerfile
	│ │ ├── cloudbuild.yaml
	│ │ ├── nginx.conf
	│ │ └── publish.sh
	│ └── xlayers.template.yaml
	├── github-create-comment.bash
	├── local-build.sh
	└── stamp-build.bash

	this.entries$ = this.queries$.pipe(
	map((query: string) => query ? query.trim() : ''),
	filter(Boolean),
	debounceTime(500),
	distinctUntilChanged(),
	switchMap((query: string) => this.fetchEntries(query)),
	filterByOwnerType(OwnerType.User)
	);

	this.organizations$ = this.selectedRepository$.pipe(
	map((repository) => repository && repository.owner.organizations_url),
	switchMap((url: string \| false) => {
	return url ? this.fetchUserOrganizations(url) : of(undefined);
	}),
	);

	import { ApiService } from '../../../core/api.service.ts';
	import { CatsService } from '../../../services/cats.service.ts';

	import { ApiService } from '@core/api.service.ts';
	import { CatsService } from '@services/cats.service.ts';

10 Tips I Wish I Knew When I Started Using Angular

How To Be Successful With Your Next Angular Projects.

10 tips I wish I knew when I started using Angular | Angular World Tour

More from Wassim Chegham