Angular is a JavaScript framework for building dynamic applications in the browser. Applications are written in TypeScript and organized around a data model, components, and templates. A component prepares data; its template describes the HTML to display; bindings connect the two. section 1.15 section 2.10 section 10.2
Angular is particularly suited to applications that do substantial work after the first page loads. Initial setup has a cost: Angular processes the HTML, evaluates bindings, and runs application building blocks in the browser. Complex pages or less capable devices can make that startup noticeable. Favor it when that work can support an application used without frequent full-page reloads. section 1.1
A practical development path is:
- Create a project with Angular’s project tool, then run its development server to compile the application and test it at http://localhost:4200. section 2.10 section 2.2.2
- Start with the data model, then add components and templates. Use data bindings to display values and event bindings to respond to user actions. section 9.7 section 2.10
- Keep the server running while editing: the tools rebuild changed files and reload the client. Use the optimized build when preparing for deployment. section 9.7
Listing 2.6. Starting the Angular development tools
ng serve
Run this command in the project folder to start the compiler and local test server. section 2.2.2
Displaying model data
A product component can calculate a count and a price total from its model. A template displays those values with expressions such as {{ count }} and {{ message }}. Angular evaluates the bindings, reads the component values, and creates the HTML elements shown by the browser. section 10.2
The same application structure extends to forms, HTTP requests, URL routing, component libraries, and unit tests. For example, a form can bind inputs to a new product and add it to a model on submission. Angular Material can style content; Jasmine and Angular’s testing classes can test components and directives. These are additions to the core model–component–template pattern, not requirements for the first application. section 14.1 section 1.4.3 section 29.6 section 2.10
