Angular project directory structure

Node_modules Directory for storing third-party dependency packages e2e End-to-end test directory SRC application source code directory for automatic testing. Angular-cli. json Configuration file of the Angular command line tool. Karma is the unit test implementer, karma. Conf. js is the configuration file of karma package.json NPM tool. This file lists the third-party dependencies used by the application. When creating a new project, waiting a long time is downloading third-party dependencies. After downloading, it will be stored in node_modules, and we may modify this file later. Tslint. json is the tsLint configuration file that defines the rules for TypeScript code quality checksCopy the code

SRC directory

The App directory contains the components and modules of your application, and that's where the code that we're going to write is going to be assets, resources, things that store static resources such as image Environments, environment configurations. Angular supports multi-environment development by sharing a single set of code in different environments (development, test, production), which is used to configure the environment's index.html entry. Ts is the entry point for the project. Angular uses this file to start the project. Polyfills. In order for Angular to run properly under older versions of TypeScript, styles.css mainly puts in the global tsconfig.app.json configuration of the TypeScript compiler. Adding third-party dependencies will modify the file tsconfig.spec Test. ts is also the typings.d.ts for automated testsCopy the code

Json, src-app, src-assets, index.html, styles.css

• Package. json defines the project name, project version, and any dependencies needed
• SRC directory App Catalog (key)The app directory is the directory where we will write code. All the code we write is in this directory. Putting our Components, Services, and Modules An Angular application requires at least one module and one component. The command line is generated by default when we create a new project.
  

  

  app.component.tsA component is the basic building block of an Angular application and can be understood as a piece of Html with business logic and data

app.component.ts :

Component-related concepts:

1. Component metadata decorator (@Component)

   Component decorator, for short, tells the Angular framework how to handle a TypeScript class. The Component decorator contains properties with values called metadata that Angular uses to render components and execute their logic

2. Template –> HTML

   We can define the appearance of a component using its own template, which is HTML and tells Angular how to render the component. Templates normally look like HTML, but we can use Angular’s data-binding syntax in templates to render the data in controllers.

3. Controller

   A controller is a normal typescript class that is decorated with @Component. The controller contains all the properties and methods of the Component, and most of the business logic is written inside the controller. The controller communicates with the template through data binding. The template displays controller data and the controller processes events on the template.

Decorators: Templates and controllers are required components. There are also some optional elements, such as:

• Inputs are used to receive incoming data. Angular’s application structure is a component tree. Input attributes allow data to be passed across the component tree
• Providers: This is used for dependency injection
• LifeCycle Hooks: Multiple Hooks are triggered during the creation and destruction of a component, similar to the Activity LifeCycle stylesheets in Android: components can be associated with stylesheets
• Animations: Angular provides an animation package to help you easily create Animations related to components, such as fades in and out
• Outputs attribute (@outputs) : Used to define events that other components might need or to share data between components

The app.module.ts module is similar to AppComponent in that modules need decorators.

Presents the command

// Create a new workspace and initial application
ng new [name]
Copy the code

cd my-app
ng serve --open
The ng serve command starts the development server, monitors the files, and rebuilds the application if those files change.
// The --open (or just -o) option automatically opens your browser and visits http://localhost:4200/
Copy the code

Basic concepts of Anuglar

The module

Associate its components with a set of related code, such as a service

> ng generate module my-module-name
>Ng g m my-module-name
>Run the ng g m my-module-name-routing command to create a routing module
Copy the code

component

> ng g c parent/child- Quickly create a new child component in the parent directory - query the smallest module in the path and add it to the module ng g // create something new Ng g component // Create a new component ng G Component Components /news // Create a new news component. Ng g Component Components // After executing these two commands, see the following figureCopy the code

instruction

Logical functions that contain specific logic and data, without views, and are mostly used for specific template tags

service

You can create service classes for data or logic that is not relevant to a particular view and that you want to share across components. Can be injected into a used build as a dependency injection object

Data binding

Through markup language on the template, data is passed to the corresponding component/directive, and events are returned to the consumer [] property binding () Event binding [()] bidirectional binding

<input [ngModel] ="data" (ngModuleChange) ="myFunc($event)" [(ngModel)] ='data1'>
Copy the code

routing

Provides a service that matches the state view with the URL

Ng g m test1 // Create a module for test1 ng g m test2 --routing // Create a module with routingCopy the code

Common Angular CLI commands

Ng new my-project-name // create a new project ng build // build/compile an application ng test // run unit tests ng e2e // Run end-to-end tests ng serve // Start a small web server to host the application ng --help // to look up a command ng XXX --help // XXX when you don't understand itCopy the code

After creating a new component, import it in the App Module and declare it

import { MessageComponent } from './message/message.component';
@NgModule({
  declarations: [
      MessageComponent
  ]
})
Copy the code