# 1. Create Angular (v.19+) projects
this video is in italian
You can easily create an Angular project by running this command in your terminal.
terminal
It downloads and runs the latest Angular CLI version.
You should have installed NodeJS > v.18.19.1
@angular/cli is the Angular Command-Line Interface (aka CLI), and @latest suggests that the command should use the most recent stable version of the package.You can also download and run a specific version. For example, we have used Angular v.19.0.0 to create this tutorial, so you can be sure to use the same version running this:
terminal
In summary, this command uses
npx to run the latest version of Angular CLI to create a new Angular project named angular-demo, with inline styles, inline templates, and skipping the creation of tests.npxis a command-line utility that comes with npm (Node Package Manager) and it's used to execute packages that are not globally installed in your system.-p @angular/cli: the-poption is used with npx command to specify the package to be executed.ng new [PROJECT_NAME]:ng newis a command from the Angular CLI that creates a new Angular workspace with an initial skeleton application-s -t -S: these are flags used to customize how the Angular project is set up:-s: used to generate components that use inline CSS (instead of an external.cssfile. We'll talk about CSS in the next chapter)-t: the HTML template will be included in the TypeScript file, as an inline string, instead of a separated.htmlfile.-S: avoid to generate test files
What is Node Version Manager (NVM)?
I never install NodeJS from the official website but I usually use NVM.
NVM (linux - Window ) allows developers to easily switch between different Node.js versions, ensuring compatibility across various projects and dependencies.
It simplifies Node version management, eliminating the need for manual uninstalls and reinstalls, which saves time and prevents version conflicts.
When can be it useful?
For example you may need to use Node v.12 to run an old Angular project and Node v.20 to build the latest project that use NextJS project.
After starting the installation process you will first be asked which CSS format to use between CSS, Sass and Less.
Select
CSS.
Anyway feel free to select Sass or Less in your future projects.
Then you will be asked whether to use client side rendering or server side rendering.
Select
Client Side:
Client vs Server Side Rendering
SSR (Server-Side Rendering) generates HTML on the server, sending a fully-rendered page to the client. This results in faster initial load times and better SEO, as search engines can index content more easily.
This can be especially useful for public websites such as landing pages, e-commerce and so on...
CSR (Client-Side Rendering) relies on JavaScript to build the HTML in the browser. The initial load might be slower, but subsequent interactions are faster and more dynamic. CSR is common in single-page applications (SPAs), providing a smoother user experience after the initial load.
# 2. The Project
- angular-demo/
- node_modules/
- src/
.editorconfig- .gitignore
angular.json- package.json
- package-lock.json
- tsconfig.json
- tsconfig.app.json
- tsconfig.spec.json
README.md
When you create a new Angular project with the CLI (
ng new project-name) using the parameters I have described in the previous recipe, several files and directories are generated in the root of your project.Here's a breakdown of the key files and their purposes:
angular.json: defines project settings, build options, file paths, and more.package.json: lists thenpmpackages required for your project and scripts for running, building, and testing your applicationpackage-lock.json: ensures that the same versions of dependencies are installed every time the project is set up, providing consistency across different environments.tsconfig.json: specifies the root files and compiler options required to compile the project. Helps TypeScript understand how to compile the code.tsconfig.app.json: extends tsconfig.json with settings specific to the app's source files, excluding tests.tsconfig.spec.json: extends tsconfig.json with settings specific to unit tests, ensuring they are compiled correctly..editorconfig: helps maintain consistent coding styles across different editors and IDEs..gitignore: ensures that specific files and folders (likenode_modules) are not tracked by version controlREADME.md: contains information about your project, such as how to run, build, and test the application.src/: The main directory where all your application code resides.node_modules/: contains all the installed npm packages and it's populated when you runnpm installand includes all dependencies listed in thepackage.json
angular.json
The
angular.json file defines project settings, build options, file paths, and more.
It also helps manage configurations for different environments and build targets.But that’s not all. Remember when we used the
-t -s -S options at the beginning of the chapter?
These choices are saved in this file and you can change them at any time
angular.json
# 3. Components
A component is a fundamental building block of an Angular application.
In short, it manages a portion of the layout and its logic.
A component combines HTML, CSS, and TypeScript to define a piece of the user interface.
Components make development efficient by promoting reusability, maintainability, and modularity, allowing developers to build complex User Interfaces (UI).
# app-root component
The
app-root component is the main, or root, component of an Angular application. It acts as the entry point for the application, where the initial rendering and bootstrap process begins.- src/
app.component.ts
When you create a new Angular project using the Angular CLI, the
app-root component is generated by default, serving as the parent container for the entire application.- The
@Componentdecorator is applied on theAppComponentclass and it configures the component with the required properties, that are called metadata selector: 'app-root', which means this component can be utilised in HTML using the<app-root></app-root>tag.
<Practice>
Change the
Hello Angular text to display I love Angular instead. Try it in the playground below.
Switch between "Editor | Preview | Both" using the tabbar in the footerClick or in the editor to practice
src/app.component.ts
# Other source files
When you create an Angular project using Angular CLI, other two files are created and located close to
app.component.ts:- src/
- app.component.ts
app.config.ts- app.routes.ts
app.routes.ts and app.config.ts are two important configuration files typically found in the /src directory. They play crucial roles in setting up the application's routing and configuration:app.routes.tsis used to define the routing configuration for the Angular application. Routing allows you to navigate between different views or components based on the URL.app.config.tsis used to centralize configuration settings for the Angular application. This can include settings for services, environment variables, or other global configurations.
We'll talk about these topics in the next chapters
Angular CLI vs StackBlitz
In real projects you will use Angular CLI or tool like NX to generate a new project but in the next lessons we will use a code playground instead, Stackblitz , which allows us to have an online editor and experiment without the need to create a new project each time.
You can therefore decide to study and try directly from this site or create a project and work on it in parallel.
In any case, if you use StackBlitz we suggest you create an account so you can save (fork) all the exercises in your StackBlitz profile
