Angular Introduction

• Has a component-based structure
  • Ease of reuse
  • Ability of modularity
• Allows you to create a Single Page Applications
• Uses TypeScript which uses strong typing.
  • Benefits of typescript
    • Simplicity
    • Angular Source code (Pattern of writing code)

Components in Angular

• A component in Angular is used to render a portion of HTML and provide functionality to that portion. It does it from a component class in which the programmer can define the application logic of the component.

Directives

• Directives provide functionality and can transform the DOM.
  • Types of directives
    • Structural
      • Modify layout by altering the elements in the DOM
    • Attribute
      • Change the behavior or appearance of a existing DOM element
• How to apply a directive?
  • Writing an attribute on an element
    • <div selectorName>
    • <div [selectorName = “true]
• Directives in Angular
  • ngIf
  • ngFor
  • routerLink

Pipes

• A pipe takes in data, like a string or an array and runs some logic to transform it to a new output.
• Common pipes
  • Date
  • Uppercase
  • Lowercase
• Pipes are a great way to change the data in a reusable way.

Data Binding

• Interpolation
  • Interpolation is the most common way of displaying data in view template where a set of curly braces around a component property to tell angular to render the content of that property.

Dependency Injection

• Allows the ability to write decoupled code
  • This means that modules do not depend on each other to work
• In essence, you can create these modular component and services and simply tell angular what and where you want to use them.
  • It will handle making instances of those components and services and send the code where it is needed.

Services and other Business Logic in Angular

• A JavaScript fie of function that is written to contain some sort of logic can be considered as a service of an application.
• They are just plain old JavaScript logic code.
• The framework is designed to any JavaScript code.
  • This allows the programmer to write modular & decoupled code.

Data Persistence

• In-Memory Data Store
  • If the data only needs to exist for the time period that the user uses the program for
  • How to do so?
    • Create a JavaScript object to store the data
    • Provide it to the app
    • Do constructor injection wherever needed.
• Data Stored in Browser/Local storage
  • The programmer would need to write their own JavaScript service code and leveraging angular’s dependency injection to work with the application
• Data Store service using an API
  • Using the http protocol
  • JSONP
    • Make get and post calls

Routing

• You want to handle the URL requests in the client, adjusting the UI and displaying the data accordingly.
• It provides a way to load different components through a set of configuration instructions and links

Decorator

• An expression that evaluates to a function allowing annotation of classes at design time
• @DecoratorName()
• ngModel      à Syntax: [(ngModel)] = “anyName”
  • Angular will store anything that will be entered into anyName.