⚙ Angular in the Jamstack

⚙ Angular in the Jamstack

Netlify Explorers

Angular Project setup

  • install angular client with npm
  • “code .” to open studio code here
  • “ng-serve” start the server // clear the app.component.html page
    install -g @angular/cli
    code .
    ng-serve
    

Connecting Angular to Netlify

  • create .tolm file for netlify build automatisation
  • install netlify client avec npm
  • create & config a new site, my team, site name
    install -g netlify-cli
    netlify init
    

build command: ng build --prod dir to deploy: dist/angular-explorer

Creating a Pre-rendered Site Angular and Scully

Scully is the one static site generator

ng add @scullyio/init
ng build --prod
npm run scully

with "netly init" we choose the dir dist/angular-explorer as build dir with scully run, it became dist/static

now it’s live, if you do

  • ctrl+p then
  • disable javascript you will see the site is still up (no error)

Adding Signup and Login

  1. create component in command line ng generate component navigation --module app.module

  2. add in navigation.component.html ```

       <div class="login" data-netlify-identity-button></div>
      

    ```

  3. add in app.component.html the component called app-navigation

    selector: 'app-navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.css']
    })
    
    <h1>Let's start explorer</h1>
    <app-navigation></app-navigation>
    <router-outlet></router-outlet>
    
  4. add script on index.html
  5. enable external provider for authentication on netlify administration panel

image.png

  1. then

image.png

Adding an Angular Contact Form

  • use netlify function to pre-render a contact form
  • check the doc at docs.netlify.com/forms/setup/#html-forms
    ng component generate contact-form --module app.module
    
          <form 
              name="contact-form"
              class="contact-form"
              method="POST"
              data-netlify="true"
          >
          <input type="hidden" name="form-name" value="contact-form">
    
    hidden field value need to match form name value

=> add the component in app.component

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
<h1>Let's start explorer</h1>
<app-navigation></app-navigation>
<app-contact-form></app-contact-form>
<router-outlet></router-outlet>

=> check on Netlify dashboard > Form

image.png

can also trigger a notification on settings

image.png

Wrap up & Resources