Web and App Development with Angular

Master App and Website Creation with Data Sharing

Web Development4.5(68)14h 39m62 lectures8 sections

What you'll learn

  • Understand Angular basics and install the tools
  • Create an Angular project and organize its files
  • Use TypeScript and data types
  • Create Components and navigate between them
  • Carry out the MyBlog and Calculator projects
  • Work with Data Models
  • Use Angular Material
  • Build the SportsStore project and its shopping cart
  • Connect the project to the backend and add authentication
  • Build the Admin panel

About this course

This course teaches web and app development with Angular and TypeScript from the beginning. You start with the course introduction, its requirements and what Angular is, then installing the tools and extensions, creating your first project and understanding how files are organized. Next you get to know TypeScript, data types and how to solve Compiler problems, then the Component, creating a Header, Footer, Contact and Article, and you carry out a MyBlog project and a Calculator project. Then you work with Data Models and the Angular Material library, such as Toolbar, Table and Form. In the final stages you build a complete SportsStore project, including displaying products and categories, the shopping cart, Routing and Checkout, and connecting it to the backend through Json-Server, along with authentication and the Admin panel. The course suits anyone who wants to master creating a website and an app and sharing data between them, and it is best to know the basics of the web before you start. Afterward you will be able to build a complete web application with Angular. The teaching is gradual and uses practical projects, and each stage builds on the one before until the project is complete.

Expected outcomes

  • Build advanced web applications using Angular.
  • Deep understanding of components and their interactions.
  • Master TypeScript and use it within Angular projects.
  • Develop scalable practical applications.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.5
★★★★★
68 reviews
5★
36
4★
29
3★
3
2★
0
1★
0
  • ★★★★★Zaid M.·منذ 5 شهرشاهد 100٪

    الدورة ممتازة جداد و مفيدة

تم عرض كل التقييمات (1)

Course content

1

Introduction to Angular

7 lectures
  1. Course IntroductionIntroduces Angular as a framework specialized in building user interfaces that can also be used for mobile apps, and explains why demand for it is high.8:03
  2. Course RequirementsOutlines the Angular course prerequisites: HTML, CSS and Bootstrap basics, JavaScript and programming concepts, since Angular relies on TypeScript which is built on JavaScript, plus Node.js knowledge for the backend.2:27
  3. What is Angular?Defines Angular as a framework for building user interfaces, explains the difference between a framework and a library, then covers its history from AngularJS by Google to modern Angular and how they differ.11:11
  4. Installing ToolsExplains installing the Angular tools: Visual Studio Code as the code editor, Node.js which includes the npm package manager, then Angular CLI with npm install -g, and ng commands such as creating and serving a project.8:27
  5. Installing PluginsInstalls Git as a version control tool, then goes through Visual Studio Code extensions that help with Angular development, including one for running commands and one that changes file icons.8:18
  6. Creating Your First ProjectCreates the first project, saves it in a folder on the computer and opens it in the editor, then removes the unneeded files for now while keeping the index file to start working from.8:04
  7. Explaining File Organization Within the ProjectExplains the files and folders of an Angular project and the role of each, such as the editorconfig file, the src folder, the main module, the main entry file and the script settings.26:13
2

A Quick Look at TypeScript

4 lectures
  1. Introduction to TypeScriptIntroduces TypeScript as a language built on JavaScript that adds static types to fix the dynamic typing weakness, compiles to JavaScript so browsers can run it, and is the main language for writing Angular.5:32
  2. Understanding the Basics and Explaining TypeScript File TranslationExplains installing TypeScript and creating tsconfig.json, how a ts file is compiled to JavaScript with tsc, how TypeScript rejects assigning a value of a different type, then running the output with Node.12:24
  3. Solving Compiler IssuesFixes the problem of running tsc commands in Visual Studio Code by changing the PowerShell execution policy, then configures tsconfig to compile ts to js automatically and enables watch mode on changes.7:36
  4. Organizing Data TypesExplains TypeScript data types such as string, number and boolean, the type tree starting at unknown, adding null, and how a type gives access to its properties and methods while preventing assignment of another type.10:52
3

MyBlog Project

