How to create two separate pages in ember - javascript

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?

I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>

Related

http://localhost/admin/ route not working but works with http://localhost/admin/index.html

Hi Everyone I am working on an AngularJS project.
My project works fine on a route like: http://localhost/
But I have an admin panel like this: //localhost/admin/
So when I open this it's not working
but when I put a complete URL like this: localhost/admin/index.html#
then it works.
Project Structure is:
Please Have A look on Project Structure
If you are running the website in IIS you need to set Default Documents or check if it is set. I had the same issue a while ago and found the not all default were set.
You can create different states as per your project. For ex:
1. /login
2. /admin
3. /edit
and then you can mention configuration for each state with the html page you want to access. then you can use //localhost/admin and it will be referred by /admin state which you have created.
Code should be something like this
$stateProvider.state('admin',{
url:'/admin',
controller: 'AdminController',
templateUrl:'admin/index.html',
resolve: {
loadMyFiles:function($ocLazyLoad) { // this can be used for lazy loading of files
return $ocLazyLoad.load({
name:'MYPROJECT',
files:[
'styles/admin.css'
]
})
}
}
})

RequireJS loading a file that needs current file as dependency

I am currently building a base for AngularJS in combination with RequireJS and so far I got everything working. there's just a little thing that I do not understand at this point. I have a file which creates the angular module, when this module is created it requires a controller and assigns it to the module. The strange thing though, the controller needs the module as dependency while in the module's file the module has not been returned yet because the require statement is executed before the return statement. This somehow seems to work but it has a bad smell to it.
Module file:
// Home is defined here and can later be used in controllers (and Services)
define('home', ['require', 'angular'], function(require, angular) {
var homeModule = angular.module('AngularBase.home', ['AngularBase.core']);
homeModule.config(['$controllerProvider', '$provide', '$compileProvider', function($controllerProvider, $provide, $compileProvider) {
// We need this in order to support lazy loading
homeModule.controller = $controllerProvider.register;
homeModule.factory = $provide.factory;
// And more, not relevant at this moment
}]);
// It loads the controller that depends on this module here
require(['modules/home/controllers/homeController'], function() {
// Dependencies loaded
});
// Yet in my mind controllers that need this module can only use it when the following return statement is called.
return homeModule;
});
Controller File:
// As you can see this controller depends on home while home hasn't returned its module yet
// Yet it seems to work just fine
define(['home'], function(home) {
home.controller('homeController', ['$scope', 'homeService', function($scope, homeService) {
$scope.title = 'Home controller';
}]);
});
I assume that it is not a good approach to do it like this and therefore I need some suggestions on how to make this happen in a clean way. I thought about grabbing the AngularBase.home module via angular.module('AngularBase.home') in the controller file and defining my controller on this. This however no longer allows me to insert a mockModule for testing in this controller via RequireJS's map function.
map: {
'*' : {
'home' : 'mock-module'
}
}
Any suggestions on how to refactor this into a more clean solution?
I have found the solution to my problem. In the end it seems to be just fine to do it the way I am currently doing it. When a file is called and has a define statement in it it will wait until all dependencies are available until the function is executed. This means that the controller will actually wait for the module to finish initializing before calling its function to register itself.
The way I am doing it above is just fine.
Source: http://www.slideshare.net/iivanoo/handlebars-and-requirejs (slides 11 till 24)

filesystem based emberjs app

I'm building a filesytem based emberjs-app. But unfortunately the security won't allow me to push stuff to the history (see e.g. this but i guess that applies to all browsers).
setting the locationtype to none is fine, but I would still like to utilize the back and forward buttons and urls of the browser.
Is there a way to configure this (maybe setting the base-url to index.html, without rewriting the build process)?
edit
I call the url from my browser like this: file:///path/index.html.
in my routes.js and fileroute.js I've got this workaround:
// routes.js
export default Router.map(function() {
// this route only redirects to main
this.route('fileroute', {path: 'index.html'});
});
// routes/fileroute.js
// only for running app on filesystem
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('fileroute.projects');
}
});
So I guess each hash-change would already effect the files-url
file:///path/#differentroute
also for
file:///path/#index.html/childRoute

Nested Resources in ember-cli, messy app structure

As a newbie to both Ember.js and ember-cli, I'm having trouble making sense of what seems necessary to make my app work.
The logical hierarchy of my app is something like this:
Projects
|___Project
|___Details
|___Team Members
|___Budget
|___Planned
|___Actual
And currently, this is my router.js:
this.resource('projects');
this.resource('project', { path: 'projects/:project_id' }, function() {
this.route('details');
this.route('team');
this.route('milestones');
this.resource('budget', function(){
this.route('project-budget', { path: 'project'});
this.route('resource-budget', {path: 'team'});
});
});
What I'm having trouble with is where to put my files. Up until the point of the two nested routes under Budget, my folder structure looked like my hierarchy, but since a Resource resets the namespace, now to make it work I have to pull my Budget template, route, and controller back out to the top level (with Projects stuff), which just seems messy and like it will cause headaches when trying to maintain this thing later.
Am I doing it wrong?
Router definition can be a little tricky in Ember. Your resource/route definition in router.js should reflect your page structure. So for example, if your 'team' template should be nested inside your 'project' template, then 'team' should be nested inside of 'project' in router.js:
Router.map(function() {
this.resource('project', function() {
this.route('team');
});
});
If you use this.route() in router.js, then your folder structure should mimic the structure in router.js. Using the example above, because we're using this.route() to define 'team', your folder structure would be like this:
app/routes/project.js
app/routes/project/team.js
app/templates/project.hbs
app/templates/project/team.hbs
If, however, you choose to use use this.resource() in router.js, then you're telling Ember that you're going to reset your folder structure. So if you changed router.js to this:
Router.map(function() {
this.resource('project', function() {
this.resource('team');
});
});
...then your folder structure would be like this:
app/routes/project.js
app/routes/team.js
app/templates/project.hbs
app/templates/team.hbs
Going back to your specific question, if you feel that resetting your folder structure is messy, then you can use this.route() everywhere and forego this.resource(), because nestable this.route() landed in Ember 1.7: http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html

Ember.js Rails Error while loading route:

I'm currently reading the Master Time and Space Ember.js tutorial and trying to build the sample application. I'm building the ember app with rails using the ember-rails gem.
I have followed the instructions for building my index route, controller, model and template. However, my index.hbs template is not being rendered due to this error that I am receiving in the console:
Error while loading route: undefined logToConsole
this function logToConsole is defined within the ember.js file that the gem compiles for you.
My router is defined as app/assets/javascripts/routes/app_router.js
TimeTravel.Router.reopen({
location: "history"
});
TimeTravel.Router.map(function(){
this.route("index", {path: "/"});
});
The index route is defined as app/assets/javascripts/routes/index_route.js
TimeTravel.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('trip');
}
});
The controller app/assets/javascripts/controllers/index_controller.js
TimeTravel.IndexController = Ember.ArrayController.extend({
});
Can someone please explain this error? Or at least point out some good debugging tools for ember. Thanks in advance!

Categories