Please enable JavaScript.
Coggle requires JavaScript to display documents.
[Course] Angular & NodeJS - Coggle Diagram
[Course] Angular & NodeJS
Section 1:Gettign Started
Introduction
What is MEAN
M - MongoDB
E - Express and ExpressJS
A nodeJS framework which simplifies writing Server Side Code and Logic
Simplifies the Usage of Node
A - Angular (Client side technology), Render a nice dynamic UI
N - NodeJS
Join our Online Learning Community
What is a Single Page Application (SPA)
Allow for instant re-rendering, instant user feedback and makes building highly engaging UIs possible
How does the means Stack Work?
Angular CLI - Latest Version
Installing Node & Angular CLI
Download NodeJS from nodejs.org
Angular CLI (Command Line Interface)
npm install -g
angular/cli
ng new mean-course
NPM (Node Package Manger) install the CLI tool
Install Our IDE (Visual Studio)
Install Extension (View > Extension)
i. Angular Essentials (Essential extensions for Angular developers)
ii. Material Icon Theme
Exploring the Project Structure
i. package.json (see all dependencies)
ii. tsconfig.json (typescript compilation)
iii. Angular.json file (Angular CLI)
iv. node_modules (store all the dependencies, available to the project)
v. src (our Angular appication lives in)
vi.
ng serve
(run the project)
app.compoent.ts => create
Component
object , selector, templateUrl, styleUrls
import { Component } from
angular/core
Course Outline
Get the most out of this course
Section 2: Angular Frontend-Understanding the basics
Module Introduction
i. Client (Browser)
Understanding the folder structure
i. ctrl U view page source
ii. loaded the index.html file actually
iii.
component
from angular/ core
iv. where is this swapping logic defined?
v. where do we tell the browser that is our own tag?
vi.
app.module.ts { important file}
: defines the features our angular application has
vii. application are split up in
modules
or in this case in one module and that module defines the
building block of our application
NgModule
: declarations {component} ,
bootstrap
{
define one root component
}
main.ts
, this is executed first
platformBrowserDynamic().bootstrapModule(AppModule)
Tell angular start your angular applicatoin and start it with this module in mind
( 程式進入點, 載入模組後啟動)
declarations : registers these components which are declared
imports : import some other modules because there are some modules Angular ships with like the browser modules which contain some core features of the angular framework
https://www.geeksforgeeks.org/what-is-the-difference-between-declarations-providers-and-import-in-ngmodule/
Understanding Angular Components
i. compose an entire page of these components (small, easily to maintain, manage building blocks for your UI }
ii. include <app-header>, <app-brand>, <app-feature>
iii. <app-nav-item> = identify some navigation items in the header
iv. <app-nav-search>
v. <app-feature-image>, <app-feature-text>
Adding our First Component
i. create sub folder to group the related files , e.g. post-create
ii. Add the declaration into app.module.ts for registration {app-code-create is not a known element:}
ii. the tag would be effective
Listening to Events
i. Introduce button's client event {How would the browser know what we want to do when we click save post?
<button (click)="onAddPost()"> Save Post </button>
ii. Event binding is an angular feature which allows us to listen to events in a declarative way.
iii. the onAddPost method should be declared in post-create.component.ts as the triggering method during press button
Outputting Content
i. String interpolation
{{ title }}
ii. property binding : always used directly on the elements for outputting data in our template
Getting User Input
i. one feature called local reference
add marker, a variable to any html element we want, e.g #postInput
onAddPost (postInput: HTMLTextAreaElement)
console.dir() : display an interactive list of the properties of the specifed javascript object
ii. Two-way data binding
[(ngModel)]: ngModel is angular feature, so called directive. A directive is basically an instruction you place on an html element and angular or you can also create your own one so that the relative know what to do on the element then.
ngModel is a directive that actually listen to user input and emit the data to us and also store new data in the text area
iii. ngModel is included in the so-called forms module because it's related to froms input
(@angular
/form)
Installing Angular Material
https://material.angular.io/components/categories
npm install --save
angular/material
package.json would show after installation
@ angular/material
@ angular/cdk
Import BrowserModule, BrowserAnimationsModule
some of component uses animations
Import MatInputModule:
download angular material to version 8
npm install --save
angular/material@8
--save-exact
<mat-form-field>
<textarea matInput rows="6"[(ngModule)]="enteredValue"> </textarea>
</mat-form-field>
MatCardModule: card is looking as container
MatButtonModule
Adding a Toolbar
i. MatToolBarModule
ii. Declarations:
Declarations are used to declare components, directives, pipes that belongs to current module
Everything inside declarations knows each other.
Declarations are used to make directives (including components and pipes) from the current module available to other directives in the current module.
Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
Outputting Posts
i. MatExpansionModule
ii. :host { } :
https://developer.mozilla.org/en-US/docs/Web/CSS/:host(
)
:host {
display: block;
margin-top: 1rem;
}
Diving into structural directives
i. *ngFor , the casing and the start is important (用迴圈將陣列裡的資料一筆一筆取出)
a helper tools that allow to repeat that element as often as required
*ngFor = "let post of posts">
ii. *ngIf, 依判斷選擇是否生成DOM
iii. *ngClass, 依判斷選擇是否套用class
Creating Post with Property & Event Binding
i. EventEmitter
ii.
Input
輸入資料
input from @ Angular/Core
將資料傳遞至子層
<app-todo-items [items]="todoItems"> </app-todo-items>
Input()
items: TodoItem[]
iii.
Output
This turn this into an event to which you can listen to from the outside and from the outside means in the parent component, so in the component where you are using the selector . There, you are use event binding to listen to the post created
<app-post-created (postCreated) ="onPostAdded ($event)"></app-post-created>
Creating a Post Model
i. An interface is like a class that defines how an object look like but it can't be instantiated, it's more like a contract, we can use it to create our own type, to force a certain object to look like this \, name post
Adding Forms
i. easily register inputs as controls of which it will keep track of, where it will then store the values of these control
ii. when we can easily add validation to and submit the form and use the value of the form
ii. NgForm
iii. easy to add validation
required
minlenght="3"
iv. check the form input and form would reject if true
v. templates
this is form handling with help of angular forms
Getting Posts from Post-Create to Post-List
i. Service:
is a class which you add to your angular application, let you inject into components
which is able to centralize some tasks and provide easy access to data from within different component without property and event binding
e.g post.service.ts
ii. Reference type is a type where if you copy it you don't really copy it, the object in memory will stay the same, you just copy the address, so the pointer pointing at that object.
iii. Spread
for making a true copy of the post, I would use a typescript and next gen javascript feature call the spread
[...this.post]
Calling Get Post
More about observables
Working on our Form