angular-cn/public/docs/js/latest/quickstart.jade

197 lines
6.7 KiB
Plaintext
Raw Normal View History

include ../../../_includes/_util-fns
:marked
Let's start from zero and build a simple Angular 2 application in JavaScript.
2015-03-02 09:01:47 -05:00
.callout.is-helpful
header Don't want JavaScript?
:marked
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.
:marked
We'll do it in six short steps
1. Create a project folder
1. Install essential libraries
1. Write the root component for our application in *app.js*
1. Bootstrap the app
1. Create an *index.html*
1. Run it
2015-03-02 09:01:47 -05:00
.l-main-section
:marked
## Create a project folder
**Create a new folder** to hold our application project, perhaps like this:
```
mkdir angular2-quickstart
cd angular2-quickstart
```
.l-main-section
:marked
## Install essential libraries
We'll use the **npm package manager** to install packages for
the libraries and development tools we need:
>angular2 - the Angular 2 library.
>[live-server](https://www.npmjs.com/package/live-server "Live-server")
a static file server that reloads the browser when files change.
We could reference the libraries on the web or download them to our project.
That isn't a sustainable development process and package loading with npm is really
easy once we have it installed.
.alert.is-helpful
:marked
Don't have npm? [Get it now](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
because we're going to use it now and repeatedly throughout this documentation.
:marked
**Open** a terminal window and enter these commands:
```
npm init -y
2015-10-18 17:31:54 -04:00
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i live-server --save-dev
```
These commands both *install* the packages and *create* an npm configuration
file named `package.json`.
The essence of our `package.json` should look like this:
+makeJson('quickstart/js/package.json', { paths: 'name, version, dependencies, devDependencies'})
:marked
There is also a `scripts` section. **Find and replace** it with the following:
+makeJson('quickstart/js/package.json', { paths: 'scripts'})
:marked
We've just extended our project world with a script command that we'll be running very soon.
2015-03-02 09:01:47 -05:00
.l-main-section
:marked
## Our first Angular component
Add a new file called *app.js* and paste the following lines:
+makeExample('quickstart/js/app.js', 'class-w-annotations')
:marked
We're creating a visual component named **`AppComponent`** by chaining the
`Component` and `Class` methods that belong to the **global Angular namespace, `ng`**.
```
var AppComponent = ng
.Component({...})
.Class({...})
```
The **`Component`** method takes a configuration object with two
properties. The `selector` property tells Angular that this is a component
controlling a host element named "my-app".
Angular creates and displays an instance of our `AppComponent`
wherever it encounters a `my-app` element.
The `template` property defines the visual appearance of the component.
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` property.
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.
This component class has the bare 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.
2015-03-02 09:01:47 -05:00
.l-main-section
:marked
## Bootstrap the app
We need to do something to put our application in motion.
Add the following to the bottom of the `app.js` file:
+makeExample('quickstart/js/app.js', 'bootstrap')
:marked
We'll wait for the browser to tell us that it has finished loading
all content and then we'll call the Angular `bootstrap` method.
The `bootstrap` method tells Angular to start the application with our
`AppComponent` at the application root.
We'd be correct to guess that someday our application will
consist of more components arising in tree-like fashion from this root.
### Wrapped in an IIFE
We don't want to pollute the global namespace.
We don't need an application namespace yet.
So we'll surround the code in a simple IIFE
("Immediately Invoked Function Execution")
wrapper.
Here is the entire file:
+makeExample('quickstart/js/app.js', 'dsl')
2015-03-03 16:50:44 -05:00
.l-main-section
:marked
## Create an *index.html*
2015-03-02 09:01:47 -05:00
**Add a new `index.html`** file to the project folder and enter the following HTML
2015-03-04 08:27:48 -05:00
+makeExample('quickstart/js/index.html', null, 'index.html')(format="")
2015-03-03 16:50:44 -05:00
.l-sub-section
:marked
Our app loads two script files in the `<head>` element:
>***angular2.sfx.dev.js***, the Angular 2 development library that puts
Angular in the global `ng` namespace.
>***app.js***, the application JavaScript we just wrote.
In the `<body>`, there's an element called `<my-app>`.
This is the placeholder for the *root* of the
application. Angular displays our application here.
2015-03-02 09:01:47 -05:00
.l-main-section
:marked
## Run it!
We need a file server to serve the static assets of our application
(*index.html* and *app.js*).
For this example we'll use the **live-server** that we installed with `npm`
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 start
.alert.is-helpful
:marked
That's the `npm` command we added earlier to the `scripts` section of `package.json`
:marked
**live-server** loads the browser for us and refreshes the page as we make
changes to the application.
In a few moments, a browser tab should open and display
figure.image-display
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:marked
### Make some changes
The `live-server` detects changes to our files and refreshes the browser page for us automatically.
Try changing the message to "My SECOND Angular 2 app".
The `live-server` sees that change and reloads the browser.
Keep `live-server` running in this terminal window and keep trying changes.
You can stop it anytime with `Ctrl-C`.
**Congratulations! We are in business** ... and ready to take
our app to the next level.