@@ -92,49 +92,64 @@ code-example(language="sh" class="code-shell").
92
92
a#seed
93
93
.l-main-section
94
94
:marked
95
- ## What's in the QuickStart seed?
95
+ ## What's in the QuickStart Library seed?
96
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").
97
+ The **QuickStart Library seed** contains a similar structure to the **Quickstart seed*.
98
+ It's modified to build and test a library instead of an application.
99
+
100
+ Consequently, there are _many different files_ in the project,
101
+ most of which you can [learn about later](library-setup-anatomy.html "Library Setup Anatomy").
103
102
104
- block core-files
105
- a#app-files
106
- :marked
107
- Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
103
+ Focus on the following TypeScript (`.ts`) files in the **`/src`** folder.
108
104
109
- .filetree
110
- .file src
105
+ .filetree
106
+ .file src
107
+ .children
108
+ .file demo
111
109
.children
112
110
.file app
113
111
.children
114
112
.file app.component.ts
115
113
.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 ='.' )
114
+ .file lib
115
+ .children
116
+ .file component
117
+ .children
118
+ .file lib.component.ts
119
+ .file service
120
+ .children
121
+ .file lib.service.ts
122
+ .file index.ts
123
+ .file module.ts
124
+
125
+ + makeTabs(`
126
+ quickstart-lib/ts/src/demo/app/app.component.ts,
127
+ quickstart-lib/ts/src/demo/app/app.module.ts,
128
+ quickstart-lib/ts/src/lib/component/lib.component.ts,
129
+ quickstart-lib/ts/src/lib/service/lib.service.ts,
130
+ quickstart-lib/ts/src/lib/index.ts,
131
+ quickstart-lib/ts/src/lib/module.ts
132
+ ` , '' , `
133
+ src/demo/app/app.component.ts,
134
+ src/demo/app/app.module.ts,
135
+ src/lib/component/lib.component.ts,
136
+ src/lib/service/lib.service.ts,
137
+ src/lib/index.ts,
138
+ src/lib/module.ts
139
+ ` )( format ='.' )
127
140
128
141
:marked
129
142
Each file has a distinct purpose and evolves independently as the application grows.
130
143
131
144
Files outside `src/` concern building, deploying, and testing your app.
132
145
They include configuration files and external dependencies.
133
146
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.
147
+ Files inside `src/lib` "belong" to your library, while `src/demo` contains a demo application
148
+ that loads your library.
137
149
150
+ Libraries do not run by themselves, so it's very useful to have this "demo" app while developing
151
+ to see how your library would look like to consumers.
152
+
138
153
The following are all in `src/`
139
154
140
155
style td, th {vertical-align: top}
@@ -145,29 +160,36 @@ table(width="100%")
145
160
th File
146
161
th Purpose
147
162
tr
148
- td <ngio-ex >app/app.component.ts</ngio-ex >
163
+ td <ngio-ex >demo/ app/app.component.ts</ngio-ex >
149
164
td
150
165
: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 >
166
+ A demo component that renders the library component and a value from the library service.
167
+ tr
168
+ td <code >demo/app/app.module.ts</code >
169
+ td
170
+ :marked
171
+ A demo `NgModule` that imports the Library `LibModule`.
172
+ tr
173
+ td <ngio-ex >lib/component/app.component.ts</ngio-ex >
174
+ td
175
+ :marked
176
+ A sample library component that renders an `h2` tag.
177
+ tr
178
+ td <code >lib/service/lib.service.ts</code >
156
179
td
157
180
: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.
181
+ A sample library service that exports a value.
161
182
tr
162
- td <ngio-ex >main .ts</ngio-ex >
183
+ td <code >lib/index .ts</code >
163
184
td
164
185
: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.
186
+ The public API of your library, where you choose what to export to consumers.
187
+ tr
188
+ td <code >lib/module.ts</code >
189
+ td
190
+ :marked
191
+ The library's main `NgModule`, `LibModule`.
192
+
171
193
172
194
173
195
.l-main-section
@@ -184,6 +206,19 @@ table(width="100%")
184
206
185
207
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html "Angular learning path").
186
208
209
+
210
+ .l-main-section
211
+ :marked
212
+ ## Appendix: library-setup-anatomy
213
+
214
+ content
215
+
216
+ .l-main-section
217
+ :marked
218
+ ## Appendix: testing libraries
219
+
220
+ content
221
+
187
222
= ============
188
223
189
224
.l-main-section
0 commit comments