8 lectures
  1. What is a Component?Explains the Component as the basis of an Angular app, with a root component containing child components such as a header, and its three parts: the HTML template, the styles file, and the TypeScript class with its decorator and selector.8:55
  2. Creating and Configuring the Module with a Header ComponentExplains that Angular is a Single Page Application, installs Bootstrap in the project, then creates the Core Module with a Header Component inside it, registers it in the module and wires it to routing.20:10
  3. Creating and Configuring the Footer ComponentCreates a Footer Component inside a Shared Module so it can be reused in several places, using ng generate, then writes its template, imports the module into the Core Module and shows it on the page.15:14
  4. Creating and Configuring the Contact ComponentCreates the Contact Component and its module with ng generate, connects it to routing for navigating between pages, and builds its template with a card containing an image, text and an email contact link.9:53
  5. Navigating to the Contact ComponentConnects navigation to the Contact component through Routing, using RouterLink in the header component and importing RouterModule in the core module so the page displays when the link is clicked.8:30
  6. Navigating to the Article ComponentCreates an Articles module with its own Routing file, adds a navbar link using RouterLink, and sets an empty path plus a fallback path for missing pages to redirect the user.12:53
  7. Adding Content to the Article TemplateBuilds the Articles page template using div elements, list-group classes and headings to show article titles and descriptions, then tests the page through the route set up earlier.6:52
  8. MyBlog Link
4

Handling Main Components

5 lectures
  1. Creating the Calculator ComponentCreates a Calculator project in Angular, adds the Component, Bootstrap setup and index.html, registers the component in the Module, then runs the project to display the component's template.11:34
  2. Working with the Calculator TemplateBuilds the Calculator Component template with HTML and Bootstrap: an input display and a result display, number and operator buttons, and binds the click event to a function that receives the digit.28:01
  3. Adding Logic and Functions to the Calculator ComponentAdds the calculator logic to the Calculator Component: handler methods for digit and operator presses, checking the last input to prevent repeated operators, and updating the result field on each press.25:36
  4. Adding the Second Project to the Article TemplateAdds the calculator project as a second project to the Article page of the blog app, creating cards that describe it, and notes linking it through routing and the option of adding its source link.9:40
  5. Calculator Link
5

Working with Data Model - Angular Material

10 lectures
  1. Introduction (Working with Data Model _ Angular Material)Gives an overview of a To Do app built with Angular and Angular Material, which adds a new task, marks it complete, and shows the count of unfinished tasks and the list of completed ones.5:21
  2. Configuring Data ModelsBuilds the Data Model for a To Do app by creating a class for a single task with description and done-status fields, and another class for the task list with a read-only getter, explaining private properties.19:16
  3. Handling and Using Data ModelsUses the Data Models in the To Do app: places the models in a dedicated folder, defines a user object and item count, adds tasks to the list, then uses filter to show the unfinished tasks and their count.14:56
  4. Installing and Configuring Angular MaterialInstalls Angular Material into the project with ng add using a default theme, imports its modules into a dedicated module, then shows some components such as buttons, cards, badges and form fields.13:44
  5. Using the Material ToolbarUses the Material Toolbar to build a top bar showing the username, an icon and a badge, importing the needed Angular Material modules and arranging the elements inside it.8:54
  6. Displaying Data Through the Material TableDisplays the task list in a Material Table, defining the columns, rows, headers and the data source that fills the table with tasks.17:24
  7. Controlling with the Material CheckboxControls tasks with a Material Checkbox bound through ngModel, changing the task state, color and counter when checked, and hiding completed tasks with a filter.6:43
  8. Adding New Data Through the Material FormAdds new data through a Material Form, letting the user type a new task in a field and add it with a button, passing the entered value to the component through an event.13:31
  9. Controlling Data Display with Material Slide ToggleAdds a Material Slide Toggle to switch between showing all tasks or only incomplete ones, using a variable that changes on click and applies a filter to the displayed list.6:53
  10. ToDo Link
6

Phase One of the Final Project SportsStore

