Lessons in this chapter:
Clicks: {{ count() }}
`, }) export class App { count = signal(0); add() { this.count.update((value) => value + 1); } } ``` The Angular version never touches the page directly. It only changes `count`. The screen follows the data.Welcome back, Asha.
} @else if (view() === 'Courses') {You are learning Angular.
} @else {Asha, member since 2024.
} `, }) export class App { view = signal('Home'); } ``` Real apps use the Angular **router** for this. The router also changes the address in the browser bar. You will learn it in a later chapter. | Point | Traditional website | Single Page Application | |---|---|---| | Page loads | A new page for every click | One page, loaded once | | Speed after the first load | Slower, because each page is downloaded | Faster, because only data is downloaded | | Screen during a change | Goes blank for a moment | Changes smoothly | | Examples | Many news and blog sites | Gmail, Google Maps, online dashboards | ## Angular Ecosystem Overview The Angular ecosystem is the set of tools and libraries that work with Angular. - **Angular CLI.** Creates, runs, tests and builds your app from the command line. - **Angular Router.** Moves between pages inside an SPA. - **Angular Forms.** Builds forms and checks the values a user types. - **HttpClient.** Talks to a server to get or save data. - **Angular Material.** Ready-made buttons, menus, tables and dialogs that follow Google's Material Design. - **Angular DevTools.** A browser add-on that shows your components and their data while the app runs. - **RxJS.** A library for handling data that arrives over time, such as server responses. - **Angular SSR.** Builds the first page on the server, so the page appears faster and search engines can read it. You do not need all of these on day one. This course adds them one at a time. ## Installing Node.js Angular tools run on **Node.js**. Node.js runs JavaScript outside the browser, on your own computer. Node.js also installs **npm**, the tool that downloads packages such as Angular. ### Step 1: Download Node.js Go to [nodejs.org](https://nodejs.org) and download the **LTS** version. LTS means Long Term Support. It is the stable version that most people should use. Angular 22 needs Node.js 22.22.3 or newer, or Node.js 24.15.0 or newer. The current LTS version works. ### Step 2: Install it Run the installer and accept the default options. ### Step 3: Check the installation Open a terminal. On Windows, use Command Prompt or PowerShell. On a Mac, use Terminal. Then type: ```bash node -v npm -v ``` Each command prints a version number. Your numbers may be newer. ```text v24.15.0 11.6.2 ``` If you see `command not found` or `is not recognized`, close the terminal, open a new one and try again. A new terminal reads the updated settings. ## Installing Angular CLI The Angular CLI is a command-line tool. CLI stands for Command Line Interface. You type `ng` commands, and the CLI does the work. Install it once, for your whole computer: ```bash npm install -g @angular/cli ``` The `-g` option means "global". It makes the `ng` command available in every folder. Check that it works: ```bash ng version ``` The command prints the Angular CLI version, your Node.js version and your operating system. On Windows, PowerShell may block the `ng` command with a message about "running scripts is disabled". Run this command once in PowerShell to allow it: `Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned`. You can also use Command Prompt instead. ## Creating an Angular Application Go to the folder where you keep your projects. Then run: ```bash ng new my-first-app ``` The CLI asks a few questions, such as which stylesheet format to use. For now, press **Enter** to accept each default. The CLI then does three things: 1. It creates a folder called `my-first-app`. 2. It writes all the starter files into that folder. 3. It downloads every package the app needs. This can take a minute or two. If you want the defaults without any questions, add `--defaults`: ```bash ng new my-first-app --defaults ``` ## Understanding Project Structure Open the `my-first-app` folder in your code editor. These are the files that `ng new` creates. ```text my-first-app/ ├── public/ │ └── favicon.ico ├── src/ │ ├── app/ │ │ ├── app.ts │ │ ├── app.html │ │ ├── app.css │ │ ├── app.spec.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── angular.json ├── package.json ├── tsconfig.json ├── tsconfig.app.json └── tsconfig.spec.json ``` ### The Files You Will Edit Most | File | What it holds | |---|---| | `src/app/app.ts` | The main component class | | `src/app/app.html` | The main component's template (its HTML) | | `src/app/app.css` | Styles for the main component only | | `src/app/app.routes.ts` | The list of pages for the router | | `src/app/app.config.ts` | App-wide settings, such as the router | | `src/styles.css` | Styles for the whole app | ### The Files That Start the App | File | What it does | |---|---| | `src/index.html` | The single HTML page of the SPA. It contains the `The app started.
`, }) export class App { title = signal('my-first-app'); } bootstrapApplication(App) .catch((err) => console.error(err)); ``` ### Useful CLI Commands | Command | What it does | |---|---| | `ng new my-app` | Creates a new project | | `ng serve` | Runs the app at `http://localhost:4200` | | `ng serve --open` | Runs the app and opens the browser | | `ng generate component header` | Creates a new component | | `ng build` | Builds the final files for a real server | | `ng test` | Runs the tests | ## Common Mistakes