Angular, from AngularJs is to Angular XXX (they move fast!)
Vertical Timeline
https://www.npmjs.com/package/angular-mgl-timeline
https://www.npmjs.com/package/angular-timeline
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Timelines/Angular/Light/
https://devcenter.kinvey.com/angular2/timeline
http://visjs.org/docs/timeline/
http://www.dijit.fr/demo/angular-weekly-scheduler/
https://blog.thoughtram.io/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html
https://angularscript.com/simple-timeline-angular-directive-media-timeline/
https://code.daypilot.org/67423/angular-2-scheduler-tutorial-typescript
Angular Auth
https://coursetro.com/posts/code/32/Create-a-Full-Angular-Authentication-System-with-Firebase%22
Angular_ API Communication and Authentication
Course URL:
https://www.lynda.com/Angular-tutorials/Using-exercise-files/594458/641259-4.html?autoplay=true
https://en.wikipedia.org/wiki/Bcrypt
HTTP Verbs
GET - read data from your api
POST - create new data
PUT - update data
DELETE - delete data
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
http://frontend.turing.io/lessons/module-4/oauth/index.html
Auth0
https://auth0.com/docs/quickstart/spa/angular2/01-login
https://auth0.com/docs/overview
Use Passport - Most popular NodeJS authentication middleware
Strategy is where passport will save the user data.
Make sure to add localhost to CROS in Auth0
Make sure to add the callback in the allowed callback list in auth0
Use redis to save tokens
Setup rules to merge accounts with the same email address
Cross-platform desktop apps:
https://electron.atom.io/docs/
https://auth0.com/blog/angular-2-authentication/
https://www.udemy.com/angularjs-authentication-with-auth0/
Angular_ Ecosystems
Bash - Bourne Again Shell
CLI
Command options arguments
Virtual Machines
https://www.vagrantup.com/
https://www.virtualbox.org/wiki/Downloads
Testing
Code linting
Style, code rules, etc..
Ng lint
Unit testing
Karma
Jasmine
Ng test
End to end testing (integration testing)
Protractor
Building
ng build
Gulp
Grunt
Yarn
Webpack
Ng build
Ng doc
Ng ezr
Ng eject
Ng generate
Ng get
Ng lint
Ng new
Ng serve
Ng set
Ng test
Ng xil8n
Continuous Integration (CI)
Continuous commit code and test automatically
TravisCI
Codeship
Jenkins
CircleCI
Automation gives confidence
Continuous Delivery (CD)
Keep code in a continuous state of readiness
Still choose when to push code into production
Continuous Deployment (CD)
Automates production deployment
Client is anything used by the end user.
SPA - Single Page Application
Frameworks
Bootstrap
Ionic
Foundation
Pure
NgBootstrap
Serverisde:
ASP.Net
Laravel
Package mangemenrs
NPM
Yarn
Project Management
References
Lynda Course
https://www.lynda.com/Angular-tutorials/Building-deploying-code/604263/675560-4.html?srchtrk=index%3a1%0alinktypeid%3a2%0aq%3aangular%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2
Angular2+_ Creating CRUD Apps
Course URL:
https://www.lynda.com/Angular-tutorials/Introduction/616738/659482-4.html
Setup
Install angular CLI
npm install @angular/cli -g
Type ng to make sure it installed.
Start new project
ng new PROJECTNAME --routing
cd into PROJECTNAME
npm install
ng serve --o
User Events
In HTML
In code:
Displaying Data
Interpolation
ngFor Directive
*ngFor=”let item for items”
Generate new Component
ng g c COMPONENTNAME
Client side,
Copy this
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css
1 | <link media="all" type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css"> |
Paste into index.html
Grab google fonts:
1 | <link href="https://fonts.googleapis.com/css?family=Raleway:300,500" rel="stylesheet"> |
Roles
Resource and references
- https://snipcart.com/blog/angular-seo-universal-server-side-rendering
- https://www.youtube.com/watch?v=LXF8bM4g-J4&list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9
- https://www.youtube.com/watch?v=mWu897UAYn8
- https://www.youtube.com/watch?v=iIB9sRwOPJ0
- https://coursetro.com/posts/code/155/Angular-6-SEO-Tutorial-from-Scratch---It's-Super-Simple-Now!
Zone.JS
Generate
https://angular.io/cli/generate
https://angular.io/guide/lazy-loading-ngmodules
https://angular.io/tutorial/toh-pt5
Courses
https://app.pluralsight.com/course-player?clipId=68d6b65b-61c3-4dd8-8666-fb0b9766232c
Admin Tools
Admin templates
https://www.codeinwp.com/blog/best-angular-admin-dashboard-templates/
https://www.codeinwp.com/blog/best-website-design-software/
https://github.com/akveo/ngx-admin
https://www.akveo.com/ngx-admin/themes
https://www.creative-tim.com/templates/angular-dashboard-bootstrap
https://akveo.github.io/blur-admin/
https://startbootstrap.com/templates/sb-admin-angular/
https://colorlib.com/wp/angularjs-admin-templates/
https://www.wrappixel.com/free-angular-10-admin-dashboard-templates/
https://github.com/akveo/ngx-admin
Tables:
https://akveo.github.io/ng2-smart-table/#/
SB-Admin
https://startangular.com/product/sb-admin-bootstrap-4-angular-4/
CoreUI
http://coreui.io/
NGX-Admin
https://github.com/akveo/ngx-admin
https://github.com/akveo/ngx-admin
Tables:
https://akveo.github.io/ng2-smart-table/#/
SB-Admin
https://startangular.com/product/sb-admin-bootstrap-4-angular-4/
CoreUI
http://coreui.io/
NGX-Admin
https://github.com/akveo/ngx-admin
https://akveo.github.io/nebular/docs/getting-started/what-is-nebular#what-is-nebular
https://www.akveo.com/ngx-admin/pages/dashboard
https://github.com/akveo/ngx-admin
References
Angular in 100 Seconds
https://www.youtube.com/watch?v=Ata9cSC2WpM
Angular for Beginners - Let’s build a Tic-Tac-Toe PWA
https://www.youtube.com/watch?v=G0bBLvWXBvc