10 lectures
  1. Introduction to Phase OneIntroduces phase one of an e-commerce project called Sports Store built with Angular: the basic layout and product display split by category and pages, with data coming from a backend server.5:34
  2. Creating and Setting Up the Final ProjectCreates the final sportsstore project with ng new, installs Font Awesome, json-server and jsonwebtoken, adds style files in angular.json, and prepares the project for the next phases.10:31
  3. Setting Up the Back End for the Project via Json-ServerPrepares the project's backend with json-server: writes a data file defining products and orders, adds a middleware file for JSON Web Token authentication, and handles GET and POST requests for login.20:24
  4. Organizing Project Files and Running the Back End ServerOrganizes the project files by creating folders for the Model, Store and Admin, runs the backend with json-server on a given port, tests requesting products and categories, and confirms both servers work together.9:16
  5. Creating and Configuring All Data ModelsCreates the Data Models that represent the shape of the data, then a static data source and a repository that return products and categories dynamically instead of adding them by hand.35:20
  6. Creating and Configuring the Model ModuleCreates a Model Module that groups the data models and repositories into one module, declaring their Providers in an NgModule so they can be used anywhere in the application.5:05
  7. Creating and Configuring the Store ComponentCreates the Store Component and its template, passes it parameters such as products and categories, then builds a Store Module that imports the Angular and model modules to display the store.14:32
  8. Displaying All ProductsShows all products in the store by repeating a single element with ngFor, displaying each product's name and price in a set currency instead of duplicating code for every product.9:10
  9. Controlling Product Display via CategoriesControls which products are displayed by category, creating category buttons that change the selected category so the list shows only matching products, through a method that takes a number.24:29
  10. Reconfiguring Code via Custom DirectiveCreates a Custom Directive to reuse code, defining its Context and Selector and registering it in the store module, then uses it to repeat elements and build page numbers.10:59
7

Phase Two of the Final Project SportsStore

8 lectures
  1. Introduction to Phase TwoIntroduces phase two of Sports Store: the shopping Cart, adding a product, changing quantity and computing the total, removing items, then moving on to checkout and the Order.3:59
  2. Creating and Configuring the Cart ModelCreates the Cart Model describing shopping cart data: order lines, adding a product and increasing its quantity if already present, computing item count and total price, then registering it in the Module.22:47
  3. Creating and Configuring the Cart SummaryCreates the Cart Summary Component that shows the item count and total in the cart using ngIf conditions, and adds an add-to-cart button whose click event calls a method that adds the product to the Cart.15:52
  4. Adding and Using Routing TransitionCreates a folder, component and module for the cart, then sets up Routing so the user can navigate to the cart and checkout pages, wiring them into the application's Router.15:26
  5. Creating and Configuring a Store First Guard FeatureBuilds a Route Guard that controls navigation between pages, blocking or allowing it based on set conditions, registers it in the routing module and tests it with the cart page.12:19
  6. Adding Selected Products for Purchase through Cart DetailBuilds the Cart Detail page showing the selected products, with a message when the cart is empty using ngIf, and calculates each line total and the cart total when quantities change.25:42
  7. Completing the Purchase Process through CheckoutStarts the Checkout by creating the Order model and repository functions to get and save orders, and designs a form to enter customer data such as name and address.36:29
  8. Linking the Project to the Back End and Displaying DataConnects the project to the backend through a RESTful API, replacing static data with a REST data source that sends HTTP requests to a given protocol and port and displays the server's data.15:06
8

The Final Stage of the SportsStore Project

10 lectures
  1. Introduction to the Final StageIntroduces the final project phase, the admin area: a login page, viewing products and orders, adding, editing and deleting a product, and setting how many items appear per page.8:41
  2. Creating, Configuring, and Linking Auth and Admin ComponentsCreates the Auth and Admin components in Angular: a login form using ngForm with username and password, an Admin component, an admin module, then wires them into the routing.25:34
  3. Configuring and Applying Authentication During LoginImplements admin login authentication in Angular: an Auth service that sends an HTTP POST request and checks for a successful response, wired to the Router and the login component, then tested in browser tools.22:31
  4. Adding All Functions to Handle Requests and Products for AdminAdds functions that let the admin manage products and orders through a REST data source, using HttpHeaders, with save and update methods in the product and order repositories.24:24
  5. First Step to Configure Admin ElementsStarts building the admin interface with Angular Material, creating the product table component, buttons and a navigation menu, then showing placeholder pages for products and orders.35:57
  6. Second Step Displaying Products for AdminDisplays products in a table on the admin page within the Product Table component, with edit and delete buttons, and deletes the product from the server data and updates the table.28:01
  7. Modifying and Adding New Products for AdminBuilds a form for the admin to edit products and add new ones, distinguishing edit mode from create mode based on the route, and changing the button text and behavior accordingly.24:21
  8. Third Step Displaying All Purchase Requests for AdminBuilds the Order Table component to show all purchase orders on the admin page using a Material Table, with header rows, a no-data row and the customer details.30:19
  9. Final Step in the ProjectAdds pagination to the admin table using Material Paginator with page size options, then tests submitting a customer order and verifies it reaches the server.13:17
  10. Final Project Link

Instructor

Eng. Amr Abdel Fattah

Eng. Amr Abdel Fattah

Computer systems engineer specializing in mobile app and website development, with experience in creating popular platforms and web applications.
49.1K views20 courses

Related courses