Thu Dec 08 2016
Paul Shan
I’m using ember 2.10.0 hereIn the 1st part of our Ember 2.10.0 tutorial series, we have already covered an overview and installation of ember. If you’ve missed the first part and not aware of installation and overview, kindly read the first part. So, after completing installation of ember cli, we scaffolded a new ember application by using the following command.
ember new yourProjectName
And we also ran the application using the command below.
ember server
At the end, we found the output page in port 4200
in the browser.
Now when we have a project yourProjectName
; in our case let us name it as MailBox
, we can once go through the application architecture.
MailBox
we can see many configuration files including package.json
. Apart from those files, there are few folders too; whose functionality is discussed below.
ember add-ons
which are installed; as ember add-ons
are nothing but node modules.bower.json
and restarts the app for any new installation.vendor/
folder. Remember, while managing your ember-cli-build.js
you should only import assets, located in either bower_component/
or vendor/
folder.public/
folder of the project. Eg: favicon, custom fonts, robot.txt etc.environment.js
with lot of application related configurations in it.$ ember s
) to find this folder in the project directory. When the app is running, there will be multiple auto generated files in this folder.app/
and the folder names indicated what they will contain. The app.js
is the entry point of your application. In router.js
you will find router maps etc and the resolver.js
helps resolving AMD modules and also things like compiling ES6 to ES5 etc.bowser_components/
or vendor/
folders.ember cli
itself runs each things one by one, but how the application parts are being executed.
app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
The app.js
in the folder app/
is the bootstraper. You can see after importing ember
, it has extended the Ember.Application
with some options. modulePrefix
and prodModulePrefix
are kind of the name of the project, used in building modules. Resolver
helps resolving the AMD modules. The ember-resolver
by default does the conversion of ES6 to ES5 using babel.
ember-load-initializers
helps loading the initializers. There are two kind of initializers; application initializer and application instance initializer. The initializers can be used for dependency injection. Will give a brief about it later in the tutorial series.
Ember runs on convention. So even if you can see nothing in controllers
, routes
or templates
folder; ember actually created (not saved in the disk) a controller, a route and a template all named as application
. However you can override them and create your own.
$ ember s
in the root directory of your project.
Ember is convention driven. So, to change the page template which is being displayed in localhost:4200
, all we need to do is to create a template named application. Run the command below to do that.
$ ember generate template application
After running this, you will find a application.hbs
file in app/templates/
folder. Put the following code in application.hbs
and check localhost:4200
in the browser.
Hello World
$ ember generate controller application
After running the above command, an application.js
will be created in app/controllers
. Now modify that file as below.
import Ember from 'ember';
export default Ember.Controller.extend({
myVal: "Void Canvas"
});
And also change the application.hbs
a little bit.
Hello World {{myVal}}
Now the output in localhost:4200
will be like below.
SHARE THIS ARTICLE
Thu Mar 10 2016
OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.Sat Mar 01 2014
This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading