Gain insights into developing hybrid mobile apps with Ionic and Angular. Discover platform-specific UI elements, and build a functional attendance app for your portfolio and deployment.

angularIonic4.tar.gz

ionic-app

ionic-test

AngularApp

The Ionic Framework is an open-source SDK for hybrid mobile app development. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android.

In this course, you will cover all the most important aspects of development with Ionic and Angular. Throughout, you will work to build a fully functional attendance application that you can add to your portfolio.

By the end, you will have the confidence and the means to create and deploy your own mobile app for iOS or Android.

Developing Mobile Apps with Ionic and Angular

# Node Version Manager

Now review another way to install Node on macOS and Linux. My preferred approach to anything relating to `node` and `npm` is to install a tool called the Node Version Manager, or `nvm`. It is a little more involved, but far more flexible overall.

What is `nvm`? It is an elegant set of shell script functions to enable the most flexible use of `node` imaginable.

The primary purpose of `nvm` is to enable you to install and switch between multiple versions of `node` and `npm` instantly. So, if you happen to have one project that requires Node 8, but another one that requires Node 4, for example, it is easy to keep them both installed, yet still independent from one another. 

To me, the more notable features of `nvm` revolve around root, or administrator access. Many `npm` package installation instructions you will find on the web instruct you to use the `sudo` (or super-user do) command to install packages globally. It is possible that you may not have root access to your Mac, making those instructions worthless. There are workarounds, naturally, and they work fine. I used such workarounds for a few years before a colleague showed me `nvm`. Now I am convinced. 

Once you commit to `nvm`, there is no reason ever to use `sudo`. In fact, you do not even need root access to install `nvm`. Everything gets installed under your own user account.

On macOS, install nvm with this command. It uses Homebrew, which you should now have.

```shell
brew install nvm 
```

If you are on Linux, use this command, as these tools should exist on a stock Linux system. 

```shell
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 
```

One you have installed `nvm`, you can use it to install any version of `node` that you want. In this case, you will install the latest stable version. Simply execute the commands shown here.

| Command  | Description  |
| - | - |
| `nvm install 'lts/*'`  | Download and install the latest long-term-support, or LTS, version of Node.  |
|`node --version`   |Determine which version of `node` is currently in use.   |
|`nvm ls`   |Determine which versions of `node` you have installed
   |
| `nvm ls-remote`  |Determine what versions of node are available to you. Warning: It is a pretty long list.   |
|`nvm install v10.15`   | Install any available version of `node` (the v is optional).  |
|`nvm use v12.4`   |Switch to another version of nvm you have installed (the v is optional)   |

From this point forward, all of `node` and every `npm` package you install globally will be placed in the `.nvm` directory inside of your home directory. You should never have to use `sudo` to install an `npm` package globally. You’re welcome.

# Install Ionic

Finally, you need to install Ionic. Fortunately, this step is identical no matter which OS you use. Simply open the terminal of your choice and enter the following command:

```shell
npm install -g @ionic/cli
```

This command will download and install the Ionic Framework tooling globally (that is what the `-g` flag does). Once installed, this tooling, known as the Ionic CLI, provides a variety of commands to help you in your Ionic development. Some of the important commands are shown here.

| Command  | Description  |
| - | - |
|`ionic info`   | Prints project, system, and environment information.  |
|`ionic docs`   |Opens the Ionic documentation website.   |
|`ionic start`   |Creates a new project   |
| `ionic generate`  |Creates new project assets (pages, components, interfaces, services, etc.). Note, this command currently only supports Ionic-Angular projects.   |


___


Additional instructions on setting up the Ionic environment on macOS and Linux are provided in this lesson.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Conclusion

Appendix – Installing the Tools

Additional Instructions for macOS and Linux

Node Version Manager