How to fix Routing in Marionette when using Browserify - backbone.js

I have a Marionette project and I try to make it work with Browserify.
My app.js:
var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
Marionette = require('backbone.marionette');
var Controller = require("./controller");
var Router = require("./routes");
var App = new Marionette.Application();
...
App.addRegions({
header: "#header_region",
side_menu: "#side_menu_region",
main: "#main_region",
footer: "#footer_region"
});
...
var controller = new Controller({});
App.addInitializer(function(options){
...
var router = new Router({
controller : controller
});
});
App.on("start", function(){
Backbone.history.start();
});
App.start({});
module.exports = App;
My controller.js:
var headerView = require('./header/view');
var sideMenuView = require('./side_menu/view');
module.exports = function() {
var Controller = Marionette.Controller.extend({
showHome: function(){
var header_view = new headerView();
App.header.show(header_view);
var side_menu_view = new sideMenuView();
App.side_menu.show(side_menu_view);
}
});
return Controller;
}
My routes.js:
module.exports = function() {
var Route = Marionette.AppRouter.extend({
appRoutes: {
'': 'showHome'
}
});
return Route;
}
My browserify command:
browserify app.js -o bundle.js
For some reason, I can't get into my showHome function inside the controller.
So when I go to my site, I get an empty page without any errors in the console.
Does anybody know what am I missing?
Thanks, Alex

Related

Angular $injector:unpr] Unknown provider:

