{
  "id": "guide/architecture-next-steps",
  "title": "Next steps: tools and techniques",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/architecture-next-steps.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n  <h1 id=\"next-steps-tools-and-techniques\">Next steps: tools and techniques<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#next-steps-tools-and-techniques\"><i class=\"material-icons\">link</i></a></h1>\n<p>After you understand the basic Angular building blocks, you can learn more\nabout the features and tools that can help you develop and deliver Angular applications.</p>\n<ul>\n<li>\n<p>Work through the <a href=\"tutorial\">Tour of Heroes</a> tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.</p>\n</li>\n<li>\n<p>Check out the <a href=\"guide/glossary\">Glossary</a> to understand Angular-specific terms and usage.</p>\n</li>\n<li>\n<p>Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.</p>\n</li>\n</ul>\n<h2 id=\"application-architecture\">Application architecture<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#application-architecture\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p>The <strong>Main Concepts</strong> section located in the table of contents contains several topics that explain how to connect the application data in your <a href=\"guide/glossary#component\">components</a> to your page-display <a href=\"guide/glossary#template\">templates</a>, to create a complete interactive application.</p>\n</li>\n<li>\n<p>The <a href=\"guide/ngmodules\">NgModules</a> guide provides in-depth information on the modular structure of an Angular application.</p>\n</li>\n<li>\n<p>The <a href=\"guide/router\">Routing and navigation</a> guide provides in-depth information on how to construct applications that allow a user to navigate to different <a href=\"guide/glossary#view\">views</a> within your single-page app.</p>\n</li>\n<li>\n<p>The <a href=\"guide/dependency-injection\">Dependency injection</a> guide provides in-depth information on how to construct an application such that each component class can acquire the services and objects it needs to perform its function.</p>\n</li>\n</ul>\n<h2 id=\"responsive-programming\">Responsive programming<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#responsive-programming\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"guide/template-syntax\">template syntax</a> and related topics contain details about how to display your component data when and where you want it within a view, and how to collect input from users that you can respond to.</p>\n<p>Additional pages and sections describe some basic programming techniques for Angular apps.</p>\n<ul>\n<li>\n<p><a href=\"guide/lifecycle-hooks\">Lifecycle hooks</a>: Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.</p>\n</li>\n<li>\n<p><a href=\"guide/observables\">Observables and event processing</a>: How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.</p>\n</li>\n<li>\n<p><a href=\"guide/elements\">Angular elements</a>: How to package components as <em>custom elements</em> using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.</p>\n</li>\n<li>\n<p><a href=\"guide/forms-overview\">Forms</a>: Support complex data entry scenarios with HTML-based input validation.</p>\n</li>\n<li>\n<p><a href=\"guide/animations\">Animations</a>: Use Angular's animation library to animate component behavior\nwithout deep knowledge of animation techniques or CSS.</p>\n</li>\n</ul>\n<h2 id=\"client-server-interaction\">Client-server interaction<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#client-server-interaction\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular provides a framework for single-page apps, where most of the logic and data resides on the client.\nMost apps still need to access a server using the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> to access and save data.\nFor some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.</p>\n<ul>\n<li>\n<p><a href=\"guide/http\">HTTP</a>: Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.</p>\n</li>\n<li>\n<p><a href=\"guide/universal\">Server-side rendering</a>: Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.</p>\n</li>\n<li>\n<p><a href=\"guide/service-worker-intro\">Service workers and PWA</a>: Use a service worker to reduce dependency on the network and significantly improve the user experience.</p>\n</li>\n<li>\n<p><a href=\"guide/web-worker\">Web workers</a>: Learn how to run CPU-intensive computations in a background thread.</p>\n</li>\n</ul>\n<h2 id=\"support-for-the-development-cycle\">Support for the development cycle<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#support-for-the-development-cycle\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p><a href=\"cli\">CLI Command Reference</a>: The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.</p>\n</li>\n<li>\n<p><a href=\"guide/aot-compiler\">Compilation</a>: Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.</p>\n</li>\n<li>\n<p><a href=\"guide/testing\">Testing platform</a>: Run unit tests on your application parts as they interact with the Angular framework.</p>\n</li>\n<li>\n<p><a href=\"guide/deployment\">Deployment</a>: Learn techniques for deploying your Angular application to a remote server.</p>\n</li>\n<li>\n<p><a href=\"guide/security\">Security guidelines</a>: Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.</p>\n</li>\n<li>\n<p><a href=\"guide/i18n\">Internationalization</a>: Make your app available in multiple languages with Angular's internationalization (i18n) tools.</p>\n</li>\n<li>\n<p><a href=\"guide/accessibility\">Accessibility</a>: Make your app accessible to all users.</p>\n</li>\n</ul>\n<h2 id=\"file-structure-configuration-and-dependencies\">File structure, configuration, and dependencies<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#file-structure-configuration-and-dependencies\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p><a href=\"guide/file-structure\">Workspace and file structure</a>: Understand the structure of Angular workspace and project folders.</p>\n</li>\n<li>\n<p><a href=\"guide/build\">Building and serving</a>: Learn to define different build and proxy server configurations for your project, such as development, staging, and production.</p>\n</li>\n<li>\n<p><a href=\"guide/npm-packages\">npm packages</a>: The Angular Framework, Angular CLI, and components used by Angular applications are packaged as <a href=\"https://docs.npmjs.com/\">npm</a> packages and distributed via the npm registry. The Angular CLI creates a default <code>package.json</code> file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.</p>\n</li>\n<li>\n<p><a href=\"guide/typescript-configuration\">TypeScript configuration</a>: TypeScript is the primary language for Angular application development.</p>\n</li>\n<li>\n<p><a href=\"guide/browser-support\">Browser support</a>: Make your apps compatible across a wide range of browsers.</p>\n</li>\n</ul>\n<h2 id=\"extending-angular\">Extending Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture-next-steps#extending-angular\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p><a href=\"guide/libraries\">Angular libraries</a>: Learn about using and creating re-usable libraries.</p>\n</li>\n<li>\n<p><a href=\"guide/schematics\">Schematics</a>: Learn about customizing and extending the CLI's generation capabilities.</p>\n</li>\n<li>\n<p><a href=\"guide/cli-builder\">CLI builders</a>: Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.</p>\n</li>\n</ul>\n\n  \n</div>\n\n<!-- links to this doc:\n - guide/architecture\n-->\n<!-- links from this doc:\n - api/common/http/HttpClient\n - cli\n - guide/accessibility\n - guide/animations\n - guide/aot-compiler\n - guide/architecture-next-steps#application-architecture\n - guide/architecture-next-steps#client-server-interaction\n - guide/architecture-next-steps#extending-angular\n - guide/architecture-next-steps#file-structure-configuration-and-dependencies\n - guide/architecture-next-steps#next-steps-tools-and-techniques\n - guide/architecture-next-steps#responsive-programming\n - guide/architecture-next-steps#support-for-the-development-cycle\n - guide/browser-support\n - guide/build\n - guide/cli-builder\n - guide/dependency-injection\n - guide/deployment\n - guide/elements\n - guide/file-structure\n - guide/forms-overview\n - guide/glossary\n - guide/glossary#component\n - guide/glossary#template\n - guide/glossary#view\n - guide/http\n - guide/i18n\n - guide/libraries\n - guide/lifecycle-hooks\n - guide/ngmodules\n - guide/npm-packages\n - guide/observables\n - guide/router\n - guide/schematics\n - guide/security\n - guide/service-worker-intro\n - guide/template-syntax\n - guide/testing\n - guide/typescript-configuration\n - guide/universal\n - guide/web-worker\n - tutorial\n - https://docs.npmjs.com/\n - https://github.com/angular/angular/edit/master/aio/content/guide/architecture-next-steps.md?message=docs%3A%20describe%20your%20change...\n-->"
}