CS计算机代考程序代写 Components

Components
23
main.ts
• This is the starting point of the application
• AngularexportsafunctionnamedplatformBrowserDynamicthatcan be used for targeting the browser. This comes from the platform browser dynamic scope package
• ThereturnedobjecthasabootstrapModulefunctionthatrunsthe bootstrap. This function is expecting a root module, in this case a module called AppModule.
24

app.module.ts
@NgModule Decorator
• Recall that a decorator is an expression that evaluates to a function allowing annotation of classes
• They allow us to configure/modify code like classes method and fields at design time
• AdecoratorcalledNgModuleisusedtoinformAngularthattheclass code in here is intended to be an Angular module, it uses a decorator.
• AngularimportstheNgModuledefinitionfromitscorepackage.
25
app.module.ts
• The imports property is used to bring in other Angular modules that your module will need.
• The declarations property is used to make components, directives, and pipes available to other modules.
• The bootstrap property is used for a root module and lets Angular know which component or components will be the entry point for your app code.
26

app.module.ts
Browser
• We want to make use of the browser module that the Angular platform has available in the platform-browser scope package.
• Contains directives, pipes, and other tools for working with the DOM
• The module is imported and added to the list of imports for our application

27
app.module.ts
The Bootstrap
• Finally, we need a starting point for our application
• It is in a file called app.component.ts and is imported via
• app.component must be used in the starting code for the app, it’s the root component
28

app.component.ts
@Component Decorator
• Angularusesthe@Component()decoratorthatallowsustospecifya class as an Angular component
• It provides additional metadata that determines how the component should be rendered
29
app.component.ts
• app.component.ts is found inside the app directory.
• To build an Angular component, we need to use the component
decorator on a class which comes from the core scope package
• To decorate / define a component, you need to provide at least two properties: selector and template (or template URL).
• The component decorator takes in an object literal.
30

The Component’s Selector
• Bydefault,therootcomponenthastheselectorapp-root • You can change it but must use at least one dash
• In index.html:
31
The Component’s Template
Template and Styles
• The are two ways to create a template for a component:
• Usingatemplateproperty OR
• UsingatemplateURLpropertyandcreatingatemplatefile(ie. app.component.html’)
• This will resolve relative paths
• Similarly, there are two ways to style
• Usingthestylesproperty OR
• UsingstyleURLsandcreatinganexternalCSSfile(s)
• ThestylesURLspropertytakesinanarrayofCSSfiles
• It will automatically be injected into the tag at load
time
• The style is automatically scoped to the component you’re currently writing
32

Nested Components
Using components inside other components
• To create a subcomponent, we need to:
1. Use the CLI to generate (or just add the files yourself)
$ ng generate component
this generates a folder that contains Html, Css, Spec (testing) files, Component info (.component.ts)
2. In the root (bootstrap) component, import and declare subcomponent
3. Add selector to parent components and use properties to pass variables (optional)
33
Angular Templates
Syntax and Features
• In a template, we can the following things: • Interpolation and Binding
• Expressions and Expression operators • Conditionals
• Template variables
34

Data Interacting with templates
Interpolation and Expressions
• Interpolation means binding data to a template
• Data binding is the basis of Angular, binding data to templates means to
make data available to a particular template
• Data can bind to templates in three ways:
• {{ }} expressions
• By using attributes or methods in the exported component class • Property binding (i.e. [textContent] = “variable”)
35
Component Inputs
@Input decorator
• To pass data from one level component to the next, we must do the following things:
1. Import the Input decorator from the @angular/core scoped package
2. use the @Input decorator to indicate this to the subcomponent
36

Component Inputs
@Input decorator
• To pass data from one level component to the next, we must do the following things:
3. Set a property with an existing variable in the parent component in the selector tag

4. Use the data in the subcomponent’s HTML file
37