Working through a test app with a service and I keep getting an error about adding the service using the factory method. Not sure why, i know i am probably staring right at the problem..
The error i get is:
VM497 angular.js:10126 Error: [$injector:unpr] Unknown provider: githubProvider <- github
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=githubProvider%20%3C-%20github
Thanks in advance.
(function() {
var github = function($http) {
var getUser = function(username) {
return $http.get('https://api.github.com/users/' + username).then(function(response) {
return response.data
});
};
var getRepos = function(user) {
return $http.get(user.repos_url).then(function(response) {
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
};
var module = angular.module("githubViewer");
module.factory('github', github) ;
});
Controller that injects the service
// Code goes here
(function() {
var app = angular.module("githubviewer", []);
var MainController = function(
$scope, github, $interval,
$log, $anchorScroll, $location) {
var onUserComplete = function(data) {
$scope.user = data;
github.getRepos($scope.user).then(onRepos, onError);
};
var onRepos = function(data){
$scope.repos = data;
$location.hash("userDetails");
$anchorScroll();
}
var onError = function(reason) {
$scope.error = "Could not fetch the Data";
};
var decrementCountDown = function(){
$scope.countdown -= 1;
if($scope.countdown < 1){
$scope.search($scope.username);
}
};
var countDownInterval = null;
var startCountDown = function(){
countDownInterval = $interval(decrementCountDown, 1000, $scope.countdown);
};
$scope.search = function(username){
$log.info("Searching for: " + username);
github.getUser(userName).then(onUserComplete, onError);
if (countDownInterval) {
$interval.cancel(countDownInterval);
}
};
$scope.username = "angular";
$scope.message = "GitHub Viewer";
$scope.repoSortOrder = "-stargazers_count";
$scope.countdown = 5;
startCountDown();
};
app.controller("MainController", MainController)
}());
You need to inject the service into app, from the code you posted. you are not injecting anything into the module.
var app = angular.module("githubviewer", ['yourservice', function(yourservice){}]);
This should get you headed in the right direction.
found my problem, the name of my module had a typo on capitalization. The V in Viewer was wrong.
Controller - var app = angular.module("githubviewer", []);
Service - var module = angular.module("githubViewer");

Is it possible to call factory binded variable in deviceready?

I have following code somewhere in my javascript:
var app = angular.module("App");
app.factory('rest', function($http) {
});
index.js:
document.addEventListener("deviceready", function() {
// How I am able to call rest here?
var domElement = document.documentElement;
angular.bootstrap(domElement, ["App"]);
var $body = angular.element(document.body);
var $rootScope = $body.scope().$root;
$rootScope.$apply(function () {
$rootScope.$broadcast('initialized', 'initialized');
});
});
You can register a run function to your module. So when you will bootstrap your module run will be executed and in the run you will be able to access the factory. Something like this:
// Code goes here
var app = angular.module("App");
app.factory('rest', function($http) {});
app.run(function(rest) {
console.log('your rest factory', rest);
});
document.addEventListener("deviceready", function() {
// How I am able to call rest here?
var domElement = document.documentElement;
angular.bootstrap(domElement, ["App"]);
var $body = angular.element(document.body);
var $rootScope = $body.scope().$root;
$rootScope.$apply(function() {
$rootScope.$broadcast('initialized', 'initialized');
});
});

Angular global factory

I created a factory that I would like to use in different pages:
var sessionApp = angular.module('sessionApp', ['LocalStorageModule']);
sessionApp.config(function(localStorageServiceProvider)
{
localStorageServiceProvider
.setPrefix('mystorage')
.setStorageType('localStorage');
});
sessionApp.factory('SessionFactory', function(localStorageService)
{
var service = {};
var _store = 'session';
service.load = function()
{
var session = localStorageService.get(_store);
}
service.save = function(data)
{
localStorageService.set(_store, JSON.stringify(data));
}
service.delete = function()
{
localStorageService.remove(_store);
}
return service;
});
Then I would add it on apps run method where I would assign it to the $rootScope. I left that part of the code commented out for now.
var loginApp = angular.module("loginApp", []);
loginApp.run(function($rootScope, SessionFactory)
{
//$rootScope.sessionFactory = SessionFactory;
$rootScope.$on('$routeChangeStart',
function(ev, next, current)
{
});
});
My error is:
Unknown provider: SessionFactoryProvider <- SessionFactory
Is it because my factory is from sessionApp and my login module is loginApp? Does that mean that I need to have the variables named the same like below:
File: login.js
var myApp = angular.module("loginApp", []);
myApp.run(function($rootScope, SessionFactory)
{
//$rootScope.sessionFactory = SessionFactory;
$rootScope.$on('$routeChangeStart',
function(ev, next, current)
{
});
});
File: session.js
myApp.config(function(localStorageServiceProvider)
{
localStorageServiceProvider
.setPrefix('mystorage')
.setStorageType('localStorage');
});
myApp.factory('SessionFactory', function(localStorageService)
{
var service = {};
var _store = 'session';
service.load = function()
{
var session = localStorageService.get(_store);
}
service.save = function(data)
{
localStorageService.set(_store, JSON.stringify(data));
}
service.delete = function()
{
localStorageService.remove(_store);
}
return service;
});
The array argument to angular.module is an array of other modules that you new module depends on. loginApp needs to list sessionApp as a dependency.
var loginApp = angular.module("loginApp", ["sessionApp"]);

how can I get rid : TypeError: communityApp.activeTabLayout.pforum is undefined

my code of module is.
spine.module('communityApp', {
startWithParent: false,
define: function (communityApp, App, Backbone, Marionette, $, _) {
console.log("communityApp.js");
// Setup the router for this module
var Router = Marionette.AppRouter.extend({
before: function () {
console.log("communityApp.js: router.before()")
App.startSubApp("communityApp", {});
},
appRoutes: {
"community": "showCommunityTab",
"community/pforum": "getPforum",
"community/questions":"getQuestions",
"community/events": "getEvents"
}
});
// Startup router
App.addInitializer(function () {
console.log("communityApp.js: App.addInitializer()")
// contains active controller
communityApp.activeController = new communityApp.Controllers.tabController();
// initializing route
communityApp.Router = new Router({
controller: communityApp.activeController
});
});
// Let app know we started
communityApp.addInitializer(function () {
console.log("communityApp.js: DemoApp.addInitializer()");
App.vent.trigger("app:started", "communityApp");
});
// This will run when a sub app (module) starts
communityApp.on("start", function () {
console.log("communityApp.js: on 'Start'()");
});
code of controller is.
spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
"use strict";
// initializing controllers and collections for message tabs
communityApp.Controllers = {};
communityApp.Collections = {};
communityApp.Controllers.tabController = Marionette.Controller.extend({
showCommunityTab: function () {
this.getCommunityTab();
},
getCommunityTab: function (data) {
//var tabLayout = new communityApp.Views.tabLayout();
//tabLayout.render();
// creating active layout
communityApp.activeTabLayout = new communityApp.Views.tabLayout();
communityApp.activeTabLayout.render();
// loading community module view
App.regionMain.show(communityApp.activeTabLayout);
// load pforum on community module load
this.getPforum();
},
getPforum : function(){
console.log('Public Forum Tab');
var pforum = new communityApp.Controllers.pforumController();
pforum.init();
},
getQuestions : function(){
console.log('Question tab');
var questions = new communityApp.Controllers.questionsController();
questions.init();
},
getEvents : function(){
console.log('Events tab');
var events = new communityApp.Controllers.eventController();
events.init();
}
});
Code where error is, Its a tab page.
spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
"use strict";
communityApp.Controllers.pforumController = Marionette.Controller.extend({
init: function(){
var func = _.bind(this._getPforum, this);
$.when(App.request('alerts1:entities' , {origin:'pforum'}))
.then(func)
},
_getPforum:function(data){
// populating the data
communityApp.activeTabLayout.pforum.show(new communityApp.CollectionViews.pforumCollectionViews({
collection: data
}));
}
});
That's because you're creating the activeTabLayout in getCommunityTab, and you're trying to access it after creating the controller in getPforum. These are both attached to separate routes. Therefore you're not guarenteed that communityApp.activeTabLayout exists inside of your init method.
community/pforum -> creates your controller, but not your tab layout.
community -> creates your tab layout, but not your controller.
You need to make sure communityApp.activeTabLayout = new communityApp.Views.tabLayout(); runs before pforum.init();

can't get service instance from $injector.get()

I define a customer service named "greeting", but can't get the instance from $injector.get('greeting'). It will throw such error: Unknown provider: greetingProvider <- greeting. So which is the right way to get it? Following is the code:
var app = angular.module('myDI', []);
app.config(function($provide){
$provide.provider('greeting', function(){
this.$get = function(){
return function(name) {
console.log("Hello, " + name);
};
};
});
});
var injector = angular.injector();
var greeting = injector.get('greeting');
greeting('Ford Prefect');
You need to create the injector from the module.
var app = angular.module('myDI', []);
app.config(function($provide){
$provide.provider('greeting', function(){
this.$get = function(){
return function(name) {
console.log("Hello, " + name);
};
};
});
});
var injector = angular.injector(['myDI', 'ng']); //Add this line
var greeting = injector.get('greeting');
greeting('Ford Prefect');
var injector = angular.injector();
Try it here. FIDDLE

Resources