Angular Framework

Notes

• When updating core, have to use –to to get it to work. ng update @angular/core --to 6.0.6

Resources

• Tools
• Angular Augury - debug and profile angular 2 apps
  • Chrome extension
• Lists
  • Awesome Angular
• Angular Documentation
• Angular CLI Documetation
• Awesome Angular
• Clarity Design System
• Angular Education
• Tools
  • ngrev - navigate structure of the app. Desktop app
  • [Augury] - Debug and profile angular project. Browser extension (Chrome only)
  • Angular Essentials Plugin - Visual Studio Code plugin for Angular development.
• Tutorials
  • Angular with Tailwindcss

Proxy api calls in angular - access API calls from local server.

• Proxy Config
• proxy.conf.json

  {
    "/children": {
      "target": "http://localhost:5000",
      "secure": false
    }
  }
  

Material Design

• Angular Material Table with CDK Table
• Layout and CSS

Angular rxjs

• Angular Observable Usage - Observable

Testing

I finally got the everything configured to test an API call from my Angular application. Because everything is local on my machine, I’m using a proxy on the Angular side to access my API without having to worry about CORS. Trying to Unit Test an API service took a little work because ng test does not read the proxy.conf.json file. So, here is the test.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      // require('karma-electron'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    // preprocessors: {
    //   '**/*.js': ['chrome']
    // },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    proxies: {
      '/kinder': {
        'target': 'http://localhost:5000/kinder',
        'changeOrigin': true
      }
      // '/kinder': 'http://localhost:5000/kinder/'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

• UtilService contains the call I want to test
• GetdataService actually makes the call.

Here is my karma.conf.js file.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      // require('karma-electron'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    // preprocessors: {
    //   '**/*.js': ['chrome']
    // },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    proxies: {
      // '/kinder': {
      //   'target': 'http://localhost:5000',
      //   'changeOrigin': true
      // },
      '/kinder': 'http://localhost:5000/kinder/'
    },
    // proxies: {
    //   '/kinder': 'http://localhost:5000/'
    // },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

Key was the proxies configuration.

Test Angular async validator with Jasmine

  it('Check age right', (done) => {
    formControl = new FormControl('');
    formControl.setAsyncValidators(
      AgeValidator(1.5, 6, utilService)
    );
    formControl.setValue('2014-01-03');
    setTimeout(function() {
      expect(formControl.status === 'VALID').toBe(true);
      done();
    }, 2000);
  });

Learning basic Angular

Setup

• Install angular-cli
• npm install -g @angular/cli
• Create the project
• ng new PROJECT_NAME --skip-install --routing --style scss
• Setup styles
• Create styles folder in src/app/assets
• Copy _settings.scss file from Foundation Template.
• Copy _foundation.scss file from Foundation Template.
• install npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid @fortawesome/fontawesome-free-webfonts
• Update settings in _foundation.scss
  • Make sure to include ~ in import for foundation.
  • import @import '~@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
• Update settings.scss file
  • Change util import to @import '~foundation-sites/scss/util/util'; (line 63)
  • Add line to point to font-awesome variable $fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts';
• Add _custom.scss to import your custom scss.
• Add _foundation.scss to your styles.scss file in your assets folder.
• Import the styles.scss file into your application.

---

Last update: April 13, 2020 16:50:19