201 lines
7.3 KiB
Plaintext
201 lines
7.3 KiB
Plaintext
include ../../../../_includes/_util-fns
|
|
|
|
:markdown
|
|
Let's start from zero and build a simple Angular 2 application in JavaScript.
|
|
|
|
.callout.is-helpful
|
|
header Don't want JavaScript?
|
|
:markdown
|
|
Although we're getting started in JavaScript, you can also write Angular 2 apps
|
|
in TypeScript and Dart by selecting either of those languages from the combo-box in the banner.
|
|
|
|
:markdown
|
|
We'll do it in four short steps
|
|
1. Create a new project folder and an *index.html*
|
|
1. Write the root component for our application in *app.js*
|
|
1. Bootstrap the app
|
|
1. Run it
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Create a project folder and an *index.html*
|
|
|
|
Create a new folder to hold our application project, perhaps like this:
|
|
|
|
pre.prettyprint.lang-bash
|
|
code mkdir firstNgApp && cd firstNgApp
|
|
|
|
:markdown
|
|
Then add a new `index.html` file to the project folder and enter the following HTML
|
|
|
|
+makeExample('gettingstarted', 'js/index.html', 'index.html')(format="")
|
|
|
|
.l-sub-section
|
|
:markdown
|
|
Our app loads two script files in the `<head>` element:
|
|
|
|
>***angular.js***, the Angular 2 library.
|
|
|
|
>***app.js***, the application JavaScript which we're about to write.
|
|
|
|
In the `<body>`, there's an element called `<my-app>`. This is a placeholder for the *root* of our
|
|
application. Angular will display our application content here.
|
|
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Write the *app* component
|
|
|
|
Create an *app.js* file with the following content:
|
|
|
|
+makeExample('gettingstarted', 'js/app-class-w-annotations.js')
|
|
|
|
:markdown
|
|
When we step back and squint, we see that
|
|
we're creating a visual component named **`appComponent`** by chaining three methods
|
|
originating in the global Angular namespace object called, **`ng`**.
|
|
|
|
```
|
|
var appComponent = ng
|
|
.Component({...})
|
|
.View({...})
|
|
.Class({...})
|
|
```
|
|
The **`Component`** method tells Angular that this is a component
|
|
controlling the element named "my-app".
|
|
|
|
+makeExample('gettingstarted', 'js/app-component.js')
|
|
|
|
:markdown
|
|
You may remember we added such an element to our *index.html* above.
|
|
|
|
The **`View`** method identifies the HTML template
|
|
that defines the visual appearance of the component.
|
|
|
|
+makeExample('gettingstarted', 'js/app-view.js')
|
|
|
|
:markdown
|
|
We're writing the HTML template inline
|
|
in this example. Later we'll move the HTML to a view template file and
|
|
assign the template's filename to the `templateUrl`.
|
|
We'll prefer that practice for all but the most trivial templates.
|
|
|
|
The **`Class`** method is where we implement the component itself,
|
|
giving it properties and methods that bind to the view and whatever
|
|
behavior is appropriate for this part of the UI.
|
|
|
|
+makeExample('gettingstarted', 'js/app-class.js')
|
|
|
|
:markdown
|
|
This component has the minimum implementation:
|
|
a *no-op* constructor function that does nothing because there is nothing to do.
|
|
We'll see more interesting component classes in future examples.
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Run it!
|
|
|
|
We need a file server to serve the static assets of our application (*index.html* and *app.js*).
|
|
|
|
If you have python on your machine, you're in luck: python ships with a basic static file server.
|
|
Open a terminal window and enter:
|
|
|
|
pre.prettyprint.lang-bash
|
|
code python -m SimpleHTTPServer 8000
|
|
|
|
:markdown
|
|
then point a browser to http://localhost:8000 which should display our simple text message:
|
|
|
|
figure.image-display
|
|
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
|
|
|
|
:markdown
|
|
**If you don't have python**, you may have to install a server.
|
|
You might prefer one of the many node-based static servers such as
|
|
[http-server](https:/github.com/nodeapps/http-server "http-server"),
|
|
[superstatic](https://www.npmjs.com/package/superstatic "superstatic"), or
|
|
[live-server](https://www.npmjs.com/package/live-server "live-server").
|
|
|
|
:markdown
|
|
For this example we'll use **live-server** because it performs a live reload by default and it's
|
|
fun to watch the browser update as we make changes.
|
|
|
|
Open a terminal (or Windows/Linux command line) and enter:
|
|
|
|
pre.prettyprint.lang-bash
|
|
code npm install -g live-server
|
|
|
|
.callout.is-helpful
|
|
:markdown
|
|
Install [**node** and **npm**](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
|
|
first if you haven't already. They're indispensible front-end developer tools.
|
|
|
|
:markdown
|
|
After it finishes installing, start the server on port 8000
|
|
|
|
pre.prettyprint.lang-bash
|
|
code live-server --port=8000
|
|
|
|
:markdown
|
|
**live-server** loads the browser for us and refreshes the page as we make
|
|
changes to the application.
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Add TypeScript Type Definition Files (optional)
|
|
|
|
"*Wait*", you say, "*we're writing in JavaScript, not TypeScript!*".
|
|
Indeed we are. But code editors (such as [Visual Studio Code](https://code.visualstudio.com/) and
|
|
[Web Storm](https://www.jetbrains.com/webstorm/features/))
|
|
can improve the JavaScript development experience by providing type information and
|
|
displaying API documentation ("intellisense") based on TypeScript type definition files.
|
|
|
|
We can download type definitions files for third-party libraries such as Angular
|
|
from the [DefinitelyTyped](http://definitelytyped.org/) repository using the
|
|
[**tsd package manager**](https://www.npmjs.com/package/tsd "TSD Package Manager").
|
|
|
|
If you haven't already installed the *tsd*, do it now
|
|
with an npm command entered in a terminal or command window.
|
|
|
|
pre.prettyprint.lang-bash
|
|
code npm install -g tsd
|
|
|
|
:markdown
|
|
Now let's download and install the core set of type definitions files for Angular development
|
|
in the root directory of our application.
|
|
|
|
pre.prettyprint.lang-bash
|
|
code tsd query angular2 es6-promise rx rx-lite jasmine --action install --save
|
|
|
|
:markdown
|
|
We'll find a ***typings*** folder in the root directory
|
|
with subfolders for each of the five downloaded type definition files (angular, es6-promise, rx, rx-lite, jasmine).
|
|
Type definition files have names ending in ***d.ts***.
|
|
There's also a summary ***tsd.d.ts*** file containing references to each of them.
|
|
|
|
Check your editor's documentation for instructions on using the *tsd.d.ts* file to
|
|
light up type checking and intellisense for these libraries.
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## It's all a tree
|
|
|
|
We can think of Angular apps as a tree of components.
|
|
|
|
The `AppComponent` that we've been talking about acts as the top
|
|
level container - the root of the tree - for the rest of our application.
|
|
There's nothing special about the `AppComponent` name and we can use whatever makes sense to us.
|
|
|
|
We've pinned the root component to an element in the `index.html` file where our application will
|
|
render its view. The element is called `<my-app>` but there is nothing special about this
|
|
name either.
|
|
|
|
The *root component* loads the initial template for the application.
|
|
That template could load other components such as menu bars, views, and forms
|
|
that display information and respond to user gestures.
|
|
|
|
And these components could load yet more components until the browser page became a deep tree
|
|
of nested functionality.
|
|
|
|
We'll walk through examples of these scenarios in the following pages.
|