angular-cn/aio/dist/generated/docs/guide/architecture.json

5 lines
14 KiB
JSON
Raw Permalink Normal View History

{
"id": "guide/architecture",
"title": "Introduction to Angular concepts",
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/architecture.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=\"introduction-to-angular-concepts\">Introduction to Angular concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture#introduction-to-angular-concepts\"><i class=\"material-icons\">link</i></a></h1>\n<p>Angular is a platform and framework for building single-page client applications using HTML and TypeScript.\nAngular is written in TypeScript.\nIt implements core and optional functionality as a set of TypeScript libraries that you import into your apps.</p>\n<p>The architecture of an Angular application relies on certain fundamental concepts.\nThe basic building blocks of the Angular framework are Angular components that are organized into <em>NgModules</em>. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a <em>root module</em> that enables bootstrapping, and typically has many more <em>feature modules</em>.</p>\n<ul>\n<li>\n<p>Components define <em>views</em>, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.</p>\n</li>\n<li>\n<p>Components use <em>services</em>, which provide specific functionality not directly related to views. Service providers can be <em>injected</em> into components as <em>dependencies</em>, making your code modular, reusable, and efficient.</p>\n</li>\n</ul>\n<p>Modules, components and services are classes that use <em>decorators</em>. These decorators mark their type and provide metadata that tells Angular how to use them.</p>\n<ul>\n<li>\n<p>The metadata for a component class associates it with a <em>template</em> that defines a view. A template combines ordinary HTML with Angular <em>directives</em> and <em>binding markup</em> that allow Angular to modify the HTML before rendering it for display.</p>\n</li>\n<li>\n<p>The metadata for a service class provides the information Angular needs to make it available to components through <em>dependency injection (DI)</em>.</p>\n</li>\n</ul>\n<p>An app's components typically define many views, arranged hierarchically. Angular provides the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.</p>\n<div class=\"alert is-helpful\">\n<p> See the <a href=\"guide/glossary\">Angular Glossary</a> for basic definitions of important Angular terms and usage.</p>\n</div>\n<div class=\"alert is-helpful\">\n<p> For the sample app that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"modules\">Modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/architecture#modules\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular <em>NgModules</em> 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.</p>\n<p>Every Angular app has a <em>root module</em>, conventionally named <code>AppModule</code>, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.</p>\n<p>Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></
}