You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -32,7 +32,8 @@ <h2 id="building-apps-with-nativescript-and-angular-2">Building Apps with Native
32
32
<p>NativeScript’s first-class Angular support extends the Angular 2 runtime, making it possible for you to build <em>native</em> iOS and Android applications using the same framework—and in some cases the same code—that you use to build Angular 2 web apps.</p>
33
33
<p>Let’s look at how it all works by building an app.</p>
34
34
<blockquote>
35
-
<p><strong>WARNING</strong>: Although NativeScript itself is a production-ready framework that drives many apps in the app stores today, NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on <ahref="https://github.com/NativeScript/nativescript-angular">https://github.com/NativeScript/nativescript-angular</a>.</p>
35
+
<p><strong>WARNING</strong>: Although NativeScript itself is a production-ready framework that drives many apps in the app stores today, NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on <ahref="https://github.com/NativeScript/nativescript-angular">https://github.com/NativeScript/nativescript-angular</a>. If you’re looking for a guide on using the production-ready flavor of NativeScript head to the <ahref="http://docs.nativescript.org/start/getting-started">official Getting Started Guide</a>.</p>
36
+
<p><strong>WARNING #2 🚧</strong>: This guide is being actively written. If you choose to go through this today you’ll certainly find grammatical errors and steps that just don’t work. If you find an error in the guide please report the problem at <ahref="https://github.com/tjvantoll/nativescript-angular-guide">https://github.com/tjvantoll/nativescript-angular-guide</a>. Pull requests are also welcome 😀</p>
<p>This guide will walk you through building <ahref="https://github.com/NativeScript/sample-Groceries">Groceries</a>, a groceries management app that does the following things:</p>
<p>Donec nisi magna, vehicula et purus eget, blandit suscipit tellus. Quisque lobortis augue at fringilla ullamcorper. Integer mattis diam eget augue suscipit, a malesuada mauris bibendum. Phasellus venenatis elit in semper hendrerit. Nunc tincidunt lectus in mauris facilisis, et laoreet metus aliquet. Mauris at hendrerit turpis, at semper mi. Suspendisse vel arcu nulla. Nullam scelerisque consequat molestie. Curabitur sit amet porta odio. Morbi lacinia vel tortor eu fringilla.</p>
68
-
<h3id="another-section">Another section</h3>
69
-
<p>Mauris tempor facilisis accumsan. Mauris vitae iaculis risus. Mauris volutpat suscipit neque non bibendum. Phasellus non fringilla enim. Aliquam tempor quam vel ligula porta convallis. In blandit dictum tempus. Nunc at pulvinar justo. Aliquam eu mi eros. Nunc sit amet tellus non lorem malesuada tempus. Vestibulum nunc magna, varius ut aliquam non, fermentum sodales metus. Aliquam sit amet pulvinar lacus. Sed fringilla placerat tempor. Pellentesque id elementum nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec laoreet, ex eget vulputate tincidunt, enim nisi ullamcorper urna, at scelerisque tellus mi sit amet nisi. Duis ac risus ac odio efficitur dignissim vitae dapibus purus.</p>
70
-
<h3id="yet-another-section">Yet another section</h3>
71
-
<p>Cras massa nulla, feugiat eu pretium in, tempor nec nulla. Nullam vel lobortis felis. Cras varius iaculis ornare. Ut at nisl sit amet leo pulvinar iaculis non ut purus. Morbi luctus magna sed condimentum cursus. Ut accumsan enim ligula, vitae dapibus odio blandit quis. Sed auctor ex non scelerisque vulputate. Nunc feugiat lobortis nisl consequat consectetur. Vivamus consequat sem id consectetur varius. Nam nec erat id est interdum venenatis eu eu felis. Suspendisse potenti. Donec non sapien in est maximus cursus eget eget nunc. Maecenas congue sapien ut tempor facilisis.</p>
67
+
<h2id="getting-up-and-running">Getting up and running</h2>
68
+
<p>In this chapter you're going to start with the basics, including installing the NativeScript CLI, starting a new project, and getting your first app up and running.</p>
69
+
<h3id="install-nativescript-and-configure-your-environment">Install NativeScript and configure your environment</h3>
70
+
<p>The NativeScript CLI has a few system requirements you must have in place before building NativeScript apps. As a first step, start by going through the instructions for your operating system:</p>
<p><strong>TIP</strong>: If you're a bit overwhelmed by these requirements, or if you're looking for a way to build iOS apps on Windows, you might be interested in <ahref="http://www.telerik.com/platform">using NativeScript in the Telerik Platform</a>. The Telerik Platform provides tooling for NativeScript apps, including the ability to perform iOS and Android builds in the cloud, which removes the need to complete these system requirements.</p>
78
+
</blockquote>
79
+
<p>After completing the setup you should have two commands available from your terminal: <code>tns</code>—which is short for <b>T</b>elerik <b>N</b>ative<b>S</b>cript—and <code>nativescript</code>. The two commands are equivalent, so we'll stick with the shorter <code>tns</code>.</p>
80
+
<p>You can verify the installation was successful by running <code>tns</code> in your terminal. You should see something like this:</p>
</code></pre><h3id="start-your-app">Start your app</h3>
89
+
<p>With the NativeScript CLI installed, it's time to start building your app. Normally, you would <ahref="https://github.com/NativeScript/NativeScript-cli#create-project">use the <code>tns create</code> command to create an empty NativeScript application</a>. For this guide however, we've scaffolded out a boilerplate project to act as a starting point for <ahref="https://github.com/NativeScript/sample-Groceries">Groceries</a>.</p>
90
+
<h4class="exercise-start">
91
+
<b>Exercise</b>: Get the Groceries starting point
92
+
</h4>
93
+
94
+
<p>Navigate to a folder where you want to keep your app code:</p>
</code></pre><p>After that, change to the newly cloned repo's folder:</p>
101
+
<pre><code>cd sample-Groceries
102
+
</code></pre><p>Finally, switch to the “angular-start” branch for this guide's starting point:</p>
103
+
<pre><code>git checkout angular-start
104
+
</code></pre><blockquote>
105
+
<p><strong>TIP:</strong> The “angular-end” branch has the final state of this guide's tutorial. Feel free to <ahref="https://github.com/NativeScript/sample-Groceries/tree/angular-end">refer to the branch on GitHub</a> if you get stuck.</p>
106
+
</blockquote>
107
+
<divclass="exercise-end"></div>
108
+
109
+
<h3id="add-target-development-platforms">Add target development platforms</h3>
110
+
<p>Your app is now set up, but before you run it, you need to initialize a platform-specific native project for each platform you intend to target.</p>
111
+
<h4class="exercise-start">
112
+
<b>Exercise</b>: Add the iOS and Android platforms
113
+
</h4>
114
+
115
+
<p>If you're on a Mac, start by adding the iOS platform:</p>
116
+
<pre><code>tns platform add ios
117
+
</code></pre><p>Next, add the Android platform with the same <code>platform add</code> command:</p>
118
+
<pre><code>tns platform add android
119
+
</code></pre><divclass="exercise-end"></div>
120
+
121
+
<blockquote>
122
+
<p><strong>IMPORTANT:</strong> You can add platforms only for SDKs that you already have installed on your development machine. If you get errors running <code>tns platform add</code>, refer back to the section on <ahref="#install-nativescript-and-configure-your-environment">setting up your development environment</a>.</p>
123
+
</blockquote>
124
+
<p>The <code>platform add</code> command adds a folder called <code>platforms</code> to your project, and copies all of the required native SDKs into this folder. When you build the application, the NativeScript CLI will copy your application code into the <code>platforms</code> folder so that a native binary can be created.</p>
125
+
<h3id="running-your-app">Running your app</h3>
126
+
<p>With the platform initialization complete, you can run your app in an emulator or on devices.</p>
127
+
<h4class="exercise-start">
128
+
<b>Exercise</b>: Run your app
129
+
</h4>
130
+
131
+
<p>If you're on a Mac, start by running the app in an iOS simulator with the following command:</p>
132
+
<pre><code>tns run ios --emulator
133
+
</code></pre><p>If all went well, you should see something like this:</p>
<p>Next, run your app on an Android emulator with the following command:</p>
136
+
<pre><code>tns run android --emulator
137
+
</code></pre><blockquote>
138
+
<p><strong>WARNING</strong>:</p>
139
+
<ul>
140
+
<li>You must have at least one Android AVD (Android Virtual Device) configured for this command to work. If you get an error, try <ahref="http://developer.telerik.com/featured/using-android-emulator-hybrid-mobile-apps-telerik-appbuilder/#managing-avds">setting up an AVD</a> and then run the command again.</li>
141
+
<li>If you're using <ahref="https://www.genymotion.com">Genymotion</a>, launch your Genymotion virtual device, and then run <code>tns run android</code>.</li>
142
+
</ul>
143
+
</blockquote>
144
+
<p>If all went well, you should see your app running in an Android emulator:</p>
<p>Here are a few other tips for running NativeScript apps.</p>
149
+
<blockquote>
150
+
<p><strong>TIP</strong>:</p>
151
+
<ul>
152
+
<li>To run on a USB-connected Android or iOS device, use the same <code>run</code> command without the <code>--emulator</code> flag—i.e. <code>tns run android</code> and <code>tns run ios</code>.</li>
153
+
<li>The <code>tns device</code> command lists all USB-connected iOS devices, USB-connected Android devices, and Genymotion virtual devices that <code>tns run</code> can deploy to. Note that <code>tns device</code> does not list iOS simulators.</li>
<p>At this point, you have the NativeScript CLI downloaded and installed, as well as the iOS and Android dependencies that you need to run your app. Now you need a good workflow that lets you make changes and see results fast. For that we’ll use the <code>tns livesync</code> command.</p>
158
+
<h4class="exercise-start">
159
+
<b>Exercise</b>: Your first NativeScript change
160
+
</h4>
161
+
162
+
<p>If your previous <code>tns run ios</code> or <code>tns run android</code> task is still running, type <code>Ctrl+C</code> in your terminal to kill it.</p>
163
+
<p>If you’re on a Mac, start an iOS livesync watcher by executing the following command:</p>
164
+
<pre><code>tns livesync ios --emulator --watch
165
+
</code></pre><p>If you have an Android emulator running, start an Android livesync watcher by executing the following command:</p>
166
+
<pre><code>tns livesync android --watch
167
+
</code></pre><p>The <code>tns livesync</code> command updates your app running on an emulator or device by actually transferring the updated source code. By adding the <code>--watch</code> flag, the <code>livesync</code> command additionally watches the files in your NativeScript project. Whenever one of those files changes, the command detects the update, and patches your app on the fly with the updated code.</p>
168
+
<p>To see this in action let’s make a small update to your app. Open your project’s <code>app/app.component.ts</code> file in your text editor of choice and change <code><Label text="hello world" /></code> to <code><Label text="hello NativeScript" /></code>. Save the file and you should see the app relaunch and the updated text displayed.</p>
169
+
<divclass="exercise-end"></div>
170
+
171
+
<p>In addition to updating your NativeScript app on the fly, the livesync command also shows the output of <code>console.log()</code> statements as your app executes, as well as stack traces when things go wrong. So if your app crashes at any time during this guide, look to the terminal for a detailed report of the problem.</p>
172
+
<p>The iOS and Android logs can be a bit noisy, so you might have to scroll up a bit to find the actual problem. For example if I try to call <code>foo.bar()</code> when <code>foo</code> does not exist, here's the information I get on iOS:</p>
<p><strong>TIP</strong>: When you're trying to debug a problem, try adding <code>console.log()</code> statements in your JavaScript code—exactly as you would in a browser-based application.</p>
180
+
</blockquote>
181
+
<p>Now that you've created an app, configured your environment, and set up your app to run on iOS and Android, you're ready to start digging into the files that make up a NativeScript app.</p>
Copy file name to clipboardExpand all lines: src/chapters/chapter0.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,9 @@ NativeScript’s first-class Angular support extends the Angular 2 runtime, maki
6
6
7
7
Let’s look at how it all works by building an app.
8
8
9
-
> **WARNING**: Although NativeScript itself is a production-ready framework that drives many apps in the app stores today, NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on https://github.com/NativeScript/nativescript-angular.
9
+
> **WARNING**: Although NativeScript itself is a production-ready framework that drives many apps in the app stores today, NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on https://github.com/NativeScript/nativescript-angular. If you’re looking for a guide on using the production-ready flavor of NativeScript head to the [official Getting Started Guide](http://docs.nativescript.org/start/getting-started).
10
+
11
+
> **WARNING #2 🚧**: This guide is being actively written. If you choose to go through this today you’ll certainly find grammatical errors and steps that just don’t work. If you find an error in the guide please report the problem at <https://github.com/tjvantoll/nativescript-angular-guide>. Pull requests are also welcome 😀
0 commit comments