Category: emberjs

EmberJS – Router ”; Previous Next Router is a core feature of EmberJs which translates an URL into a series of templates and represents the state of an application.The Ember uses the router to map the URL to a route handler. The router matches the current URL to other routes which are used for loading data, displaying the templates and to set up an application state. Route handler performs some actions such as − It provides the template. It defines the model and it will be accessible to the template. If there is no permission for user to visit the particular part of an app, then router will redirect to a new route. The following table lists down the different routers in Ember.js along with their description − S.No. Types & Description 1 Defining Routes The router matches the current URL with routes responsible for displaying template, loading data and setting up an application state. 2 Specifying a Route”s Model To specify a routes model, you need a template to display the data from the model. 3 Rendering a Template The routes are used to render the external template to the screen. 4 Redirecting It is a URL redirection mechanism that redirects the user to a different page when the requested URL is not found. 5 Preventing and Retrying Transitions The transition.abort() and transition.retry() methods can be used to abort and retry the transition respectively during a route transition. 6 Loading/Error Substates Ember router provides information of a route loading and errors which occur when loading a route. 7 Query Parameters Query parameters come into view at the right side of the “?” mark in a URL represented as optional key-value pairs. 8 Asynchronous Routing Ember.js router has the ability to handle complex async logic within an application by using asynchronous routing. Print Page Previous Next Advertisements ”;

EmberJS – Ember Inspector ”; Previous Next Ember inspector is a browser add-on which is used to debug the Ember applications. The Ember inspector includes the following topics − S.No. Ember inspector Ways & Description 1 Installing the Inspector You can install the Ember inspector to debug your application. 2 Object Inspector The Ember inspector allows interacting with the Ember objects. 3 The View Tree The view tree provides the current state of an application. 4 Inspecting Routes, Data Tab and Library Info You can see the list of application”s routes defined by the inspector and the Data tab is used to display the list of model types. 5 Debugging Promises Ember inspector provides promises based on their states. 6 Inspecting Objects and Rendering Performance Use the Container for inspecting the object instances and compute the application”s render time by using the Render Performance option. Print Page Previous Next Advertisements ”;

EmberJS – Installation ”; Previous Next It is easy to configure Ember.js in your system. By using the Ember CLI (Command Line Interface) utility, you can create and manage your Ember projects. The Ember CLI deals with different kinds of application asset management such as concatenation, minification and versioning and also provide generators to produce components, routes etc. To install Ember CLI, you need to have the following dependencies − Git − It is a open source version control system for tracking the changes made in the files. For more information, check the official website of git. Ember uses Git to manage its dependencies. Installing Git on Linux: Install the Git on Linux by using this link – http://git-scm.com/download/linux Installing Git on Mac: Install the Git on Mac OS by using this link – https://git-scm.com/download/mac Installing Git on Linux: Install the Git on Windows by using this link – https://git-scm.com/download/win Node.js and npm − Node.js is an open source, used for developing server side and networking applications. It is written in JavaScript. NPM is a node package manager used for installing, sharing and managing the dependencies in the projects. Ember CLI uses Node.js run time and npm to get the dependencies. Bower − It is used for managing the components such as HTML, CSS, JavaScript, image files etc and can be installed by using the npm. Watchman − This optional dependency can be used to watch the files or directories and execute some actions when they change. PhantomJS − This optional dependency can be used for running browser based unit tests to interact with web page. Installing Ember CLI Ember CLI integrates Ember patterns into development process and focuses easily on the developer productivity. It is used for creating Ember apps with Ember.js and Ember data. You can install Ember using npm as in the command given below − npm install -g ember-cli To install the beta version, use the following command − npm install -g [email protected] To check the successful installation of Ember, use the following command − ember -v After executing the above command, it will show something like this − ember-cli: 2.10.1 node: 0.12.7 os: win32 ia32 Print Page Previous Next Advertisements ”;

EmberJS – Creating and Running Application ”; Previous Next You can easily configure the Ember.js in your system. The installation of Ember.js is explained in the EmberJS Installation chapter. Creating Application Let us create one simple app using Ember.js. First create one folder where you create your applications. For instance, if you have created the “emberjs-app” folder, then navigate to this folder as − $ cd ~/emberjs-app Inside the “emberjs=app” folder, create a new project by using the new command − $ ember new demo-app When you create a project, new command provides the following directory structure with files and directories − |– app |– bower_components |– config |– dist |– node_modules |– public |– tests |– tmp |– vendor bower.json ember-cli-build.js package.json README.md testem.js app − It specifies the folders and files of models, routes, components, templates and styles. bower_components / bower.json − It is used for managing the components such as HTML, CSS, JavaScript, image files etc and can be installed by using the npm. The bower_components directory contains all the Bower components and bower.json contains the list of dependencies which are installed by Ember, Ember CLI Shims and QUnit. config − It contains the environment.js directory which is used for configuring the settings of an application. dist − It includes the output files which are deployed when building the app. node_modules / package.json − NPM is a node package manager for Node.js which is used for installing, sharing and managing the dependencies in the projects. The package.json file includes the current npm dependencies of an application and the listed packages get installed in the node_modules directory. public − It includes assets like images, fonts, etc. vendor − It is a directory in which the front-end dependencies such as JavaScript, CSS are not controlled by Bower go. tests / testem.js − The automated tests are stored under the tests folder and the test runner testem of Ember CLI”s is arranged in testem.js. tmp − It contains the temporary files of Ember CLI. ember-cli-build.js − It specifies how to build the app by using the Ember CLI. Running Application To run the application, navigate to the newly created project directory − $ cd demo-app We have created the new project and it is ready to run with the command given below − $ ember server Now open the browser and navigate to http://localhost:4200/. You will get the Ember Welcome page as shown in the image below − Print Page Previous Next Advertisements ”;

EmberJS – Core Concepts ”; Previous Next Ember.js has the following core concepts − Router Templates Models Components Router and Route Handlers The URL loads the app by entering the URL in the address bar and user will click a link within the app. The Ember uses the router to map the URL to a route handler. The router matches the existing URL to the route which is then used for loading data, displaying the templates and setting up an application state. The Route handler performs the following actions − It provides the template. It defines the model that will be accessible to the template. If there is no permission for the user to visit a particular part of the app, then the router will redirect to a new route. Templates Templates are powerful UI for the end-users. Ember template provides user interface look of an application which uses the syntax of Handlebars templates. It builds the front-end application, which is like the regular HTML. It also supports the regular expression and dynamically updates the expression. Model The route handlers render the model that persists information to the web server. It manipulates the data stored in the database. The model is the simple class that extends the functionality of the Ember Data. Ember Data is a library that is tightly coupled with Ember.js to manipulate with the data stored in the database. Components The component controls the user interface behavior which includes two parts − a template which is written in JavaScript a source file which is written in JavaScript that provides behavior of the components. Print Page Previous Next Advertisements ”;