|
1 |
| -Bringing NativeScript and Angular 2 together. This project implements a renderer that lets you build native mobile apps with Angular using the NativeScript widgets. |
2 |
| - |
3 |
| -# Prerequisites |
4 |
| - |
5 |
| -## TSD for TypeScript declarations |
6 |
| - |
7 |
| -You may need to configure your `tsd` GitHub access token to avoid rate-limit-related download errors. See the token installation instructions in the `.tsdrc` section [here](https://github.com/DefinitelyTyped/tsd#tsdrc). |
8 |
| - |
9 |
| -## Mobile SDK's |
10 |
| - |
11 |
| -You will also need the [Android SDK](https://developer.android.com/sdk/) to build this project. Install it manually before continuing with the next steps. |
12 |
| - |
13 |
| -iOS development requires an OS X machine. Details available in the NativeScript [documentation](http://docs.nativescript.org/setup/ns-cli-setup/ns-setup-os-x). |
14 |
| - |
15 |
| -## NativeScript |
16 |
| - |
17 |
| -Then install the NativeScript tools according to: [this article](http://docs.nativescript.org/setup/quick-setup). |
18 |
| - |
19 |
| -# Adding dependencies |
20 |
| - |
21 |
| -Edit your `package.json` file and add the following dependencies: |
22 |
| - |
23 |
| -```json |
24 |
| - |
25 |
| - "dependencies": { |
26 |
| - "angular2": "2.0.0-alpha.36", |
27 |
| - "nativescript-angular": "0.0.2", |
28 |
| - "parse5": "1.4.2", |
29 |
| - "punycode": "1.3.2", |
30 |
| - "querystring": "0.2.0", |
31 |
| - "reflect-metadata": "0.1.0", |
32 |
| - "rtts_assert": "2.0.0-alpha.36", |
33 |
| - "rx": "2.5.1", |
34 |
| - "url": "0.10.3", |
35 |
| - "zone.js": "0.5.3" |
36 |
| - } |
37 |
| - |
38 |
| -``` |
39 |
| - |
40 |
| -Remember to run `npm install` to fetch the modules from NPM. |
41 |
| - |
42 |
| -# Getting TypeScript declarations |
43 |
| - |
44 |
| -Once you have the `tsd` tool installed you can use it to get the needed TypeScript definitions. |
45 |
| - |
46 |
| - |
47 |
| -Get the ones for Angular and related components: |
48 |
| - |
49 |
| -`$ tsd install angular2 rx es6-promise --save` |
50 |
| - |
51 |
| -Then include the bundled `d.ts` files from the `nativescript-angular` package. |
52 |
| - |
53 |
| -`$ tsd link` |
54 |
| - |
55 |
| - |
56 |
| -# Bootstrapping an Angular app with NativeScript |
57 |
| - |
58 |
| -This is not much different than a regular Angular web app. You need to import the `nativeScriptBootstrap` function: |
59 |
| - |
60 |
| -```typescript |
61 |
| -import 'reflect-metadata'; |
62 |
| -import {nativeScriptBootstrap} from 'nativescript-angular/application'; |
63 |
| -``` |
64 |
| - |
65 |
| -(Note that you need `reflect-metadata` imported beforehand -- the Angular DI system depends on it.) |
66 |
| - |
67 |
| - |
68 |
| -Then call the bootstrap function in a `loaded` event handler: |
69 |
| - |
70 |
| -```typescript |
71 |
| -export function pageLoaded(args) { |
72 |
| - console.log('BOOTSTRAPPING...'); |
73 |
| - nativeScriptBootstrap(MainPage, []).then((appRef) => { |
74 |
| - console.log('ANGULAR BOOTSTRAP DONE.'); |
75 |
| - }, (err) =>{ |
76 |
| - console.log('ERROR BOOTSTRAPPING ANGULAR'); |
77 |
| - let errorMessage = err.message + "\n\n" + err.stack; |
78 |
| - console.log(errorMessage); |
79 |
| - }); |
80 |
| -} |
81 |
| -``` |
82 |
| - |
83 |
| -In the example above `MainPage` is an Angular component that looks roughly like this: |
84 |
| - |
85 |
| -```typescript |
86 |
| -@Component({ |
87 |
| - selector: 'main' |
88 |
| -}) |
89 |
| -@View({ |
90 |
| - template: ` |
91 |
| - <Label text='Hello world!'></Label> |
92 |
| -`, |
93 |
| -}) |
94 |
| -class MainPage { |
95 |
| - //... |
96 |
| -} |
97 |
| -``` |
98 |
| - |
99 |
| -# Sample apps |
100 |
| - |
101 |
| -* [TodoMVC](https://github.com/NativeScript/sample-ng-todomvc) |
| 1 | +# [Documentation Portal](http://docs.nativescript.org/angular/start/introduction.html) |
0 commit comments