Angular - amitbhilagude/userfullinks GitHub Wiki

Component

1. Split the entire page with different Units that can render and operate independently. E.g. Web Page will have Header, Footer, Left Pane, and Body and all can have different components. In a Typical Vanilla script model like Javascript and Jquery, you typically have Script and HTML tags separately however components will have Html and script.
2. To render that component into Html it needs to have a tag defined which is called a Selector. Angular Module
3. Angular Application will have nested components and it builds as a component Tree. It has a default main component called Root components and all components will be considered as child components. Similarly, each component can have nested components like the body that will have some units.
4. Angular Evaluate {{ }} value within HTML. This expression can have members of components, arithmetic, or call method. More important is Function will get called if any member gets changed in a {{}}.
5. *ngFor will be used for repeating the DOM element. *ngIf is used to render DOM if the condition becomes true. The difference between *ngIf and style display none is first will never create DOM element and second will have HTML but it is hidden. IF you need to have index in *ngFor then you can apend index as i.
6. Input will be passed to the component similar like attribute e.g. . This will be set into component class using @input member name: type. This value will be set only after components are initialized so it will be empty if you try to use it in the constructor. You can set this in the ngonInit method. It is recommended to pass an object here instead of passing each property. You can set this in the constructor however it is best practice to keep the constructor lightweight and do such initialization in ngoninit method only.
7. Angular has different page hooks life cycle. E.g. OnInit or OnInit changes. Details are in angular documents. These get called at different flows.

Setup Dev Environment

1. Node JS: Running Javascript locally, Setup dev environment. It will also have npm installed to fetch npm package
2. VS Code: IDE
3. Angular CLI: Command npm install @angular/cli. All commands of cli start with ng. e.g ng -v

Folder Structure

1. Creating a new project in Angular will have a different folder structure.
2. Src: Where all code is written
   1. Components created under will have four files.
      1. HTML: To render html
      2. Typescript: Business logic
      3. CSS: Stylesheet
      4. spec.ts: Unit testing
   2. Each component has @componet and Class
      1. Class
         1. Properties and Methods components
      2. Decorator
         1. @components
            1. Selector: Name used for registering component in html
            2. Viewhtml
            3. StyleUrls : An array can have multiple style files paths or an inline css array. Limited to components
3. ng_modules: Where all dependencies are installed
4. e2e: Used for an end to end testing
   1. Option is to use the protracter which is built using Selenium web driver. More details are here. https://medium.com/swlh/angular-end-to-end-testing-with-protractor-55897de591be
5. Package.json: It has all dependencies. Angular dependencies are started with @angular and angular version will be available there.Run a project: command for running a project is ng serve. This will create an http server and host your angular application into that. It will create a URL for you to test that application.
6. Index.html: Start up file

Handling Events

1. In Javascript Event handling is done using attributes e.g. Button has OnClick event which will have javascript function to execute. In Angular, It uses a special syntax call (Click). The method will be defined within a component class. e.g <button (click)="MethodName"> . () Syntax indicates that data flow from View to Component and [] indicates that data flow component to view.

Two-way Data binding

1. Two-way data binding is very rarely used in Angule so this functionality is not part of the Angular core module. It will require the import of Form modules in directives. It will expose ng-model which will be used in format [(ng-model)] indicates data flow in both directions. [()] Syntax is called Banana in the Box.

Modules

1. Modules are similar to namespaces in c#. Each module will have multiple components. Modules are exported which will be used by any other modules. The module will be created as syntax modulename.module.ts. The module can be generated using ng cli command similar to the component command. It is best practice to define multiple modules in complex scenarios. Import will do on top is typescript import to find that component. The import we do within @ngmodule is Angular import.
2. modulename.modules.ts has a module declaration. It has three main declarations @ngmodule annotations.
   1. Import: Import existing modules if modulename.modules.ts going to use this component
   2. Declarations: List of components created by modulename.modules.ts
   3. Export modulename.modules.ts so that it can be used by any other module with Import.
   4. Providers: List of Services. Service never part of any module but it needs to be defined to the closest module.
   5. Bootstrap

Annotations:

1. Annotations are defined by Angular to identify the type of declaration. Most common Annotations are
   1. @component: For defining component
   2. @ng-module: For defining module
   3. @injectable: For defining services

Service:

1. Service can be defined if there no view involved. E.g. Calling backend API requires implementation which will be created in Service. If there is a View required then creating a component is a choice.
2. Service is defined as part of Module using Providers. Service will have methods that can be called by components. To Import service in a component, it uses the dependency injection concept.
3. Dependency injection is similar to.net core where let Angular creates an object for service provides it in the constructor. It is passed as a constructor argument and Angular handover that object. e.g. Constructor(svc: serviceName). where svc is an object created for service.
4. Providers in @ng-module is used for defining services however it doesn't matter which component is going to use it as Service always defined in a shared container and can be used by any modules however best practice here to choose the closest modules and use providers to define service

HTTP Client

1. Angular has an HTTPClient module to call async Rest API. It uses Observable and subscribes to receive an async response. This is similar to deferred and promise in Angular JS.
2. You can inject this module into Service and call HTTPClient methods e.g. Get. It will return an object which can be called observable and it exposes the subscribe method which will be executed when we receive an async response. Subscribe method will have an input argument to capture the response and function to be executed. e.g. getDashboards(): Observable< Dashboards > { } method in the service and this.dashboardService.getDashboards().subscribe(loadedDashboards => { } is called.