You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`.
20
+
Angular creates, updates, and destroys components as the user moves through the application. Your application can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`.
21
21
22
22
## Component metadata
23
23
@@ -35,7 +35,7 @@ Here's an example of basic metadata for `HeroListComponent`.
35
35
36
36
This example shows some of the most useful `@Component` configuration options:
37
37
38
-
*`selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains `<app-hero-list></app-hero-list>`, then
38
+
*`selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an application's HTML contains `<app-hero-list></app-hero-list>`, then
39
39
Angular inserts an instance of the `HeroListComponent` view between those tags.
40
40
41
41
*`templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*.
@@ -59,7 +59,7 @@ A view hierarchy can include views from components in the same NgModule, but it
59
59
60
60
## Template syntax
61
61
62
-
A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use *data binding* to coordinate the app and DOM data, *pipes* to transform data before it is displayed, and *directives* to apply app logic to what gets displayed.
62
+
A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your application's logic and the state of application and DOM data. Your template can use *data binding* to coordinate the application and DOM data, *pipes* to transform data before it is displayed, and *directives* to apply application logic to what gets displayed.
63
63
64
64
For example, here is a template for the Tutorial's `HeroListComponent`.
Copy file name to clipboardExpand all lines: aio/content/guide/architecture-modules.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
# Introduction to modules
2
2
3
-
Angular apps are modular and Angular has its own modularity system called *NgModules*.
3
+
Angular applications are modular and Angular has its own modularity system called *NgModules*.
4
4
NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
5
5
6
-
Every Angular app has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. You launch your app by *bootstrapping* the root NgModule.
6
+
Every Angular application has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. You launch your application by *bootstrapping* the root NgModule.
7
7
8
-
While a small application might have only one NgModule, most apps have many more *feature modules*. The *root* NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.
8
+
While a small application might have only one NgModule, most applications have many more *feature modules*. The *root* NgModule for an application is so named because it can include child NgModules in a hierarchy of any depth.
9
9
10
10
## NgModule metadata
11
11
@@ -17,9 +17,9 @@ An NgModule is defined by a class decorated with `@NgModule()`. The `@NgModule()
17
17
18
18
*`imports`: Other modules whose exported classes are needed by component templates declared in *this* NgModule.
19
19
20
-
*`providers`: Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level.)
20
+
*`providers`: Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the application. (You can also specify providers at the component level.)
21
21
22
-
*`bootstrap`: The main application view, called the *root component*, which hosts all other app views. Only the *root NgModule* should set the `bootstrap` property.
22
+
*`bootstrap`: The main application view, called the *root component*, which hosts all other application views. Only the *root NgModule* should set the `bootstrap` property.
23
23
24
24
Here's a simple root NgModule definition.
25
25
@@ -53,13 +53,13 @@ When you create a component, it's associated directly with a single view, called
53
53
54
54
<divclass="alert is-helpful">
55
55
56
-
**Note:** The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.
56
+
**Note:** The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and application data.
57
57
58
58
</div>
59
59
60
60
## NgModules and JavaScript modules
61
61
62
-
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are *complementary* module systems that you can use together to write your apps.
62
+
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are *complementary* module systems that you can use together to write your applications.
63
63
64
64
In JavaScript each *file* is a module and all objects defined in the file belong to that module.
65
65
The module declares some objects to be public by marking them with the `export` key word.
Copy file name to clipboardExpand all lines: aio/content/guide/architecture-next-steps.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,15 +15,15 @@ about the features and tools that can help you develop and deliver Angular appli
15
15
16
16
* The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
17
17
18
-
* 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.
18
+
* 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 application.
19
19
20
20
* 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.
21
21
22
22
## Responsive programming
23
23
24
24
The [template syntax](guide/template-syntax) 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.
25
25
26
-
Additional pages and sections describe some basic programming techniques for Angular apps.
26
+
Additional pages and sections describe some basic programming techniques for Angular applications.
27
27
28
28
*[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.
29
29
@@ -38,13 +38,13 @@ without deep knowledge of animation techniques or CSS.
38
38
39
39
## Client-server interaction
40
40
41
-
Angular provides a framework for single-page apps, where most of the logic and data resides on the client.
42
-
Most apps still need to access a server using the `HttpClient` to access and save data.
41
+
Angular provides a framework for single-page applications, where most of the logic and data resides on the client.
42
+
Most applications still need to access a server using the `HttpClient` to access and save data.
43
43
For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.
44
44
45
45
*[HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
46
46
47
-
*[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.
47
+
*[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 application 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.
48
48
49
49
*[Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
50
50
@@ -60,23 +60,23 @@ For some platforms and applications, you might also want to use the PWA (Progres
60
60
61
61
*[Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
62
62
63
-
*[Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
63
+
*[Security guidelines](guide/security): Learn about Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks.
64
64
65
-
*[Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools.
65
+
*[Internationalization](guide/i18n): Make your application available in multiple languages with Angular's internationalization (i18n) tools.
66
66
67
-
*[Accessibility](guide/accessibility): Make your app accessible to all users.
67
+
*[Accessibility](guide/accessibility): Make your application accessible to all users.
68
68
69
69
## File structure, configuration, and dependencies
70
70
71
71
*[Workspace and file structure](guide/file-structure): Understand the structure of Angular workspace and project folders.
72
72
73
73
*[Building and serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
74
74
75
-
*[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.
75
+
*[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 using 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.
76
76
77
77
*[TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
78
78
79
-
*[Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers.
79
+
*[Browser support](guide/browser-support): Make your applications compatible across a wide range of browsers.
Copy file name to clipboardExpand all lines: aio/content/guide/architecture-services.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Introduction to services and dependency injection
2
2
3
-
*Service* is a broad category encompassing any value, function, or feature that an app needs.
3
+
*Service* is a broad category encompassing any value, function, or feature that an application needs.
4
4
A service is typically a class with a narrow, well-defined purpose.
5
5
It should do something specific and do it well.
6
6
@@ -17,7 +17,7 @@ A component can delegate certain tasks to services, such as fetching data from t
17
17
validating user input, or logging directly to the console.
18
18
By defining such processing tasks in an *injectable service class*, you make those tasks
19
19
available to any component.
20
-
You can also make your app more adaptable by injecting different providers of the same kind of service,
20
+
You can also make your application more adaptable by injecting different providers of the same kind of service,
21
21
as appropriate in different circumstances.
22
22
23
23
Angular doesn't *enforce* these principles. Angular does help you *follow* these principles
@@ -50,7 +50,7 @@ Similarly, use the `@Injectable()` decorator to indicate that a component or oth
50
50
51
51
* A *provider* is an object that tells an injector how to obtain or create a dependency.
52
52
53
-
For any dependency that you need in your app, you must register a provider with the app's injector,
53
+
For any dependency that you need in your app, you must register a provider with the application's injector,
54
54
so that the injector can use the provider to create new instances.
55
55
For a service, the provider is typically the service class itself.
56
56
@@ -93,7 +93,7 @@ or in the `@NgModule()` or `@Component()` metadata
93
93
When you provide the service at the root level, Angular creates a single, shared instance of `HeroService`
94
94
and injects it into any class that asks for it.
95
95
Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app
96
-
by removing the service from the compiled app if it isn't used, a process known as *tree-shaking*.
96
+
by removing the service from the compiled application if it isn't used, a process known as *tree-shaking*.
97
97
98
98
* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule()` decorator.
0 commit comments