Commit d384eb4f authored by Phillip Couto's avatar Phillip Couto 🔨
Browse files

Updated the README with details on content

parent 5266647a
# NgConcepts
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.12.
This is a sample Angular project that was created using `@angular/cli` to demonstrate
the separate Angular concepts in simple form.
## Development server
## Concepts
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
### @angular/cli
## Code scaffolding
The `@angular/cli` is an npm package that gives developers the ability to easily
manage their Angular applications. The CLI leverages the concept of schematics to
automate updating the project code base in a consistent fashion. This even allows
for library creates to create initial boilerplate code in a project for the developer
as well as migrate the codebase if there is depreciated APIs.
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
For concepts listed below there will be examples of `@angular/cli` commands to create
new instances of the concept in an Angular project.
## Build
### Modules
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
Modules are used by Angular as a unit of code that contains code created by the developers
but also references dependencies necessary within that module. Modules are a great
way to isolate functionality as well as shared code so that it provides context
to other developers the type of code that is contained within the module. Modules
are also the only well documented method of code-splitting which allows for portions
of code to be loaded at a later point and reduce the amount of code parsed when a
use visits the application initially.
## Running unit tests
**Example of creating a module:**
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
```bash
ng generate module new-module-name
```
## Running end-to-end tests
### Components
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Components will be the most common concept within an Angular application as they
are used for implementing the user interface and its interactions. Components are
usually created with their own folder and comprise of 3 files, Typescript,
Styles, and HTML. This allows for clear separate of the different concerns for a
component.
## Further help
It is a good rule of thumb to keep components specific to a single purpose.
This way the logic within the component will be simple as well as easier for other
developers to understand.
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
**Example of creating a component:**
```bash
ng generate component new-component-name
```
### Services
Services in Angular applications have many uses in an Angular application. They can
be used for:
- Interface to communicate with backends
- Guards for Router routes
- Facades to simplify public APIs
- Define Business logic to keep components simple
Services are usually referenced by components and other services using Angulars
dependency injection system. This allows for services to be defined as global singletons
that are shared throughout the code base or can have their scope narrowed to limit
the boundaries of how an instance is shared.
**Example of creating a service:**
```bash
ng generate service new-service-name
```
### Pipes
Pipes are used for defining elegant functions that format their inputs into a desired
output. Some common pipes that must developers will use are:
- async
- date
- decimal
- currency
Pipes can also allow for additional parameters that modify how the input is transformed.
Pipes are a create way of taking common conversions and turn them into reusable
elements that are easily referenced in templates as well as code files.
**Example of creating a pipe:**
```bash
ng generate pipe new-pipe-name
```
### Dependency Injection
Dependency Injection has been a main feature of both AngularJS and Angular. This
allows for instances of services to be easily referenced without the developer
having to be concerned on how and when instances are created and distributed. Angular
also handles the order of when depenedencies are initialized to make sure that
services are not initialized before their dependencies.
**Example of using dependency injection:**
```ts
import { SomeService } from '../services/some.service'
class SomeComponent {
constructor(
private someService: SomeService
){ }
onClick() {
this.someService.callAPI();
}
}
```
### Router
Angular comes with a robust router that allows for sophisticated frontend routing
which allows nesting, route guards, resolving dependent data, redirects, and
lazy loading.
There is a great guide from the Angular team that dives into all the main concepts.
[Angular - Router](https://angular.io/guide/router)
### Providers
Providers are part of the dependency injection system which defines where to find
the initializer for a dependency. Providers can also be used for providing values
that can be overrider by applications in a loosly coupled way. This allows for code
to depend on a value from a provider but expoose a way for developers to adjust
the value without altering the code or exposing functionality that modifies state
directly.
There is an example of a custom provider in this repository but there is also documentation
available on [Di Providers](https://angular.io/guide/dependency-injection-providers)
on the Angular website.
### Local and Global State
State is a difficult concept to work with as there are many forms of it as well
as tools to manage it. The two main forms of state that developers interact with
are:
- Local State (Scopped to a single component or small collection of components)
- Global State (Accessible from anywhere)
It is easy to store everything in global state initially but this can be difficult
to manage as you may have data residual in the global state that when a user navigates
to an area of the application the residual data may be presented first before
the global state is updated which may lead to confusion. Local state is better suited
for this as the concept automatically benefits from cleaning up the state when
the components interested in it are no longer present in the tree.
Global state benefits sharing commonly accessed information like session data and
user preferences by allowing easy access to this information from anywhere within
the application without having to pass references as properties to children.
`ngrx` is a well known global and local state project that has packages to implement
both forms of state as well other packages that reduce the boilerplate required
for adding state management to an application.
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment