Step By Step – AngularJS Project

//Step By Step – AngularJS Project

Step By Step – AngularJS Project

install nodejs
choco -v
choco install -g typescript@2.9.2 OR npm i -g typescript@2.9.2 for Angular 6.X
npm install -g @angular/cli@6.0

ng -v

mkdir curso-angular2
ng new primeiro-projeto

Open VSCODE
Open Folder with project curso-angular2/primeiro-projeto
Open terminal on VSCode, type: ng serve maybe a error will be displayed

To fix:
Open PowerShell in Admin mode, type:
Set-ExecutionPolicy unrestricted
Unblock-File -Path 'C:\Users\user\AppData\Roaming\npm\ng.ps1' or the path that will show the error above

Another errors are:
ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.
node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: Expression expected.

To fix that run the follow command on the prompt
Directory\curso-angular2\primeiro-projeto>npm install rxjs@6.3.3 --save

good to go


Added your first component manually or by the command line:
ng g c meu-primeiro2
which will create everything for you

uninstall Angular:
npm uninstall -g @angular/cli
npm cache clean --force

how to compile typescript in the terminal: tsc main.ts it will create the script main.js


how to create modules:
ng g m cursos

how to create components
ng g c cursos

ng g c cursos/curso-detalhe

VSCode plugin "Auto Import" for AngularJS

Injecao de dependencia: fornece uma instancia de uma classe
Toda vez que tiver um servico tera o codigo:
@Injectable({  
})


Routes:

app.routing.ts
Content: 
import { PageNotFoundComponentComponent } from './page-not-found-component/page-not-found-component.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { CursosComponent } from './cursos/cursos.component';
import { LoginComponent } from './login/login.component';

const APP_ROUTES: Routes = [
    {
        path: 'cursos', component: CursosComponent
    },
    {
        path: 'login', component: LoginComponent
    },
    {
        path: '', component: HomeComponent
    },
    { 
        // Wildcard route for a 404 page
        path: '**', component: PageNotFoundComponentComponent 
    }
    //{ path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
];

export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

app.module.ts
import { routing } from './app.routing';
imports: [
    BrowserModule,
    routing
  ],

app.component.html
<h1>Angular Router App</h1>
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
<nav>
  <ul>
    <li routerLinkActive="active"><a routerLink="/">Home</a></li>
    <li routerLinkActive="active"><a routerLink="/cursos">Cursos</a></li>
    <li routerLinkActive="active"><a routerLink="/login">Login</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

Please don't forget to declare all components on app.module.ts section declarations:[]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { routing } from './app.routing';

import { CursosComponent } from './cursos/cursos.component';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    CursosComponent,
    HomeComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



How to install Materialize on Angular 6.X
npm install materialize-css --save
npm install @samuelberthe/angular2-materialize --save
npm install jquery@^2.2.4 --save
npm install hammerjs --save

angular.json - Source: https://developer.aliyun.com/mirror/npm/package/@samuelberthe/angular2-materialize/v/1.0.0-rc.2
"build": {          
	"styles": [              
	  "node_modules/materialize-css/dist/css/materialize.css",
	  "src/styles.css"
	],
	"scripts": [              
	  "node_modules/jquery/dist/jquery.js",
	  "node_modules/hammerjs/hammer.js",
	  "node_modules/materialize-css/dist/js/materialize.js"
	]
}

app.module.ts
import { MaterializeModule } from '@samuelberthe/angular2-materialize';
imports: [
   BrowserModule,
   MaterializeModule
],

index.html
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

ng serve --open

How to do data-binding and interpolation with HASH(#) tag?
Below is your code for cursos.component.ts:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-cursos',
  templateUrl: './cursos.component.html',
  styleUrls: ['./cursos.component.css']
})
export class CursosComponent implements OnInit {  
  constructor() {     
  }
  ngOnInit() {
  }
}

Second using interpolation add your variable inside your template with any event, see example below (cursos.component.html):

Type your name: 
<input type="text" (keyup)="onKeyUp(0)" #myName  />
<br />
<p>
  My name is: {{ myName.value }}
</p>

Route Link Active:
<li routerLinkActive="active"><a routerLink="/login">Login</a></li>

Get Route ID:
curso-detalhes.component.ts
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-curso-detalhes',
  templateUrl: './curso-detalhes.component.html',
  styleUrls: ['./curso-detalhes.component.css']
})
export class CursoDetalhesComponent implements OnInit {

  id: string;
  inscricao: Subscription;

  constructor(private route: ActivatedRoute) { 
    //console.log(this.route);
    //this.id = this.route.snapshot.params["id"];    
  }

  ngOnInit() {
    //inscrever nas mudancas dos parametros
    this.inscricao = this.route.params.subscribe(
    (params: any) => {
      this.id = params['id'];
    });
  }

  ngOnDestroy(){
    this.inscricao.unsubscribe();
  }

}

curso-detalhes.component.html
<p>
  curso-detalhes works! {{ id }}
</p>

app.routing.ts
{
	path: 'curso/:id', component: CursoDetalhesComponent
}

Router Link with Data-Binding
app.componenet.html
...
<li routerLinkActive="active"><a [routerLink]="['curso', idCurso.value]">Curso com Id</a></li>    
...
<div class="container">
  <p>Entre com o curso ID:</p>
  <input (keyup)="onKeyUp(0)"  #idCurso> //must have (keyup)="onKeyUp(0)" this data-binding otherwise does not update idCurso.value on the navbar
  <router-outlet></router-outlet>
</div>



By |2020-08-10T17:11:01-06:00August 10th, 2020|Web Developer|Comments Off on Step By Step – AngularJS Project

About the Author: