> For the complete documentation index, see [llms.txt](https://dsheiko.gitbook.io/ng-backbone/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dsheiko.gitbook.io/ng-backbone/writing_our_first_component.md).
# Writing Our First Component
As we specified in `tsconfig.json` location for our first component will be `src/app.ts`. Within the file we import from the ngBackbone core module class `View` and decorator `@Component`. By using `@Component` we declare that underlying view has to bind to `ng-hello` element of the DOM and use `Hello World!` string as template:
```javascript
import { Component, View } from "ng-backbone";
@Component({
el: "ng-hello",
template: `Hello World!`
})
class HelloView extends View {
}
let hello = new HelloView();
hello.render();
```
To compile TypeScript in JavaScript we run:
```
npm run build
```
In HTML we just need to set binding element `ng-hello` that we refer in the component:
```markup
Hello world!
Loading ...
```
Something is missing, isn't it? Of course we need to load Backbone and its dependencies:
```markup
```
Well, we have Backbone, but have to oad the app itself. According to the `tsconfig.json` TypeScript compiler has generated CommonJS-compliant module. Thus to run it we have at least two options:
* We can use SystemJs/Webpack to load it asynchronously
* We can bundle it for in-browser use with Browserify
## Bundling App with Browserify
Browserify bundles the source CommonJS module with all the dependent modules encountered recursively into a single file, suitable for in-browser use. If you have not installed Browserify you can do it that easy:
```
sudo npm i browserify -g
```
With Browserify we bundle our app source like that:
```
browserify build/src/app.js -o build/app.bundled.js
```
When we have `build/app.bundled.js` we load our app straight in the HTML:
## Loading App with SystemJS
On the contrary to Browserify, SystemJs loads the module and all the encountered dependencies on-the-fly. If we choose this way, here is what we need to add to HTML:
```markup
```
In any case we result with 'Hello World!' string rendered in the browser:
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://dsheiko.gitbook.io/ng-backbone/writing_our_first_component.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.