I am brand new to EmberJS, and am going through a tutorial. I am at the part of the tutorial that starts talking about creating services and injecting them into your controllers (I'm not 100% sure if its a controller, but I'm coming from AngularJS, and it seems pretty similar).
In the terminal in my Ember project, I run the command ember g service authentication. I can see that the service was created in the services directory of my app in the file authentication.js. When I try injecting it into my controller however, I get this issue in the browser when I serve up the app locally,
Error: Assertion Failed: Attempting to inject an unknown injection: 'service:authentication
Could this be because I am using a version of Ember that is newer than in the tutorial, and there is a different way to inject services now? I ask that because this is the syntax of the service in the tutorial
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
and this is the syntax of what I have now, auto-created when the project was built with ember new
import Service from '#ember/service';
export default Service.extend({
records: []
});
org.js "Where service is being injected"
import Route from '#ember/routing/route';
export default Route.extend({
authentication: Ember.inject.service(),
setupController(controller) {
this._super(...arguments);
}
});
Thanks you everyone for all the information about EmberJS.However It turns out all I needed to do was restart my local server -.-
In ember version 2.16, you can leverage javascript module api for importing.
Refer this blog post
Refer this full list
if your ember version is below 2.16, then
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
if ember version is >= 2.16 then the below is the right way to import,
import Service from '#ember/service';
export default Service.extend({
records: []
});
Looks like you are using Ember 2.16 (as others have answered it uses the new components modularization and the tutorial you are following looks like 2.15 or prior, as you have also mentioned in your post).
It makes sense that you should use new modules in your new route too:
import Route from '#ember/routing/route';
import { inject as service } from "#ember/service";
export default Route.extend({
authentication: service()
});
One acclaration: the code you are showing is a route class (there are controllers on the route hierarchy, and also there are components that are not part of the route hierarchy). You will be able to inject your brand-new service in any of the mentioned levels.
Related
I am using EmberJS with django. For my API do I want to use JSONAPI. For this I installed Django rest framework json api. And in Ember do I use the JSONAPIAdapter.
When my Ember app tries to get /appointments/ everything is fine and
"type": "Appointment"
but when my Ember Store tries to save an appointment it goes to the correct URL but
"type": "appointments"
after some testing I concluded that the only type that works is "Appointment", not "appointment" and neither "appointments" or "Appointments".
I don't know why the Ember JSONAPIAdapter does this, but is there a way to fix this problem?
The JSON API spec itself doesn't care if type is singular, plural, dasherized, underscored, etc... It is agnostic about inflection rules.
But Ember uses a convention by default (the examples at JSON API spec use the same convention). Ember's JSONAPIAdapter will pluralize and dasherize your types by default.
The important thing, is that your client and your server use the same convention. I think that's your problem.
If your server uses another convention you could customize your JSONAPIAdapter:
import DS from 'ember-data';
import { underscore } from '#ember/string';
export default DS.JSONAPIAdapter.extend({
pathForType(type) {
return underscore(type);
}
});
I have just started working with ember2.5.1. I wanted to try and create an easy service, and have a component implement it. The problem is that the service is always undefined, and I can't seem to call its methods.
/components/status-component.js
import Ember from 'ember';
export default Ember.Component.extend({
logger: Ember.inject.service(),
actions: {
test() {
this.get('logger').log("testing");
}
}
});
/services/logger.js
import Ember from 'ember';
export default Ember.Service.extend({
log(message) {
console.log(message);
}
});
Other information: I also attempted making routable components, and I'm not sure if that's messing up the services? I essentially have a route pointing to a dummy status-proxy-component.hbs which has the {{status-component}} within it. status-component.hbs is another file.
Any idea why this might not be working? Am I just plain out missing something from services, or is the proxy messing it up?
You must use the get() function to get component properties.
this.get('logger').log("testing");
I had the same problem with Ember 2.4.2; the service was defined in the correct location and would appear in the ember build output, but not in my running ember serve.
The problem turned out to be the hot reloading not picking up on the new service. Killing the server and re-running ember serve allowed the service to work normally.
I am using Ember.js 2.3 (and Ember-Data 2.3). I'm setting up a simple user auth process using Auth0. Nothing fancy yet, just installed Auth0 according to:
https://auth0.com/docs/quickstart/spa/ember2js/no-api
Now, my setup is pretty much exactly the same as the project given here. However, it seems that I can only access the session from application.hbs and not any other template. Or route. Or anything else.
So this handlebars snippet:
{{#if session.isAuthenticated}}
{{session.data.authenticated.profile.name}}
{{else}}
NOPE
{{/if}}
This works on application.hbs, but nowhere else. This does not make sense to me. If Auth0 itself says that session.data can be accessed from any template, and that such a handlebars snippet even exists, there must be something I'm missing. I need to be able to show certain portions of the client side as well as restrict some actions based on the currently signed-in user (and whether someone is actually signed in ), all of which are included in the session.data object.
It doesn't seem appropriate to pass this object to every component I'm going to create, and the only way I can think of getting this data right now is to manually get it from localStorage. I could perhaps make this manual process a mixin and have it included everywhere but before I try to find roundabout solutions, I want to make sure that I'm not missing something in the implementation itself.
How would I be able to access the session token throughout the application aside from application.hbs itself?
EDIT: Updating question in response to comments. My protected route looks like this:
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
});
I am still unable to get session data, unfortunately.
In ember-simple-auth session is a service which You need to inject to the other routes. So if you want to use the session data other than the application template, you need to extend those routes with AuthenticatedRouteMixin
(just like you did in routes/home.js). In controllers you need to inject the service, for example:
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
session: Ember.inject.service('session')
…
});
Take a look at ember-simple-auth.
You can find another implementation if you check ember-simple-auth-token
Edit:
Try this in your routes/protected_route.js (it works for me)
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
session: Ember.inject.service('session'),
actions: {
invalidateSession: function() {
this.get('session').invalidate();
}
}
});
How to specify which controller to use in a route in ember 2.0?
Default is that each route has its own controller and if I don't have code for a controller then a default empty controller is generated at runtime.
I want to specify that several routes share the same controller (and model). I see that in the documentation to an older version of ember it is possible to specify the controller with the "controllerName" property in the routes definition but that part of the documentation has been removed for the lastest ember version. And when I test the controllerName property it doesn't work.
It's not exactly what you are looking for but you could extend the controller that you want to use on the other routes.
import FooIndexController from 'ember-app/foo/index/controller';
export default FooIndexController.extend({});
You may also consider a mixin if you have a lot of code that should be shared by many controllers. It can be a much cleaner solution.
import Ember from 'ember';
import BaseController from 'ember-app/mixins/base-controller';
export default Ember.Controller.extend(BaseController, {
// Code specific to _this_ controller lives here
});
I figured it out. It turns out controllerName does work after all.
I just did this:
// route/home/books/book/details
import Ember from 'ember';
export default Ember.Route.extend({
controllerName: "home/books/book/index",
});
Then book and book/details shares controller. They already share model because the details route is a sub-route of book. So it works nicely.
In the official Ember documentation is a section describing automatically generated controllers, once the model in a route has been set:
http://emberjs.com/guides/routing/generated-objects/#toc_generated-controllers
I wonder what would be the explicit code pendant to this process? In the doc it says "If you did not define it, one will be generated for you." and I assume, this does not happen in form of some auto-generated code, but in memory only.
Can someone show how the simplest version of an
ObjectController
ArrayController
Controller
would look like if you generated them in Ember-CLI by hand?
If you generated ObjectController, ArrayController and Controller by hand using Ember-CLI they would each be empty, as follows:
ObjectController:
import Ember from 'ember';
export default Ember.ObjectController.extend({
});
ArrayController:
import Ember from 'ember';
export default Ember.ArrayController.extend({
});
Controller:
import Ember from 'ember';
export default Ember.Controller.extend({
});
You can see the that these are the blueprints Ember-CLI uses to generate the controllers by checking the Ember-CLI source here.
You'll notice that the changeset I've linked to is removing the blueprints that generate controllers for the aforementioned controllers. I've done this to emphasize that Ember eventually be removing support for controllers following the 2.0 release. See the section entitled Routable Components in The Road to Ember 2.0 RFC.