Mastery Angular - App Setting up and experimentation documentation

00-nc308-Mastery-Angular.md

Angular Material

Installing

# Easy nice way
ng add @angular/material

# ...
yarn add @angular/material @angular/cdk @angular/animations --save
```bash

### Experimenting

#### 190225 #

* --@mastery Angular Material 
* --@a Have created 4-5 HTML tags that are relevant and got well positionned and formatted by Angular material

##### What will be the result ?
* --@feature a toolbar with button
* --@feature ...

###### LOG

* https://medium.com/letsboot/quick-start-with-angular-material-and-flex-layout-1b065aa1476c

```ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatIconModule, MatToolbarModule, MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
//...
@NgModule({
//...,
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,

--@s The modules for Angular Material are configured. 1902250958

01-Editing.md

Install and setup CKEditor

/src/app/app.module.ts

import { CKEditorModule } from \"@ckeditor/ckeditor5-angular\";

package.json edited to add some library to use in :)

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/jquery-ui-dist/jquery-ui.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.js"
            ],

yarn add @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor --save

01-module.md

--@Mastery Module

x190225

• Created a module
• cd in that dir and create component

ng g module notes
cd src/app/notes
ng g component note-detail --module=notes

02-@Feature-Gesture-Support.md

If you want gesture support, you have to install the package hammerjs

npm install --save hammerjs

src/main.ts

import 'hammerjs';

02-observation.md

Observations

ng serve

• It is building over 100 modules
• What is an angular module?

---

ng new my-app

ng new myappname

Ask choice

• SCSS
• SASS

05-firebase.md

Install

npm i firebase-tools --g

Deploy function

firebase deploy --only functions

05-ngular-firebase.md

Install Global

sudo npm install -g @angular/cli

Install local

yarn add firebase @angular/fire --save

serve

ng serve --host 0.0.0.0 --disableHostCheck

55-ISSUE.md

Socket error

use --disableHostCheck

ng serve --host 0.0.0.0 --disableHostCheck

88-angular-setup.sh

sudo npm install -g @angular/cli

# Create an app

# Create the app
ng new my-app
## @a Choose CSS type (SCSS, SASS...

# @v Start the App
ng serve
# @v Serve on the network
ng serve --host 0.0.0.0 --disableHostCheck

# Generate service
## ng generate service [name] generates a service
ng generate service mycalcsvc

# @a Edit server host and port
vi e2e/protractor.conf.js

99-zlogs-181221.md

JGMAC:my-app jgi$ ng generate service mycalcsvc
CREATE src/app/mycalcsvc.service.spec.ts (348 bytes)
CREATE src/app/mycalcsvc.service.ts (138 bytes)

---

ng generate service mycalcsvc

CREATE src/app/mycalcsvc.service.spec.ts (348 bytes)
CREATE src/app/mycalcsvc.service.ts (138 bytes)

---

ng generate component sayhello

CREATE src/app/sayhello/sayhello.component.scss (0 bytes)
CREATE src/app/sayhello/sayhello.component.html (27 bytes)
CREATE src/app/sayhello/sayhello.component.spec.ts (642 bytes)
CREATE src/app/sayhello/sayhello.component.ts (278 bytes)
UPDATE src/app/app.module.ts (558 bytes)

The src/app/app.module.ts was updated

COMPLETED

CKEditor Integrated