Kamran Ahmed
2 years ago
parent
30aef56202
commit
b1feefe2da
2189 changed files with 0 additions and 219925 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,131 +0,0 @@ |
||||
--- |
||||
jsonUrl: "/jsons/android.json" |
||||
pdfUrl: "/pdfs/android.pdf" |
||||
order: 4 |
||||
featuredTitle: "Android" |
||||
featuredDescription: "Step by step guide to becoming an Android Developer in 2022" |
||||
title: "Android Developer" |
||||
description: "Step by step guide to becoming an Android developer in 2022" |
||||
hasTopics: false |
||||
seo: |
||||
title: "Android Developer Roadmap: Learn to become an Android developer" |
||||
description: "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap." |
||||
keywords: |
||||
- "guide to becoming an android developer" |
||||
- "android developer roadmap" |
||||
- "android roadmap" |
||||
- "become android developer" |
||||
- "android developer skills" |
||||
- "android skills test" |
||||
- "skills for android development" |
||||
- "learn android development" |
||||
- "what is android" |
||||
- "android quiz" |
||||
- "android interview questions" |
||||
relatedRoadmaps: |
||||
- "frontend" |
||||
- "javascript" |
||||
- "react" |
||||
- "nodejs" |
||||
sitemap: |
||||
priority: 1 |
||||
changefreq: "monthly" |
||||
tags: |
||||
- "roadmap" |
||||
- "main-sitemap" |
||||
- "role-roadmap" |
||||
--- |
||||
|
||||
The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the roadmap if suitable. |
||||
|
||||
There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where [flutter](https://flutter.dev/), [react-native](https://reactnative.dev/), or [NativeScript](https://www.nativescript.org/) are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is [react-native](https://reactnative.dev) and I would recommend you to checkout the [Frontend Developer Roadmap](/frontend). |
||||
|
||||
## Complete Roadmap |
||||
|
||||
Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes. |
||||
|
||||
[](/assets/roadmaps/android/roadmap.png) |
||||
|
||||
## Broken Down Version |
||||
Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above. |
||||
|
||||
## Pick a Language |
||||
For the languages, you can develop android apps either by using Kotlin or Java. |
||||
|
||||
[](/assets/roadmaps/android/pick-language.svg) |
||||
|
||||
Although, you can use both [Kotlin](https://en.wikipedia.org/wiki/Kotlin_(programming_language)) and [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) to develop native android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice. |
||||
|
||||
## The Fundamentals |
||||
Install the [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started. |
||||
|
||||
[](/assets/roadmaps/android/the-fundamentals.png) |
||||
|
||||
We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like. |
||||
|
||||
* [Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin) |
||||
* [Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html) and [Official Kotlin Tutorials](https://kotlinlang.org/docs/tutorials/) |
||||
* [Data Structures and Algorithms](https://www.studytonight.com/data-structures/introduction-to-data-structures). Also [check this](https://www.tutorialspoint.com/data_structures_algorithms/index.htm). |
||||
* [Kotlin DataStructures](https://kotlinlang.org/docs/reference/collections-overview.html) |
||||
* [Algorithms and DataStructures in Kotlin](https://github.com/bmaslakov/kotlin-algorithm-club) |
||||
* [Gradle](https://docs.gradle.org/current/userguide/what_is_gradle.html) |
||||
* [Getting started with Gradle](https://docs.gradle.org/current/userguide/getting_started.html) |
||||
Note: Android Studio comes with a working installation of Gradle, so you don’t need to install Gradle separately in that case. |
||||
|
||||
## Version Control Systems |
||||
Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but [Git](https://git-scm.com/) is the most common one these days. |
||||
|
||||
[](/assets/roadmaps/android/git-github.png) |
||||
|
||||
Here are some of the resources to get you started. Feel free to google and find something else that you find easier. |
||||
|
||||
* [Udacity — Version Control with Git](https://www.udacity.com/course/version-control-with-git--ud123) |
||||
* [GitHub Hello World](https://guides.github.com/activities/hello-world/) |
||||
|
||||
## Building an Application |
||||
|
||||
Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. |
||||
|
||||
[](/assets/roadmaps/android/build-an-application.png) |
||||
|
||||
To learn more about the items listed in the image above, here are the links to the relevant docs |
||||
|
||||
* [Using Activities and Activity Life Cycles](https://developer.android.com/guide/components/activities/intro-activities) |
||||
* Building Flexible Interfaces using [Fragments](https://developer.android.com/guide/components/fragments) |
||||
* [Debugging using Android Studio Debugger](https://developer.android.com/studio/debug) |
||||
* [Handling App Configurations](https://developer.android.com/work/managed-configurations) |
||||
* [Using Intents and Intent Filters](https://developer.android.com/guide/components/intents-filters) |
||||
* [Understand Context](https://guides.codepath.com/android/Using-Context) |
||||
* [Learn about Multithreading](https://developer.android.com/training/multiple-threads) |
||||
* [Data Privacy](https://www.raywenderlich.com/6901838-data-privacy-for-android) |
||||
* [Securing Network Data](https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android) |
||||
* [Dependency Injection](https://developer.android.com/training/dependency-injection) |
||||
* [Content Providers](https://developer.android.com/guide/topics/providers/content-providers) |
||||
* [Glide](https://github.com/bumptech/glide), [Retrofit](https://square.github.io/retrofit/), [Crashlytics](https://firebase.google.com/docs/crashlytics/get-started), [GSON](https://github.com/google/gson) |
||||
* [Room](https://developer.android.com/topic/libraries/architecture/room), [Navigation](https://developer.android.com/guide/navigation/navigation-getting-started), [Work Manager](https://developer.android.com/topic/libraries/architecture/workmanager), [LiveData](https://developer.android.com/topic/libraries/architecture/livedata), [Data Binding](https://developer.android.com/topic/libraries/data-binding) |
||||
* [RxJava](https://github.com/ReactiveX/RxJava), [RxKotlin](https://github.com/ReactiveX/RxKotlin) |
||||
* [Memory Management Overview](https://developer.android.com/topic/performance/memory-overview) |
||||
* [Diving deeper into context-oriented programming in Kotlin](https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814) |
||||
|
||||
## Jetpack Compose |
||||
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. |
||||
* [Jetpack Compose](https://developer.android.com/jetpack/compose/documentation) |
||||
* [Material Design 3](https://m3.material.io/) |
||||
* [Getting started with Material Components](https://m3.material.io/libraries/mdc-android/getting-started) |
||||
|
||||
## Free Resources |
||||
I would highly recommend watching [this free course](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) from google on Developing Android Apps with Kotlin. You may also get started with this [free course](https://developer.android.com/courses/android-basics-kotlin/course) on the android developer's page, concepts are taught with the help of code labs, projects and quizzes and you also earn badges as you learn that appear on your google developer profile. Also, here are some of the resources to learn more about the topics listed above. |
||||
|
||||
* [Developing Android Apps with Kotlin](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) |
||||
* [Android Basics in Kotlin](https://developer.android.com/courses/android-basics-kotlin/course) |
||||
* [Android Developer Guides](https://developer.android.com/guide) |
||||
* [Raywenderlich](https://www.raywenderlich.com) |
||||
|
||||
## Wrap Up |
||||
|
||||
That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck! |
||||
|
||||
For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/developer-roadmap) or reach out to me on twitter [@kamranahmedse](https://twitter.com/kamranahmedse). |
||||
|
||||
<!-- @fixme add padding to the container --> |
||||
<br /><br /><br /> |
||||
@ -1,42 +0,0 @@ |
||||
--- |
||||
jsonUrl: "/jsons/angular.json" |
||||
pdfUrl: "/pdfs/angular.pdf" |
||||
order: 3 |
||||
featuredTitle: "Angular" |
||||
featuredDescription: "Step by step guide to become a Angular Developer in 2022" |
||||
title: "Angular Developer" |
||||
description: "Everything that is there to learn about Angular and the ecosystem in 2022." |
||||
hasTopics: true |
||||
dimensions: |
||||
width: 968 |
||||
height: 2277.8 |
||||
seo: |
||||
title: "Angular Developer Roadmap: Learn to become a Angular developer" |
||||
description: "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap." |
||||
keywords: |
||||
- "guide to becoming a angular developer" |
||||
- "angular developer roadmap" |
||||
- "angular roadmap" |
||||
- "become angular developer" |
||||
- "angular developer skills" |
||||
- "angular skills test" |
||||
- "skills for angular development" |
||||
- "learn angular development" |
||||
- "what is angular" |
||||
- "angular quiz" |
||||
- "angular interview questions" |
||||
relatedRoadmaps: |
||||
- "frontend" |
||||
- "javascript" |
||||
- "react" |
||||
- "vue" |
||||
- "nodejs" |
||||
sitemap: |
||||
priority: 1 |
||||
changefreq: "monthly" |
||||
tags: |
||||
- "roadmap" |
||||
- "main-sitemap" |
||||
- "skill-roadmap" |
||||
--- |
||||
|
||||
@ -1,10 +0,0 @@ |
||||
# What is Typescript |
||||
|
||||
TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [What is TypeScript](https://thenewstack.io/what-is-typescript/) |
||||
- [W3Schools – TypeScript Tutorial](https://www.w3schools.com/typescript/) |
||||
- [Tutorials point – TypeScript Tutorial](https://www.tutorialspoint.com/typescript/index.htm) |
||||
- [TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs) |
||||
@ -1,8 +0,0 @@ |
||||
# Why use TypeScript |
||||
|
||||
TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include.Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. Object-oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. Use existing packages – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [linguinecode - Reasons to use TypeScript](https://linguinecode.com/post/5-reasons-why-to-use-typescript) |
||||
- [Codemotion - Reasons to use TypeScript](https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/) |
||||
@ -1,12 +0,0 @@ |
||||
# Structural Typing |
||||
|
||||
Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing. |
||||
|
||||
TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Structural typings — Medium](https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004) |
||||
- [Structural typings — Typescriptlang](https://www.typescriptlang.org/docs/handbook/type-compatibility.html) |
||||
- [Structural typing video for Beginners](https://www.youtube.com/watch?v=kWtwsX_rT3k) |
||||
|
||||
@ -1,8 +0,0 @@ |
||||
# Type Inference |
||||
|
||||
In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Type Interface - typescriptlang](https://www.typescriptlang.org/docs/handbook/type-inference.html) |
||||
- [Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA) |
||||
@ -1,8 +0,0 @@ |
||||
# Union Types |
||||
|
||||
In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example, `(type1 | type2 | type3 | .. | typeN)`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) |
||||
- [Union Type video for Beginners](https://www.youtube.com/watch?v=uxjpm4W5pCo) |
||||
@ -1,8 +0,0 @@ |
||||
# Builtin Types |
||||
|
||||
The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [TypeScript Types - Tutorialspoint](https://www.tutorialspoint.com/typescript/typescript_types.htm) |
||||
- [Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M) |
||||
@ -1,11 +0,0 @@ |
||||
# Type Guard |
||||
|
||||
A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean. |
||||
|
||||
TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is. |
||||
|
||||
Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/) |
||||
@ -1,8 +0,0 @@ |
||||
# Typescript Basics |
||||
|
||||
In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Typescript a Beginners Guide](https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e) |
||||
- [TypeScript Playground](https://www.typescriptlang.org/play) |
||||
@ -1,9 +0,0 @@ |
||||
# Observable Pattern |
||||
|
||||
The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. |
||||
|
||||
Angular uses the Observer pattern which simply means — Observable objects are registered, and other objects observe (in Angular using the subscribe method) them and take action when the observable object is acted on in some way. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular and Observable](https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282) |
||||
@ -1,13 +0,0 @@ |
||||
# Observable lifecycle |
||||
|
||||
An observable is a function that acts as a wrapper for a data stream. They support to pass messages inside your application. An observable is useless until an observer subscribes to it. An observer is an object which consumes the data emitted by the observable. An observer keeps receiving data values from the observable until the observable is completed, or the observer unsubscribes from the observable. Otherwise observers can receive data values from the observable continuously and asynchronously. So we can perform various operations such as updating the user interface, or passing the JSON response. |
||||
|
||||
There are 4 stages for a life cycle of an observable. |
||||
- Creation |
||||
- Subscription |
||||
- Execution |
||||
- Destruction |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding Observable LifeCycle](https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f) |
||||
@ -1,9 +0,0 @@ |
||||
# Marble Diagrams |
||||
|
||||
Marble testing allows you to test asynchronous RxJS code synchronously and step-by-step with the help of RxJS TestScheduler test utility and using virtual time steps. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Marble Testing: A Brief Introduction](https://www.altamira.ai/blog/angular-marble-testing-a-brief-introduction/) |
||||
- [IUnderstanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5) |
||||
- [Interactive Diagrams](https://rxmarbles.com/#from) |
||||
@ -1,12 +0,0 @@ |
||||
# RxJS vs Promises |
||||
|
||||
In a nutshell, the main differences between the Promise and the Observable are as follows: |
||||
|
||||
- The Promise is eager, whereas the Observable is lazy, |
||||
- The Promise is always asynchronous, while the Observable can be either asynchronous or synchronous, |
||||
- The Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values), |
||||
you can apply RxJS operators to the Observable to get a new tailored stream. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Why RxJS? RxJS vs Promises](https://javascript.plainenglish.io/why-rxjs-rxjs-vs-promises-b28962771d68) |
||||
@ -1 +0,0 @@ |
||||
# Filtering |
||||
@ -1 +0,0 @@ |
||||
# Rate limiting |
||||
@ -1 +0,0 @@ |
||||
# Transformation |
||||
@ -1 +0,0 @@ |
||||
# Combination |
||||
@ -1,38 +0,0 @@ |
||||
# RxJS Operators |
||||
|
||||
|
||||
RxJS is mostly useful for its operators, even though the Observable is the foundation. Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner. |
||||
|
||||
Operators are functions. There are two kinds of operators: |
||||
|
||||
**Pipeable Operators** are the kind that can be piped to Observables using the syntax observableInstance.pipe(operator()). These include, filter(...), and mergeMap(...). When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable. |
||||
|
||||
A Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable. |
||||
|
||||
**Creation Operators** are the other kind of operator, which can be called as standalone functions to create a new Observable. For example: of(1, 2, 3) creates an observable that will emit 1, 2, and 3, one right after another. Creation operators will be discussed in more detail in a later section. |
||||
|
||||
## Piping |
||||
|
||||
Pipeable operators are functions, so they could be used like ordinary functions: op()(obs) — but in practice, there tend to be many of them convolved together, and quickly become unreadable: op4()(op3()(op2()(op1()(obs)))). For that reason, Observables have a method called .pipe() that accomplishes the same thing while being much easier to read: |
||||
|
||||
```bash |
||||
obs.pipe(op1(), op2(), op3(), op4()); |
||||
``` |
||||
|
||||
## Creation Operators |
||||
|
||||
**What are creation operators?** Distinct from pipeable operators, creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables. |
||||
|
||||
A typical example of a creation operator would be the interval function. It takes a number (not an Observable) as input argument, and produces an Observable as output: |
||||
|
||||
```bash |
||||
import { interval } from 'rxjs'; |
||||
|
||||
const observable = interval(1000 /* number of milliseconds */); |
||||
``` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [List of creation operators](https://rxjs.dev/guide/operators#creation-operators-list) |
||||
- [Full RxJS Operators Documentation](https://rxjs.dev/guide/operators) |
||||
|
||||
@ -1,5 +0,0 @@ |
||||
# RxJS Basics |
||||
|
||||
Reactive Extensions for JavaScript, or RxJS, is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs. |
||||
|
||||
The reactive paradigm can be used in many different languages through the use of reactive libraries. These libraries are downloaded APIs that provide functionalities for reactive tools like observers and operators. It can be used in your browser or with Node.js. |
||||
@ -1,8 +0,0 @@ |
||||
# AngularJS vs. Angular |
||||
|
||||
AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [AngularJS Website](https://angularjs.org/) |
||||
- [Official - Getting started with Angular](https://angular.io/start) |
||||
@ -1,13 +0,0 @@ |
||||
# Angular Components |
||||
|
||||
Components are the main building block for Angular applications. Each component consists of: |
||||
|
||||
* An HTML template that declares what renders on the page |
||||
* A TypeScript class that defines the behavior |
||||
* A CSS selector that defines how the component is used in a template |
||||
* Optionally, CSS styles applied to the template |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Components Overview](https://angular.io/guide/component-overview) |
||||
- [Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU) |
||||
@ -1,8 +0,0 @@ |
||||
# Angular Templates |
||||
|
||||
A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding Templates](https://angular.io/guide/template-overview) |
||||
- [Template Syntax](https://angular.io/guide/template-syntax) |
||||
@ -1,7 +0,0 @@ |
||||
# Angular Modules |
||||
|
||||
Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Introduction to Modules](https://angular.io/guide/architecture-modules) |
||||
@ -1,8 +0,0 @@ |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding Dependency Injection](https://angular.io/guide/dependency-injection) |
||||
- [Dependency Injection in Action](https://angular.io/guide/dependency-injection-in-action) |
||||
@ -1,10 +0,0 @@ |
||||
# Services |
||||
|
||||
Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Services](https://angular.io/tutorial/toh-pt4) |
||||
- [What is an Angular Service](https://www.javatpoint.com/what-is-an-angular-service) |
||||
- [Service for API Calls](https://www.knowledgehut.com/blog/web-development/make-api-calls-angular) |
||||
- [Service Tutorial with Example](https://www.positronx.io/angular-service-tutorial-with-example/) |
||||
@ -1,8 +0,0 @@ |
||||
# Routing |
||||
|
||||
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Routing](https://angular.io/guide/routing-overview) |
||||
- [Common Routing Tasks](https://angular.io/guide/router) |
||||
@ -1,5 +0,0 @@ |
||||
# Angular Basics |
||||
|
||||
Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner. |
||||
|
||||
In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts. |
||||
@ -1,8 +0,0 @@ |
||||
# Ng build |
||||
|
||||
The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng Build - Angular.io](https://angular.io/cli/build) |
||||
- [Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0) |
||||
@ -1,8 +0,0 @@ |
||||
# Ng serve |
||||
|
||||
ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng serve - Angular.io](https://angular.io/cli/serve) |
||||
- [Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U) |
||||
@ -1,9 +0,0 @@ |
||||
# Ng generate |
||||
|
||||
ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice. |
||||
|
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng generate - Angular.io](https://angular.io/cli/generate) |
||||
- [Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4) |
||||
@ -1,11 +0,0 @@ |
||||
# Ng test |
||||
|
||||
ng test is used to runs unit tests in angular project. |
||||
|
||||
`ng test <project> [options]` | `ng t <project> [options]` |
||||
|
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng test - Angular.io](https://angular.io/cli/test) |
||||
- [Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA) |
||||
@ -1,8 +0,0 @@ |
||||
# Ng e2e |
||||
|
||||
End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng e2e - Angular.io](https://angular.io/cli/e2e) |
||||
- [Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew) |
||||
@ -1,12 +0,0 @@ |
||||
# Ng new |
||||
|
||||
`$ ng new [name]` |
||||
|
||||
That’s the default usage of the command and creating a new project folder with name. The project which is created in that folder is containing: |
||||
|
||||
The default Angular project, All dependencies installed in node_modules folder , Testing files for each components |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Ng New - Angular.io](https://angular.io/cli/new) |
||||
- [ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ) |
||||
@ -1,8 +0,0 @@ |
||||
# Schematics |
||||
|
||||
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Website](https://angular.io/guide/schematics#:~:text=A%20schematic%20is%20a%20template,collections%20and%20installed%20with%20npm.) |
||||
- [Angular Blog](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944) |
||||
@ -1,10 +0,0 @@ |
||||
# Angular CLI |
||||
|
||||
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command |
||||
|
||||
`npm install -g @angular/cli` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular CLI - Angular.io](https://angular.io/cli) |
||||
- [Angular CLI - setup](https://www.youtube.com/watch?v=mZnzX3J5XKI) |
||||
@ -1,7 +0,0 @@ |
||||
# Interpolation |
||||
|
||||
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](ttps://angular.io/guide/interpolation) |
||||
@ -1,7 +0,0 @@ |
||||
# Property binding |
||||
|
||||
Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/guide/property-binding) |
||||
@ -1,7 +0,0 @@ |
||||
# Template statements |
||||
|
||||
Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()` which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/guide/template-statements) |
||||
@ -1,12 +0,0 @@ |
||||
# Binding data props attrs events |
||||
|
||||
In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync. |
||||
|
||||
- **property**: helps you set values for properties of HTML elements or directives. |
||||
- **attributes**: helps you set values for attributes of HTML elements directly. |
||||
- **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches. |
||||
- **data**: It's a combination of property and event binding and helps you share data between components. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/guide/binding-overview) |
||||
@ -1,7 +0,0 @@ |
||||
# Reference vars |
||||
|
||||
Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/guide/template-reference-variables) |
||||
@ -1,7 +0,0 @@ |
||||
# Input output |
||||
|
||||
`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/guide/inputs-outputs) |
||||
@ -1,7 +0,0 @@ |
||||
# Templates |
||||
|
||||
A template is a form of HTML that tells Angular how to render the component. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Introduction to Components and Templates](https://angular.io/guide/architecture-components) |
||||
@ -1,11 +0,0 @@ |
||||
# Builtin directives |
||||
|
||||
SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see. |
||||
|
||||
`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element. |
||||
|
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding BuiltIn Directives](https://angular.io/guide/built-in-directives) |
||||
- [BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives) |
||||
@ -1,11 +0,0 @@ |
||||
# Builtin pipes |
||||
|
||||
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are |
||||
|
||||
`DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe` |
||||
|
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding BuiltIn Pipes](https://angular.io/guide/pipes) |
||||
- [BuiltIn Pipes - exampls](https://codecraft.tv/courses/angular/pipes/built-in-pipes/) |
||||
@ -1,8 +0,0 @@ |
||||
# Change detection |
||||
|
||||
Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding Change detection](https://angular.io/guide/change-detection) |
||||
- [4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ) |
||||
@ -1 +0,0 @@ |
||||
# Rendering topics |
||||
@ -1,10 +0,0 @@ |
||||
# Reactive Forms |
||||
|
||||
Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Reactive forms - Angular](https://angular.io/guide/reactive-forms) |
||||
- [Angular Reactive Forms](https://www.javatpoint.com/angular-reactive-forms) |
||||
- [How To Use Reactive Forms in Angular](https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction) |
||||
- [Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w) |
||||
@ -1,12 +0,0 @@ |
||||
# Template Driven Forms |
||||
|
||||
A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application. |
||||
|
||||
It uses two-way data-binding (ngModel) to create and handle the form components. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Building a template-driven form](https://angular.io/guide/forms) |
||||
- [Template-Driven Forms](https://codecraft.tv/courses/angular/forms/template-driven/) |
||||
- [Template driven form](https://www.youtube.com/watch?v=whr14XxB8-M) |
||||
- [Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs) |
||||
@ -1,12 +0,0 @@ |
||||
# Forms |
||||
|
||||
Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks. |
||||
|
||||
Angular provides two approachs to handle user inputs trough forms: reactive and template-driven forms. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Introduction to forms in Angular](https://angular.io/guide/forms-overview) |
||||
- [Angular Forms](https://www.w3schools.com/angular/angular_forms.asp) |
||||
- [Angular Forms Tutorial](https://www.youtube.com/watch?v=-bGgjgx3fGs) |
||||
- [Building Forms in Angular Apps](https://www.youtube.com/watch?v=hAaoPOx_oIw) |
||||
@ -1 +0,0 @@ |
||||
# Configuration |
||||
@ -1,9 +0,0 @@ |
||||
# Router outlets |
||||
|
||||
The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. |
||||
|
||||
Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Understanding Router Outlets](https://angular.io/api/router/RouterOutle) |
||||
@ -1 +0,0 @@ |
||||
# Router links |
||||
@ -1 +0,0 @@ |
||||
# Router events |
||||
@ -1,14 +0,0 @@ |
||||
# Route Guards |
||||
|
||||
Angular route guards are interfaces provided by Angular which, when implemented, allow us to control the accessibility of a route based on conditions provided in class implementation of that interface. |
||||
|
||||
Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `CanDeactivate` and `Resolve`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Angular Official Website](https://angular.io/api/router) |
||||
- [Can Activate Guard](https://angular.io/api/router/CanActivate) |
||||
- [Can Activate Child](https://angular.io/api/router/CanActivateChild) |
||||
- [Can Deactivate](https://angular.io/api/router/CanDeactivate) |
||||
- [Angular Can Load](https://angular.io/api/router/CanLoad) |
||||
- [Can Match](https://angular.io/api/router/CanMatch) |
||||
@ -1,8 +0,0 @@ |
||||
# Lazy loading |
||||
|
||||
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [What is Lazy loading ? - Angular.io ](https://angular.io/guide/lazy-loading-ngmodules) |
||||
- [Angular Tutorial - Lazy Loading](https://www.youtube.com/watch?v=JjIQq9lh-Bw) |
||||
@ -1,9 +0,0 @@ |
||||
# Routing |
||||
|
||||
Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [What is Routing ? - Geeksforgeeks ](https://www.geeksforgeeks.org/routing-in-angular-9-10/) |
||||
- [Explanation of Routing ? - Angular.io ](https://angular.io/guide/router) |
||||
- [Angular Tutorial - Routing and Navigation](https://www.youtube.com/watch?v=Nehk4tBxD4o) |
||||
@ -1,9 +0,0 @@ |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [What is Dependency Injection ? - angular.io ](https://angular.io/guide/dependency-injection) |
||||
- [Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0) |
||||
|
||||
@ -1,8 +0,0 @@ |
||||
# Services |
||||
|
||||
Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Adding Services in Angular](https://angular.io/tutorial/toh-pt4) |
||||
- [Get Data from Server](https://angular.io/tutorial/toh-pt6) |
||||
@ -1,14 +0,0 @@ |
||||
# Lifecycle hooks |
||||
|
||||
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution. |
||||
|
||||
Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances. |
||||
|
||||
The following life cycle hooks of angular are : |
||||
|
||||
`OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [What is Life Cycle Hooks? - Angular.io ](https://angular.io/guide/lifecycle-hooks) |
||||
- [The life cycle hooks of angular - Blog ](https://blog.logrocket.com/angular-lifecycle-hooks/) |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue