<commit_before>---
title: Building Apps with NativeScript and Angular 2
description: Learn the basics of how NativeScript and Angular 2 work, how to set up your system, and how to create your first app
position: 1
guide: true
environment: angular
---

# Building Apps with NativeScript and Angular 2

Welcome to the NativeScript & Angular 2 getting started guide 📚. In this hands-on tutorial, you’ll build a cross-platform iOS and Android app from scratch.

> **IMPORTANT**: NativeScript’s Angular integration is in beta. If you run into any issues completing this guide, please log those issues on our [Angular GitHub repo](https://github.com/NativeScript/nativescript-angular/issues).

## What is NativeScript? What is Angular 2?

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/NativeScript_logo.png" class="plain" alt="NativeScript logo">
  <p><a href="https://www.nativescript.org/">NativeScript</a> is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no <a href="http://developer.telerik.com/featured/what-is-a-webview/">WebViews</a>—resulting in native-like performance and UX.</p>
</div>

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/Angular_logo.png" class="plain" alt="Angular logo">
  <p><a href="https://angularjs.org/">Angular JS</a> is one of the most popular open source JavaScript frameworks for application development. The latest version of Angular, <a href="https://angular.io/">Angular 2</a>, makes it possible to use Angular outside of a web browser, and developers at <a href="http://www.telerik.com/">Telerik</a>—the company that created and maintains NativeScript—<a href="https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j">have been working closely with developers at Google</a> to make Angular 2 in NativeScript a reality.</p>
</div>

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/NativeScript_Angular_logo.png" class="plain" alt="Angular logo">
  <p>The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.</p>
</div>

## What you're building

This guide will walk you through building [Groceries](https://github.com/NativeScript/sample-Groceries), a groceries management app that does the following things:

- Connects to an existing RESTful service.
- Provides user registration and login.
- Lets authenticated users add and delete groceries from a list.
- Runs cross-platform (iOS and Android).

If you follow along to the end, here's what the finished app will look like on iOS:<commit_msg>Getting started guide: Removing the emoji 😔<commit_after>---
title: Building Apps with NativeScript and Angular 2
description: Learn the basics of how NativeScript and Angular 2 work, how to set up your system, and how to create your first app
position: 1
guide: true
environment: angular
---

# Building Apps with NativeScript and Angular 2

Welcome to the NativeScript & Angular 2 getting started guide. In this hands-on tutorial, you’ll build a cross-platform iOS and Android app from scratch.

> **IMPORTANT**: NativeScript’s Angular integration is in beta. If you run into any issues completing this guide, please log those issues on our [Angular GitHub repo](https://github.com/NativeScript/nativescript-angular/issues).

## What is NativeScript? What is Angular 2?

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/NativeScript_logo.png" class="plain" alt="NativeScript logo">
  <p><a href="https://www.nativescript.org/">NativeScript</a> is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no <a href="http://developer.telerik.com/featured/what-is-a-webview/">WebViews</a>—resulting in native-like performance and UX.</p>
</div>

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/Angular_logo.png" class="plain" alt="Angular logo">
  <p><a href="https://angularjs.org/">Angular JS</a> is one of the most popular open source JavaScript frameworks for application development. The latest version of Angular, <a href="https://angular.io/">Angular 2</a>, makes it possible to use Angular outside of a web browser, and developers at <a href="http://www.telerik.com/">Telerik</a>—the company that created and maintains NativeScript—<a href="https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j">have been working closely with developers at Google</a> to make Angular 2 in NativeScript a reality.</p>
</div>

<div class="intro-box">
  <img src="../img/cli-getting-started/angular/chapter0/NativeScript_Angular_logo.png" class="plain" alt="Angular logo">
  <p>The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.</p>
</div>

## What you're building

This guide will walk you through building [Groceries](https://github.com/NativeScript/sample-Groceries), a groceries management app that does the following things:

- Connects to an existing RESTful service.
- Provides user registration and login.
- Lets authenticated users add and delete groceries from a list.
- Runs cross-platform (iOS and Android).

If you follow along to the end, here's what the finished app will look like on iOS:
{'fraction_non_alphanumeric': 0.10281496738757295, 'fraction_numerical': 0.007209062821833162, 'mean_word_length': 4.933808553971486, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 59, 'https://': 12, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '482939', 'n_tokens_mistral': 1749, 'n_tokens_neox': 1632, 'n_words': 670}