Skip to content

Commit b3529f2

Browse files
lockslocks
authored
Merge pull request ember-learn#343 from ember-learn/fix-2.2
Fixing index.md files for 2.2
2 parents 6ebe755 + 70b7b08 commit b3529f2

File tree

16 files changed

+828
-804
lines changed

16 files changed

+828
-804
lines changed

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)