Skip to content

Commit 6ebe755

Browse files
lockslocks
authored
Merge pull request ember-learn#342 from ember-learn/fix-2.1
Fix index.md files for 2.1
2 parents 300577b + 940a03d commit 6ebe755

File tree

14 files changed

+609
-588
lines changed

14 files changed

+609
-588
lines changed

‎guides/v2.1.0/addons-and-dependencies/index.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
As you're developing your Ember app, you'll likely run into common scenarios that aren't addressed by Ember itself, such as authentication or using SASS for your stylesheets. Ember CLI provides a common format called [Ember Addons](#toc_addons) for distributing reusable libraries to solve these problems. Additionally, you may want to make use of front-end dependencies like a CSS framework or a JavaScript datepicker that aren't specific to Ember apps. Ember CLI supports installing these packages through the standard [Bower package manager](#toc_bower).
2+
3+
## Addons
4+
5+
Ember Addons are installed using NPM (eg. `npm install --save-dev ember-cli-sass`). Addons
6+
may bring in other dependencies by modifying your project's `bower.json` file
7+
automatically.
8+
9+
You can find listings of addons on [Ember Observer](http://emberobserver.com).
10+
11+
## Bower
12+
13+
Ember CLI uses the [Bower](http://bower.io) package manager, making it easy
14+
to keep your front-end dependencies up to date. The Bower configuration file, `bower.json`, is located at the root of your Ember
15+
CLI project, and lists the dependencies for your project. Executing `bower install`
16+
will install all of the dependencies listed in `bower.json` in one step.
17+
18+
Ember CLI watches `bower.json` for changes. Thus it reloads your app if you
19+
install new dependencies via `bower install <dependencies> --save`.
20+
21+
## Other assets
22+
23+
Assets not available as an addon or Bower package should be placed in the `vendor` folder in your project.
24+
25+
## Compiling Assets
26+
27+
When you're using dependencies that are not included in an addon, you will
28+
have to instruct Ember CLI to include your assets in the build. This is done using
29+
the asset manifest file `ember-cli-build.js`. You should only try to import assets
30+
located in the `bower_components` and `vendor` folders.
31+
32+
### Globals provided by Javascript assets
33+
34+
The globals provided by some assets (like `moment` in the below example) can be
35+
used in your application without the need to `import` them. Provide the asset
36+
path as the first and only argument.
37+
38+
```javascript {data-filename=ember-cli-build.js}
39+
app.import('bower_components/moment/moment.js');
40+
```
41+
42+
You will need to add `"moment": true` to the `predef` section in `.jshintrc` to
43+
prevent JSHint errors about using an undefined variable.
44+
45+
### AMD Javascript modules
46+
47+
Provide the asset path as the first argument, and the list of modules and exports as the second.
48+
49+
```javascript {data-filename=ember-cli-build.js}
50+
app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
51+
exports: {
52+
'ic-ajax': [
53+
'default',
54+
'defineFixture',
55+
'lookupFixture',
56+
'raw',
57+
'request'
58+
]
59+
}
60+
});
61+
```
62+
63+
You can now `import` them in your app. Eg. `import { raw as icAjaxRaw } from 'ic-ajax';`
64+
65+
### Environment Specific Assets
66+
67+
If you need to use different assets in different environments, specify an object as the first parameter. That object's key should be the environment name, and the value should be the asset to use in that environment.
68+
69+
```javascript {data-filename=ember-cli-build.js}
70+
app.import({
71+
development: 'bower_components/ember/ember.js',
72+
production: 'bower_components/ember/ember.prod.js'
73+
});
74+
```
75+
76+
If you need to import an asset in only one environment you can wrap `app.import` in an `if` statement.
77+
For assets needed during testing, you should also use the `{type: 'test'}` option to make sure they
78+
are available in test mode.
79+
80+
```javascript {data-filename=ember-cli-build.js}
81+
if (app.env === 'development') {
82+
// Only import when in development mode
83+
app.import('vendor/ember-renderspeed/ember-renderspeed.js');
84+
}
85+
if (app.env === 'test') {
86+
// Only import in test mode and place in test-supoprt.js
87+
app.import(app.bowerDirectory + '/sinonjs/sinon.js', { type: 'test' });
88+
app.import(app.bowerDirectory + '/sinon-qunit/lib/sinon-qunit.js', { type: 'test' });
89+
}
90+
```
91+
92+
### CSS
93+
94+
Provide the asset path as the first argument:
95+
96+
```javascript {data-filename=ember-cli-build.js}
97+
app.import('bower_components/foundation/css/foundation.css');
98+
```
99+
100+
All style assets added this way will be concatenated and output as `/assets/vendor.css`.
101+
102+
### Other Assets
103+
104+
All other assets like images or fonts can also be added via `import()`. By default, they
105+
will be copied to `dist/` as they are.
106+
107+
```javascript {data-filename=ember-cli-build.js}
108+
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');
109+
```
110+
111+
This example would create the font file in `dist/font-awesome/fonts/fontawesome-webfont.ttf`.
112+
113+
You can also optionally tell `import()` to place the file at a different path.
114+
The following example will copy the file to `dist/assets/fontawesome-webfont.ttf`.
115+
116+
```javascript {data-filename=ember-cli-build.js}
117+
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
118+
destDir: 'assets'
119+
});
120+
```
121+
122+
If you need to load certain dependencies before others, you can set the `prepend` property equal to `true` on the second argument of `import()`. This will prepend the dependency to the vendor file instead of appending it, which is the default behavior.
123+
124+
```javascript {data-filename=ember-cli-build.js}
125+
app.import('bower_components/es5-shim/es5-shim.js', {
126+
type: 'vendor',
127+
prepend: true
128+
});
129+
```

‎guides/v2.1.0/addons-and-dependencies/managing-dependencies.md

Lines changed: 3 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,3 @@
1-
As you're developing your Ember app, you'll likely run into common scenarios that aren't addressed by Ember itself, such as authentication or using SASS for your stylesheets. Ember CLI provides a common format called [Ember Addons](#toc_addons) for distributing reusable libraries to solve these problems. Additionally, you may want to make use of front-end dependencies like a CSS framework or a JavaScript datepicker that aren't specific to Ember apps. Ember CLI supports installing these packages through the standard [Bower package manager](#toc_bower).
2-
3-
## Addons
4-
5-
Ember Addons are installed using NPM (eg. `npm install --save-dev ember-cli-sass`). Addons
6-
may bring in other dependencies by modifying your project's `bower.json` file
7-
automatically.
8-
9-
You can find listings of addons on [Ember Observer](http://emberobserver.com).
10-
11-
## Bower
12-
13-
Ember CLI uses the [Bower](http://bower.io) package manager, making it easy
14-
to keep your front-end dependencies up to date. The Bower configuration file, `bower.json`, is located at the root of your Ember
15-
CLI project, and lists the dependencies for your project. Executing `bower install`
16-
will install all of the dependencies listed in `bower.json` in one step.
17-
18-
Ember CLI watches `bower.json` for changes. Thus it reloads your app if you
19-
install new dependencies via `bower install <dependencies> --save`.
20-
21-
## Other assets
22-
23-
Assets not available as an addon or Bower package should be placed in the `vendor` folder in your project.
24-
25-
## Compiling Assets
26-
27-
When you're using dependencies that are not included in an addon, you will
28-
have to instruct Ember CLI to include your assets in the build. This is done using
29-
the asset manifest file `ember-cli-build.js`. You should only try to import assets
30-
located in the `bower_components` and `vendor` folders.
31-
32-
### Globals provided by Javascript assets
33-
34-
The globals provided by some assets (like `moment` in the below example) can be
35-
used in your application without the need to `import` them. Provide the asset
36-
path as the first and only argument.
37-
38-
```javascript {data-filename=ember-cli-build.js}
39-
app.import('bower_components/moment/moment.js');
40-
```
41-
42-
You will need to add `"moment": true` to the `predef` section in `.jshintrc` to
43-
prevent JSHint errors about using an undefined variable.
44-
45-
### AMD Javascript modules
46-
47-
Provide the asset path as the first argument, and the list of modules and exports as the second.
48-
49-
```javascript {data-filename=ember-cli-build.js}
50-
app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
51-
exports: {
52-
'ic-ajax': [
53-
'default',
54-
'defineFixture',
55-
'lookupFixture',
56-
'raw',
57-
'request'
58-
]
59-
}
60-
});
61-
```
62-
63-
You can now `import` them in your app. Eg. `import { raw as icAjaxRaw } from 'ic-ajax';`
64-
65-
### Environment Specific Assets
66-
67-
If you need to use different assets in different environments, specify an object as the first parameter. That object's key should be the environment name, and the value should be the asset to use in that environment.
68-
69-
```javascript {data-filename=ember-cli-build.js}
70-
app.import({
71-
development: 'bower_components/ember/ember.js',
72-
production: 'bower_components/ember/ember.prod.js'
73-
});
74-
```
75-
76-
If you need to import an asset in only one environment you can wrap `app.import` in an `if` statement.
77-
For assets needed during testing, you should also use the `{type: 'test'}` option to make sure they
78-
are available in test mode.
79-
80-
```javascript {data-filename=ember-cli-build.js}
81-
if (app.env === 'development') {
82-
// Only import when in development mode
83-
app.import('vendor/ember-renderspeed/ember-renderspeed.js');
84-
}
85-
if (app.env === 'test') {
86-
// Only import in test mode and place in test-supoprt.js
87-
app.import(app.bowerDirectory + '/sinonjs/sinon.js', { type: 'test' });
88-
app.import(app.bowerDirectory + '/sinon-qunit/lib/sinon-qunit.js', { type: 'test' });
89-
}
90-
```
91-
92-
### CSS
93-
94-
Provide the asset path as the first argument:
95-
96-
```javascript {data-filename=ember-cli-build.js}
97-
app.import('bower_components/foundation/css/foundation.css');
98-
```
99-
100-
All style assets added this way will be concatenated and output as `/assets/vendor.css`.
101-
102-
### Other Assets
103-
104-
All other assets like images or fonts can also be added via `import()`. By default, they
105-
will be copied to `dist/` as they are.
106-
107-
```javascript {data-filename=ember-cli-build.js}
108-
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');
109-
```
110-
111-
This example would create the font file in `dist/font-awesome/fonts/fontawesome-webfont.ttf`.
112-
113-
You can also optionally tell `import()` to place the file at a different path.
114-
The following example will copy the file to `dist/assets/fontawesome-webfont.ttf`.
115-
116-
```javascript {data-filename=ember-cli-build.js}
117-
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
118-
destDir: 'assets'
119-
});
120-
```
121-
122-
If you need to load certain dependencies before others, you can set the `prepend` property equal to `true` on the second argument of `import()`. This will prepend the dependency to the vendor file instead of appending it, which is the default behavior.
123-
124-
```javascript {data-filename=ember-cli-build.js}
125-
app.import('bower_components/es5-shim/es5-shim.js', {
126-
type: 'vendor',
127-
prepend: true
128-
});
129-
```
1+
---
2+
redirect: addons-and-dependencies/index
3+
---

‎guides/v2.1.0/applications/applications-and-instances.md

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
Every Ember application is represented by a class that extends
2-
`Ember.Application`. This class is used to declare and configure the many
3-
objects that make up your app.
4-
5-
As your application boots, it creates an `Ember.ApplicationInstance` that is
6-
used to manage its stateful aspects. This instance acts as a container for the
7-
objects instantiated for your app.
8-
9-
Essentially, the `Application` *defines your application* while the
10-
`ApplicationInstance` *manages its state*.
11-
12-
This separation of concerns not only clarifies the architecture of your app, it
13-
can also improve its efficiency. This is particularly true when your app needs
14-
to be booted repeatedly during testing and / or server-rendering (e.g. via
15-
[FastBoot](https://github.com/tildeio/ember-cli-fastboot)). The configuration of
16-
a single `Application` can be done once and shared among multiple stateful
17-
`ApplicationInstance` instances. These instances can be discarded once they're
18-
no longer needed (e.g. when a test run or FastBoot request has finished).
1+
---
2+
redirect: applications/index
3+
---

‎guides/v2.1.0/applications/index.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Every Ember application is represented by a class that extends
2+
`Ember.Application`. This class is used to declare and configure the many
3+
objects that make up your app.
4+
5+
As your application boots, it creates an `Ember.ApplicationInstance` that is
6+
used to manage its stateful aspects. This instance acts as a container for the
7+
objects instantiated for your app.
8+
9+
Essentially, the `Application` *defines your application* while the
10+
`ApplicationInstance` *manages its state*.
11+
12+
This separation of concerns not only clarifies the architecture of your app, it
13+
can also improve its efficiency. This is particularly true when your app needs
14+
to be booted repeatedly during testing and / or server-rendering (e.g. via
15+
[FastBoot](https://github.com/tildeio/ember-cli-fastboot)). The configuration of
16+
a single `Application` can be done once and shared among multiple stateful
17+
`ApplicationInstance` instances. These instances can be discarded once they're
18+
no longer needed (e.g. when a test run or FastBoot request has finished).

0 commit comments

Comments
 (0)