-
Introduciton to the course
-
Install development tools
-
Create Angular App
- Create project's folder
- Install @angular/cli
- Create App as frontend
-
Add Header
- Generate Component
- Add Html
- Add CSS
-
List Foods
- Create Food model
- Create data.ts
- Add sample foods
- Add images to assets
- Create Food service
- Create Home component
- Add ts
- Add html
- Add css
-
Search
- Add method to Food service
- Add search route
- Show search result in Home component
- Generate search component
- Add to home component
- Add ts
- Add html
- Add css
-
Tags Bar
- Create Tag model
- Add sample tags to data.ts
- Food service
- Add get all tags method
- Add get all foods by tag method
- Add tags route
- Show tag result in Home component
- Generate Tags component
- Add to home component
- Add ts
- Add html
- Add css
-
Food Page
- Add method to food service
- Generate Food Page component
- Add Route
- Add ts
- Add html
- Add css
-
Cart Page
- Create CartItem Model
- Create Cart Model
- Generate Cart service
- Add to Cart Button in Food Page
- Generate Cart page component
- Add Route
- Add ts
- Add html
- Add css
-
Not Found!
- Generate Component
- Add ts
- Add html
- Add css
- Add To Pages
- Home Page
- Food Page
- Cart Page
- Generate Component
-
Connect To Backend
- Create backend folder
- npm init
- npm install typescript
- Create tsconfig.json
- Create .gitignore
- Copy data.ts to backend/src
- npm install express cors
- Create server.ts
- install @types
- Add Apis
- npm install nodemon ts-node --save-dev
- Add urs.ts to frontend
- Add HttpClient module
- Update food service
-
Login Page
-
Generate Component
- Add to routes
- Add ts
- Add html
- Import Reactive Forms Module
- Add Css
-
Add Login Api
- Use json
- Add jsonwebtoken
- Test Using Postman
-
Generate User Service
- Generate User model
- Add User Subject
- Add Login Method
- Add User Urls
- Generate IUserLogin interface
- Add ngx-toastr
- Import Module
- Import BrowserAnimationsModule
- Add styles in angular.json
- Add to Header
- Add Local Storage methods
- Add Logout Method
- Add to Header
-
-
Make Components For Login Page
- Input Container
- Input Validation
- Text Input
- Default Button
-
Connect Login API To MongoDB Atlas
- Moving Apis into routers
- Create MongoDB Atlas
- Create .env file
- Install
- mongoose
- dotenv
- bcryptjs
- express-async-handler
- Connect to MongoDB Atlas
- Use MongoDB instead of data.ts in apis
-
Register User
- Add Register api
- Add Register service method
- Add Register link
- Add Register Component
-
Loading!
- Add Image
- Add Component
- Add Service
- Add Interceptor
-
Checkout Page
- Create Order Model
- Create Checkout Page Component
- Add To Router
- Add User to User Service
- Add Cart to Cart Service
- Create Order Items List Component
- Adding Map To The Checkout Page
- Add Leaflet npm package
- Add @types/leaflet
- Add Css to angular.json
- Add AddressLatLng to Order Model
- Create Map component
- Add to checkout page
- Add TS
- Change app-map selector to map
- Add Html
- Add CSS
- Add Auth Guard
- Add Leaflet npm package
- Save Order
- Add Order Model
- Add Order Status Enum
- Add Auth Middleware
- Add Order Router
- Add create API
- Add Order Urls to urls.ts
- Add Order Service
- Add create Method
- Add Auth Interceptor
-
Payment Page
- Generate Component
- Add 'getOrderForCurrentUser' api
- Add Order Service method
- Connect Component to Service
- Make the map component readonly
-
Adding Paypal
- Generate Component
- Add to payment page
- Get Paypal client Id
- Add Paypal JS to index.html
- Set up Paypal button
- Add Pay api to order router
- Get Paypal sandbox account
- Generate Component
-
Order Track Page
- Generate Component
- Add to routes
- Add API
- Add to urls.ts
- Add method to order.service
- Add HTML
- Add CSS
- Generate Component
-
Deploy On Heroku
- OutputPath in angular.json
- package.json
- frontend
- backend
- root
- BASE_URL in urls.ts
- Public folder config in server.ts
- Run commands
- Add built folder to .gitignore
- Commit and Push
-
Updating Packages (Optional)
- Install npm-check-upates as a global package
- Run ncu -u in the frontend folder
- Downgrade typescript to version ~4.8.2
- Run npm install --force
- Run npm start
- Run ncu -u in the backend folder
- Run npm install
- Run npm start
proyectto's Introduction
proyectto's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.