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

1. then

Adding an Angular Contact Form

• use netlify function to pre-render a contact form
• check the doc at https://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

can also trigger a notification on settings

Wrap up & Resources

• Netlify explorers
• Netlify explorers resources
• https://www.netlify.com/authors/tara-z.-manicsic/?utm_source=jamstack-explorers&utm_medium=angular-in-the-jamstack-tzm&utm_campaign=devex
• https://jamstack.org/
• https://serverless.css-tricks.com/
• https://scully.io/
• https://www.youtube.com/channel/UC8bRyfU7ycLXnEBfvdorpUg