Learn 11ty, Angularfire and Ionic

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Building apps with Ionic 2

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Develop Custom Twitch Scenes and Setup in OBS

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

Use Sliding Gestures to Reorder an Ionic 2 List

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run `ionic g --list` in your terminal. 

Use the Ionic CLI to Generate Angular 2 Mobile Components

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

Build your first page component with Ionic 2

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead. 

Create a Native Mobile Side Menu Layout in Ionic 2

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the [documentation](http://ionicframework.com/docs/api/navigation/NavController/)

Use Ionic 2 NavController to Manipulate App History

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.


[Infinite Scroll](http://ionicframework.com/docs/2.3.0/api/components/infinite-scroll/InfiniteScroll/) and [Refresher](http://ionicframework.com/docs/2.3.0/api/components/refresher/Refresher/) can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

Lazy Load Data with Ionic 2

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController. 

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.  

Navigate Between Mobile Screens  with the Ionic 2 NavController

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s `--lab` flag to see what your app will look like before it’s even deployed to a device.


Preview an Angular 2 Mobile  App with Ionic Lab

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

- [ModalController](http://ionicframework.com/docs/2.3.0/api/components/modal/ModalController/)
- [ViewController](http://ionicframework.com/docs/2.3.0/api/navigation/ViewController/)
- [AlertController](http://ionicframework.com/docs/2.3.0/api/components/alert/AlertController/)

Create an Overlay Component with the Ionic 2 Overlay API

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like `ion-card`, `ion-card-content`, and `ion-card-header` are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven. 

Create Angular 2 Mobile Card based layouts with Ionic 2

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.


Start an Ionic 2 App with the CLI

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The `IonicModule` in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's `BrowserModule`, `HttpModule`, `FormsModule`, and `ReactiveFormsModule`


Fetch data from an API using Angular 2 HTTP module 

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Learn how to use the IonIcon library in a non-Ionic web app or web page. IonIcons are now based on web components, or more specifically the Custom Element, and can be easily used in any web project.

Create Icons in Any Project with the IonIcon library

Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. This lesson will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.

Create Adaptive Icons for Ionic & Cordova Applications

Learn how to install the Ionic 4 CLI and validate its installation.

Install the Ionic 4 CLI

Learn how to create and use the Ionic Floating Action Button (FAB) in your Ionic 4 application.

Position an Ionic 4 Floating Action Button (FAB) Component in an App

Learn how to create and use the Ionic List component in your Ionic 4 application.

Search

Search Results