Judy Bogart
Miško Hevery
parent
128d4ac8a9
commit
0e3eeb4e71
|
|
@ -1,55 +1,88 @@
|
|||
# Next steps: tools and techniques
|
||||
|
||||
After you understand the basic Angular building blocks, you can begin to learn more
|
||||
about the features and tools that are available to help you develop and deliver Angular applications.
|
||||
Here are some key features.
|
||||
After you understand the basic Angular building blocks, you can learn more
|
||||
about the features and tools that can help you develop and deliver Angular applications.
|
||||
|
||||
* Work through the [Tour of Heroes](tutorial/index) tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.
|
||||
|
||||
* Check out the [Glossary](guide/glossary) to understand Angular-specific terms and usage.
|
||||
|
||||
* Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.
|
||||
|
||||
## Application architecture
|
||||
|
||||
* The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
|
||||
|
||||
* The [Routing and navigation](guide/router) guide provides in-depth information on how to construct applications that allow a user to navigate to different [views](guide/glossary#view) within your single-page app.
|
||||
|
||||
* The [Dependency injection](guide/dependency-injection) 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.
|
||||
|
||||
## Responsive programming
|
||||
|
||||
The **Components and Templates** guide provides guidance and details of the [template syntax](guide/template-syntax) that you use to display your component data when and where you want it within a view, and to collect input from users that you can respond to.
|
||||
|
||||
Additional pages and sections describe some basic programming techniques for Angular apps.
|
||||
|
||||
* [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.
|
||||
|
||||
* [Observables and event processing](guide/observables): 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.
|
||||
|
||||
## Client-server interaction
|
||||
* [Angular elements](guide/elements): How to package components as *custom elements* using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.
|
||||
|
||||
* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
|
||||
|
||||
* [Server-side Rendering](guide/universal): 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.
|
||||
|
||||
* [Service Workers](guide/service-worker-intro): Use a service worker to reduce dependency on the network
|
||||
significantly improving the user experience.
|
||||
|
||||
## Domain-specific libraries
|
||||
* [Forms](guide/forms-overview): Support complex data entry scenarios with HTML-based input validation.
|
||||
|
||||
* [Animations](guide/animations): Use Angular's animation library to animate component behavior
|
||||
without deep knowledge of animation techniques or CSS.
|
||||
|
||||
* [Forms](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking.
|
||||
## Client-server interaction
|
||||
|
||||
Angular provides a framework for single-page apps, where most of the logic and data resides on the client.
|
||||
Most apps still need to access a server using the `HttpClient` to access and save data.
|
||||
For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.
|
||||
|
||||
* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
|
||||
|
||||
* [Server-side rendering](guide/universal): 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.
|
||||
|
||||
* [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
|
||||
|
||||
* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread.
|
||||
|
||||
## Support for the development cycle
|
||||
|
||||
The **Development Workflow** section describes the tools and processes you use to compile, test, and and deploy Angular applications.
|
||||
|
||||
* [CLI Command Reference](cli): 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.
|
||||
|
||||
* [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.
|
||||
|
||||
* [Testing platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework.
|
||||
|
||||
* [Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools.
|
||||
* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
|
||||
|
||||
* [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
|
||||
|
||||
## Setup, build, and deployment configuration
|
||||
* [Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools.
|
||||
|
||||
* [CLI Command Reference](cli): 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.
|
||||
* [Accessibility](guide/accessibility): Make your app accessible to all users.
|
||||
|
||||
* [Workspace and File Structure](guide/file-structure): Understand the structure of Angular workspace and project folders.
|
||||
|
||||
* [npm Packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
|
||||
## File structure, configuration, and dependencies
|
||||
|
||||
* [Workspace and file structure](guide/file-structure): Understand the structure of Angular workspace and project folders.
|
||||
|
||||
* [Building and serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
|
||||
|
||||
* [npm packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
|
||||
|
||||
* [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
|
||||
|
||||
* [Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers.
|
||||
|
||||
* [Building and Serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
|
||||
## Extending Angular
|
||||
|
||||
* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
|
||||
* [Angular libraries](guide/libraries): Learn about using and creating re-usable libraries.
|
||||
|
||||
* [Schematics](guide/schematics): Learn about customizing and extending the CLI's generation capabilities.
|
||||
|
||||
* [CLI builders](guide/cli-builder): Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
# Architecture overview
|
||||
# Introduction to Angular concepts
|
||||
|
||||
Angular is a platform and framework for building client applications in HTML and TypeScript.
|
||||
Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
|
||||
Angular is a platform and framework for building single-page client applications in HTML and TypeScript.
|
||||
Angular is written in TypeScript.
|
||||
It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
|
||||
|
||||
The basic building blocks of an Angular application are *NgModules*, which provide a compilation context for *components*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
|
||||
The architecture of an Angular application relies on certain fundamental concepts.
|
||||
The basic building blocks are *NgModules*, which provide a compilation context for *components*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
|
||||
|
||||
* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
|
||||
|
||||
|
|
@ -17,6 +19,12 @@ Both components and services are simply classes, with *decorators* that mark the
|
|||
|
||||
An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.
|
||||
|
||||
<div class="alert is-helpful>
|
||||
|
||||
See the [Angular Glossary](guide/glossary) for basic definitions of important Angular terms and usage.
|
||||
|
||||
</div>
|
||||
|
||||
## Modules
|
||||
|
||||
Angular *NgModules* differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<h1 class="no-toc">Introduction to the Angular Docs</h1>
|
||||
|
||||
Angular is an app-design framework and development platform for creating efficient and sophisticated single-page apps.
|
||||
|
||||
|
||||
These Angular docs help you learn and use the Angular platform and framework, from your first app to optimizing complex enterprise apps.
|
||||
Tutorials and guides include downloadable example to accelerate your projects.
|
||||
These Angular docs help you learn and use the Angular framework and development platform, from your first app to optimizing complex single-page apps for enterprises.
|
||||
Tutorials and guides include downloadable examples to accelerate your projects.
|
||||
|
||||
|
||||
<div class="card-container">
|
||||
<a href="start" class="docs-card" title="Angular Getting Started">
|
||||
<section>Learn</section>
|
||||
<p>Create your first Angular app, without any setup</p>
|
||||
<p>Play with and extend a small ready-made Angular app, without any setup</p>
|
||||
<p class="card-footer">Getting Started</p>
|
||||
</a>
|
||||
<a href="guide/setup-local" class="docs-card"
|
||||
|
|
@ -18,10 +18,10 @@ Tutorials and guides include downloadable example to accelerate your projects.
|
|||
<p>Set up your local environment with the Angular CLI</p>
|
||||
<p class="card-footer">Local Setup</p>
|
||||
</a>
|
||||
<a href="guide/architecture" class="docs-card" title="Angular Architecture">
|
||||
<a href="guide/architecture" class="docs-card" title="Angular App Architecture">
|
||||
<section>Explore</section>
|
||||
<p>Learn more about Angular apps and framework features</p>
|
||||
<p class="card-footer">Architecture</p>
|
||||
<p>Learn about the fundamental design concepts and architecture of Angular apps</p>
|
||||
<p class="card-footer">Introduction to Angular concepts</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,4 +49,3 @@ for information about submission guidelines.
|
|||
|
||||
Our community values respectful, supportive communication.
|
||||
Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct").
|
||||
|
||||
|
|
|
|||
|
|
@ -97,6 +97,37 @@
|
|||
"title": "Fundamentals",
|
||||
"tooltip": "The fundamentals of Angular",
|
||||
"children": [
|
||||
{
|
||||
"title": "Angular Concepts",
|
||||
"tooltip": "Introduction to basic concepts for Angular applications.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/architecture",
|
||||
"title": "Intro to Basic Concepts",
|
||||
"tooltip": "Basic building blocks of Angular applications."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-modules",
|
||||
"title": "Intro to Modules",
|
||||
"tooltip": "About NgModules."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-components",
|
||||
"title": "Intro to Components",
|
||||
"tooltip": "About Components, Templates, and Views."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-services",
|
||||
"title": "Intro to Services and DI",
|
||||
"tooltip": "About services and dependency injection."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-next-steps",
|
||||
"title": "Next Steps",
|
||||
"tooltip": "Beyond the basics."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Tour of Heroes App",
|
||||
"tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.",
|
||||
|
|
@ -143,37 +174,6 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Architecture",
|
||||
"tooltip": "The basic building blocks of Angular applications.",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/architecture",
|
||||
"title": "Architecture Overview",
|
||||
"tooltip": "Basic building blocks of Angular applications."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-modules",
|
||||
"title": "Intro to Modules",
|
||||
"tooltip": "About NgModules."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-components",
|
||||
"title": "Intro to Components",
|
||||
"tooltip": "About Components, Templates, and Views."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-services",
|
||||
"title": "Intro to Services and DI",
|
||||
"tooltip": "About services and dependency injection."
|
||||
},
|
||||
{
|
||||
"url": "guide/architecture-next-steps",
|
||||
"title": "Next Steps",
|
||||
"tooltip": "Beyond the basics."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Components & Templates",
|
||||
"tooltip": "Building dynamic views with data binding",
|
||||
|
|
@ -297,11 +297,6 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "guide/bootstrapping",
|
||||
"title": "Bootstrapping",
|
||||
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
|
||||
},
|
||||
{
|
||||
"title": "NgModules",
|
||||
"tooltip": "NgModules.",
|
||||
|
|
@ -316,6 +311,11 @@
|
|||
"title": "JS Modules vs NgModules",
|
||||
"tooltip": "Differentiate between JavaScript modules and NgModules."
|
||||
},
|
||||
{
|
||||
"url": "guide/bootstrapping",
|
||||
"title": "App Root NgModule",
|
||||
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
|
||||
},
|
||||
{
|
||||
"url": "guide/frequent-ngmodules",
|
||||
"title": "Frequently Used NgModules",
|
||||
|
|
|
|||
Loading…
Reference in New Issue