Once you have Node for Windows installed; you can launch Node.js command prompt from Start Menu; change the directory to where you want to create the Ember projects
- Its recommend to use some short path for the projects; say C:\src\Ember; I am using C:\Users\You\Ember
In the Node.js command prompt give following commands
>npm install ember-cli –g
>npm install bower -g
>bower install ember
>ember new HelloEmber
- We installed ember-cli and bower using Node Package Manager; -g is for global; if you have already installed them; you may skip these
- We installed ember using bower
- Using ember we created a HelloEmber web application (it will be created in C:\Users\You\Ember\HelloEmber)
You must have noted; its downloading lots of stuff; and plethora of files are being generated; to improve the system performance open Node.js command prompt with Run As Administrator and navigate to your Ember projects folder (C:\Users\You\Ember); issue the following commands
>npm install ember-cli-windows -g
As our web app has already been created and next we need to run some sort of web server and try the created app; Ember CLI has it covered and its recommended that you run the Ember server from the Administrative command prompt as well. So from the same Administrative Node.js command prompt go to your HelloEmber created folder and issue these commands
By default it will run the server at 4200 and you can navigate to it at http://localhost:4200 using your preferred browser! Lets now add an ember resource; open another Node.js command prompt and navigate to C:\Users\You\Ember\HelloEmber and issue ember generate resource command there; if you open this folder in “Visual Studio Code” you will notice it will add/change six files; adding route in app\router.js and resources.js file app\routes, the model in app\models and its associated view (handlebars based template) in app\templates. Also note that we don't have to restart the server, it picks the file changes and if needed recompile the things. Here’s what I did!
- Notice that I opened Explorer and from there selected the folder and used Open in Visual Studio Code from the context menu
- I issued >ember generate resource invoices customer:string invoiceNumber:string createDate:date posted:boolean amount:number; that generated the required model, route and template
- If we review Changes; we will learn that
- it changed app\router.js adding the route so that our "invoices router" gets invoked; think of it as the ASP.NET MVC's route table entry; instead of one magical entry that does class name matching and invoke accordingly; we need to add entries in Ember individually
- it created app\models\invoices.js; the js file for our model with the attributes that we specified on the command line; notice the use of DS.attr('type'); if we want to we can add more attributes there or make necessary changes
- it created app\routes\invoices.js; this is where we will write required code for the OURAPP/invoices route; think of it as the ASP.NET MVC's Controller
- it created app\template\invoices.hbs; the template / the view for the said route; this is where we can add our view HTML and can bind our model (if we pass it on in the router / controller) using the HTMLBars; think of HTMLBars has HTML plus the Handlebars; we will cover how to pass model and use data binding in the next post !
- It also created two test files; not covering for the sake of simplicity
- Note that controller (router), model and view are in three different locations; if you are not liking this convention; you can postfix --pod in the ember generate command and it will create router and associated template in single folder
Stay tuned for the next part in Ember series!