| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Install Shared Packages" | 3 title: "Install Shared Packages" |
| 4 description: "Packages are bundles of source code, tools, and resources that hel
p you to organize and share code" | 4 description: "Packages are bundles of source code, tools, and resources that hel
p you to organize and share code" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: packages | 7 id: packages |
| 8 next: polymer-intro/ | 8 next: polymer-intro/ |
| 9 next-title: "Define a Custom Element" | 9 next-title: "Define a Custom Element" |
| 10 prev: remove-elements/ | 10 prev: remove-elements/ |
| (...skipping 30 matching lines...) Expand all Loading... |
| 41 </div> | 41 </div> |
| 42 | 42 |
| 43 Now that you're able to create and run a Dart application | 43 Now that you're able to create and run a Dart application |
| 44 and have a basic understanding of DOM programming, | 44 and have a basic understanding of DOM programming, |
| 45 you are ready to leverage code written by other programmers. | 45 you are ready to leverage code written by other programmers. |
| 46 Many interesting and useful packages of reusable Dart code | 46 Many interesting and useful packages of reusable Dart code |
| 47 are available at the | 47 are available at the |
| 48 <a href="https://pub.dartlang.org/">pub.dartlang.org</a> | 48 <a href="https://pub.dartlang.org/">pub.dartlang.org</a> |
| 49 repository. | 49 repository. |
| 50 | 50 |
| 51 This target shows you how to use `pub`—a package manager | 51 This tutorial shows you how to use `pub`—a package manager |
| 52 that comes with Dart—to | 52 that comes with Dart—to |
| 53 install one of the packages in the repository, | 53 install one of the packages in the repository, |
| 54 the vector_math package. | 54 the vector_math package. |
| 55 You can follow these same steps to install any package hosted at | 55 You can follow these same steps to install any package hosted at |
| 56 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>; | 56 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>; |
| 57 just change the package name when you get to that step. | 57 just change the package name when you get to that step. |
| 58 This target also describes some of the resources you can expect to find | 58 This tutorial also describes some of the resources you can expect to find |
| 59 in a well-built package. | 59 in a well-built package. |
| 60 | 60 |
| 61 * [About the pubspec.yaml file](#about-pubspec) | 61 * [About the pubspec.yaml file](#about-pubspec) |
| 62 * [Name the package dependencies](#name-dependencies) | 62 * [Name the package dependencies](#name-dependencies) |
| 63 * [Install the package dependencies](#install-dependencies) | 63 * [Install the package dependencies](#install-dependencies) |
| 64 * [What did you get (and not get)?](#about-packages) | 64 * [What did you get (and not get)?](#about-packages) |
| 65 * [Import libraries from a package](#use-package) | 65 * [Import libraries from a package](#use-package) |
| 66 * [Other resources](#other-resources) | 66 * [Other resources](#other-resources) |
| 67 * [What next?](#what-next) |
| 67 | 68 |
| 68 ##About the pubspec.yaml file {#about-pubspec} | 69 ##About the pubspec.yaml file {#about-pubspec} |
| 69 | 70 |
| 70 To use an external package, | 71 To use an external package, |
| 71 your application must itself be a package. | 72 your application must itself be a package. |
| 72 Any application with a valid pubspec.yaml file in its top-level directory | 73 Any application with a valid pubspec.yaml file in its top-level directory |
| 73 is a package and can therefore use external packages. | 74 is a package and can therefore use external packages. |
| 74 When you create an application using Dart Editor, | 75 When you create an application using Dart Editor, |
| 75 Dart Editor automatically creates a `pubspec.yaml` file. | 76 Dart Editor automatically creates a `pubspec.yaml` file. |
| 76 | 77 |
| 77 Start Dart Editor and create a new application with the name `vector_victor`. | 78 Start Dart Editor and create a new application with the name `vector_victor`. |
| 78 Double click pubspec.yaml to view its contents. | 79 Double click pubspec.yaml to view its contents. |
| 79 | 80 |
| 80  | 81  |
| 81 | 82 |
| 82 The pubspec.yaml file contains the package specification written in YAML | 83 The pubspec.yaml file contains the package specification written in YAML |
| 83 (visit <a href="https://pub.dartlang.org/doc/pubspec.html">Pubspec Format</a> | 84 (visit <a href="https://pub.dartlang.org/doc/pubspec.html">Pubspec Format</a> |
| 84 for in-depth coverage). | 85 for in-depth coverage). |
| 85 Dart Editor provides a user interface for editing the pubspec.yaml file | 86 Dart Editor provides a user interface for editing the pubspec.yaml file |
| 86 so that you don't have to worry about the YAML format. | 87 so that you don't have to worry about the YAML format. |
| 87 Or you can click the **Source** tab at the bottom of the Editor pane | 88 Or you can click the **Source** tab at the bottom of the Editor pane |
| 88 to edit the YAML code directly. | 89 to edit the YAML code directly. |
| 89 Below is the pubspec.yaml file that was | 90 Below is the pubspec.yaml file that was |
| 90 created for the vector_victor application. | 91 created for the vector_victor application. |
| 91 | 92 |
| 92  | 93  |
| 93 | 94 |
| 94 The package name is required. | 95 The package name is required. |
| 95 All web applications are dependent on the browser package | 96 You'll note that the pubspec.yaml file already |
| 96 provided at pub.dartlang.org. | 97 lists a dependency on the browser package. |
| 98 Web applications that don't use Polymer |
| 99 need the browser package. |
| 97 | 100 |
| 98 {% comment %} | 101 {% comment %} |
| 99 ##...Or put an existing application into a package {#old-app-in-pkg} | 102 ##...Or put an existing application into a package {#old-app-in-pkg} |
| 100 | 103 |
| 101 If you already have an application | 104 If you already have an application |
| 102 and want it to use an external package, | 105 and want it to use an external package, |
| 103 simply create a pubspec.yaml file in the application's top-level directory. | 106 simply create a pubspec.yaml file in the application's top-level directory. |
| 104 Your pubspec.yaml file must at least specify the package name. | 107 Your pubspec.yaml file must at least specify the package name. |
| 105 | 108 |
| 106  | 109  |
| (...skipping 18 matching lines...) Expand all Loading... |
| 125 you need to add the package to your | 128 you need to add the package to your |
| 126 application's list of _dependencies_ | 129 application's list of _dependencies_ |
| 127 in the pubspec.yaml file. | 130 in the pubspec.yaml file. |
| 128 Each item in the dependencies list | 131 Each item in the dependencies list |
| 129 specifies the name, and sometimes the version, | 132 specifies the name, and sometimes the version, |
| 130 of a package that your application uses. | 133 of a package that your application uses. |
| 131 | 134 |
| 132 Let's make the vector_victor application have a dependency | 135 Let's make the vector_victor application have a dependency |
| 133 on the vector_math package, | 136 on the vector_math package, |
| 134 which is available at pub.dartlang.org. | 137 which is available at pub.dartlang.org. |
| 135 Click the **Add** button in Dart Editor. | 138 |
| 139 * Click the **Add** button in Dart Editor. |
| 136 | 140 |
| 137  | 141  |
| 138 | 142 |
| 139 Enter the name of the package in the popup window. | 143 * Enter the name of the package in the popup window. |
| 140 | 144 |
| 141  | 145  |
| 142 | 146 |
| 143 Dart Editor adds the package name to the list. | 147 Dart Editor adds the package name to the list. |
| 144 | 148 |
| 145  | 149  |
| 146 | 150 |
| 147 Notice the **Version** field. | 151 Notice the **Version** field. |
| 148 `any` means that this application can use | 152 `any` means that this application can use |
| 149 any version of the vector_math package. | 153 any version of the vector_math package. |
| (...skipping 108 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 258 </div> | 262 </div> |
| 259 <hr> | 263 <hr> |
| 260 </div> | 264 </div> |
| 261 | 265 |
| 262 ##Import libraries from a package {#use-package} | 266 ##Import libraries from a package {#use-package} |
| 263 | 267 |
| 264 Open the vector_math directory by clicking the little arrow. | 268 Open the vector_math directory by clicking the little arrow. |
| 265 | 269 |
| 266  | 270  |
| 267 | 271 |
| 268 The directory contains a Dart file, | 272 The directory contains a Dart file called vector_math.dart, |
| 269 which you import into your Dart application, | 273 which you import into your Dart application, |
| 270 and a `src` directory, | 274 and a `src` directory, |
| 271 which contains all of the source code for the library. | 275 which contains the source code for the library. |
| 272 As with the SDK libraries, | 276 As with the SDK libraries, |
| 273 use the import directive to use code from an installed library. | 277 use the import directive to use code from an installed library. |
| 274 The Dart SDK libraries are built-in and | 278 The Dart SDK libraries are built-in and |
| 275 are identified with the special dart: prefix. | 279 are identified with the special dart: prefix. |
| 276 For external libraries installed by pub, | 280 For external libraries installed by pub, |
| 277 use the `package:` prefix. | 281 use the `package:` prefix. |
| 278 | 282 |
| 279 {% prettify dart %} | 283 {% prettify dart %} |
| 280 import 'package:vector_math/vector_math.dart'; | 284 import 'package:vector_math/vector_math.dart'; |
| 281 {% endprettify %} | 285 {% endprettify %} |
| 282 | 286 |
| 283 Note that you specify the filename, not the library name. | 287 Note that you specify the filename, not the library name. |
| 284 | 288 |
| 285 ##Other resources | 289 ##Other resources |
| 286 | 290 |
| 287 <ul> | 291 <ul> |
| 288 <li> | 292 <li> |
| 289 Dart developers share packages at | 293 Dart developers share packages at |
| 290 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>. | 294 <a href="https://pub.dartlang.org/">pub.dartlang.org</a>. |
| 291 Look there for packages that might be useful to you, | 295 Look there for packages that might be useful to you, |
| 292 or share your own Dart packages. | 296 or share your own Dart packages. |
| 293 See the <a href="https://pub.dartlang.org/doc/">pub documentation</a> | 297 See the <a href="https://pub.dartlang.org/doc/">pub documentation</a> |
| 294 to get started using and sharing packages. | 298 to get started using and sharing packages. |
| 295 </li> | 299 </li> |
| 296 <li> | |
| 297 One important package that you will find there | |
| 298 is | |
| 299 <a href="https://pub.dartlang.org/packages/web_ui">web_ui</a>—a packag
e | |
| 300 created by the Dart team that lets you use Web components and templating. | |
| 301 The | |
| 302 <a href="/docs/tutorials/web-ui/">next target</a> covers Web UI. | |
| 303 </li> | |
| 304 </ul> | 300 </ul> |
| 305 | 301 |
| 302 ##What next? {#what-next} |
| 303 |
| 304 One package at pub.dartlang.org is Polymer.dart, |
| 305 which makes writing web applications easier |
| 306 with data binding, templates, and declarative event handlers. |
| 307 Check out the next tutorial, |
| 308 [Define a Custom Element](/docs/tutorials/polymer-intro), |
| 309 for an introduction to Polymer. |
| 310 |
| 311 |
| 306 {% endcapture %} | 312 {% endcapture %} |
| 307 | 313 |
| 308 {% include tutorial.html %} | 314 {% include tutorial.html %} |
| OLD | NEW |