Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 374127e

Browse files
filipesilvafilipesilva
committed
add intro, download
1 parent c3cb57d commit 374127e

File tree

1 file changed

+161
-1
lines changed

1 file changed

+161
-1
lines changed

‎public/docs/ts/latest/cookbook/third-party-lib.jade

Lines changed: 161 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
include ../_util-fns
22

33
:marked
4+
Libraries are the backbone of the Angular ecosystem.
5+
They add functionality that would otherwise take a long time to implement from scratch and keep it up to date.
6+
Everyone benifits from a healthy library ecosystem.
7+
48
Traditionally, third party JavaScript libraries have been published in the form of a single JavaScript file.
59
Consumers of the library have then included the library, "as is", somewhere on the page using a `script` tag.
610

7-
Modern web development has changed this process. Instead of publishing a "one size fits all" bundle, developers want to only include the parts of the library they actually need.
11+
Modern web development has changed this process.
12+
Instead of publishing a "one size fits all" bundle, developers want to only include the parts of the library they actually need and in the format they need it in.
813

914
This cookbook shows how to publish a third party library in a way that makes it possible to take advantage of techniques like Ahead of Time Compilation (AoT) and Tree Shaking.
1015

@@ -26,6 +31,161 @@ include ../_util-fns
2631

2732
[Final Application](#final-app)
2833

34+
TODO finish this
35+
36+
a#develop-locally
37+
:marked
38+
## Setup a local development environment
39+
40+
Setting up a new library project on your machine is quick and easy with the **QuickStart Library seed**,
41+
maintained [on github](https://github.com/angular/quickstart-lib "Install the github QuickStart Library repo").
42+
43+
:marked
44+
Make sure you have at least Node 6.9 and NPM 3.0 installed.
45+
Then ...
46+
1. Create a project folder (you can call it `quickstart-lib` and rename it later).
47+
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart Library seed** into your project folder.
48+
1. Install npm packages.
49+
1. Run `npm start` to launch the sample application.
50+
51+
a#clone
52+
:marked
53+
### Clone
54+
55+
Perform the _clone-to-launch_ steps with these terminal commands.
56+
57+
code-example(language="sh" class="code-shell").
58+
git clone https://github.com/angular/quickstart-lib.git quickstart-lib
59+
cd quickstart-lib
60+
npm install
61+
npm start
62+
63+
a#download
64+
:marked
65+
### Download
66+
<a href="https://github.com/angular/quickstart-lib" title="Download the QuickStart Library seed repository">Download the QuickStart Library seed</a>
67+
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
68+
69+
code-example(language="sh" class="code-shell").
70+
cd quickstart-lib
71+
npm install
72+
npm start
73+
74+
.l-main-section
75+
:marked
76+
## Initialize your repository
77+
78+
If you cloned the package from github, it has a `.git` folder where the official repository's history lives.
79+
80+
You don't want that git history though - you'll want to make your own.
81+
82+
Delete this folder and initialize this one as a new repository:
83+
84+
code-example(language="sh" class="code-shell").
85+
rm -rf .git # use rmdir .git on Windows
86+
git init
87+
88+
.alert.is-important
89+
:marked
90+
Do this only in the beginning to avoid accidentally deleting your own git setup!
91+
92+
a#seed
93+
.l-main-section
94+
:marked
95+
## What's in the QuickStart seed?
96+
97+
block qs-seed
98+
:marked
99+
The **QuickStart seed** contains the same application as the QuickStart playground.
100+
But its true purpose is to provide a solid foundation for _local_ development.
101+
Consequently, there are _many more files_ in the project folder on your machine,
102+
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
103+
104+
block core-files
105+
a#app-files
106+
:marked
107+
Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
108+
109+
.filetree
110+
.file src
111+
.children
112+
.file app
113+
.children
114+
.file app.component.ts
115+
.file app.module.ts
116+
.file main.ts
117+
118+
+makeTabs(`
119+
setup/ts/src/app/app.component.ts,
120+
setup/ts/src/app/app.module.ts,
121+
setup/ts/src/main.ts
122+
`, '', `
123+
src/app/app.component.ts,
124+
src/app/app.module.ts,
125+
src/main.ts
126+
`)(format='.')
127+
128+
:marked
129+
Each file has a distinct purpose and evolves independently as the application grows.
130+
131+
Files outside `src/` concern building, deploying, and testing your app.
132+
They include configuration files and external dependencies.
133+
134+
Files inside `src/` "belong" to your app.
135+
Add new Typescript, HTML and CSS files inside the `src/` directory, most of them inside `src/app`,
136+
unless told to do otherwise.
137+
138+
The following are all in `src/`
139+
140+
style td, th {vertical-align: top}
141+
table(width="100%")
142+
col(width="20%")
143+
col(width="80%")
144+
tr
145+
th File
146+
th Purpose
147+
tr
148+
td <ngio-ex>app/app.component.ts</ngio-ex>
149+
td
150+
:marked
151+
Defines the same `AppComponent` as the one in the QuickStart.
152+
It is the **root** component of what will become a tree of nested components
153+
as the application evolves.
154+
tr(if-docs="ts")
155+
td <code>app/app.module.ts</code>
156+
td
157+
:marked
158+
Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
159+
Right now it declares only the `AppComponent`.
160+
Soon there will be more components to declare.
161+
tr
162+
td <ngio-ex>main.ts</ngio-ex>
163+
td
164+
:marked
165+
Compiles the application with the [JIT compiler](../glossary.html#jit) and
166+
[bootstraps](appmodule.html#main "bootstrap the application")
167+
the application's main module (`AppModule`) to run in the browser.
168+
The JIT compiler is a reasonable choice during the development of most projects and
169+
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
170+
You'll learn about alternative compiling and [deployment](deployment.html) options later in the documentation.
171+
172+
173+
.l-main-section
174+
:marked
175+
## Rename your library
176+
177+
Every package on NPM has a unique name, and so should yours.
178+
179+
-- rename lib
180+
181+
.l-sub-section
182+
:marked
183+
### Next Step
184+
185+
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html "Angular learning path").
186+
187+
=============
188+
29189
.l-main-section
30190
<a id="third-party-lib"></a>
31191
:marked

0 commit comments

Comments
 (0)