In my angular code, to avoid code duplication, I inject a same factory into multiple services. At first, when I did this it started throwing errors Error: [$injector:unpr] Unknown provider
After some debugging, it became obvious that this was a load order issue. To get around it, in my build.config.js file, I changed module.exports.app_files.js so that factories were loaded before services.
My build.config.js file now has this in it
module.exports = {
build_dir: 'build'
compile_dir: 'bin',
app_files: {
modules: [
'src/**/*.js',
'!src/**/*.spec.js',
'!src/**/*-service.js',
'!src/**/*-controller.js',
'!src/**/*-config.js',
'!src/**/*-directive.js',
'!src/**/*-factory.js',
'!src/**/*-filter.js',
'!src/**/*-run.js'
],
js: [
'src/**/*-factory.js',
'src/**/*-service.js',
'src/**/*-controller.js',
'src/**/*-config.js',
'src/**/*-directive.js',
'src/**/*-filter.js',
'src/**/*-run.js',
'!src/**/*.spec.js'
],
...
The source code of the angular application is here and the modification is here
It would seem that I'm forced to have a hierarchy and that I could never have a factory-named file that has a dependence on a service named file. Whether one should or shouldn't is not the debate here; I'm more concerned about the hierarchy.
I would like to know if there is an alternative way around this?
[edit] : I think I have found the source of the problem (fingers crossed that it stays fixed). I was developing using grunt watch. However, when I stopped the process and simply ran grunt, everything is happy again. Thanks to the people below for asking questions and ascertaining that this was not normal behaviour!
Related
I have an application built on generator-angular-fullstack and it does a great job of allowing all my angular components to live in their own separate files.
I was just running all my code through JSLint and it asked to remove 'use strict'; from my index.module.js file as it worked out that this was the global or starting file for my entire application.
I was reviewing the JSLint warning here use-the-function-form-of-use-strict
This got me thinking, how did JSLint know that index.module.js was the starting code block.
Which then got me thinking, does it matter what order angular startup methods are called.
Can these methods be run in any order you like, or is there an expected sequential order for these calls?
angular.module('appName')
angular.module('appName').run(function() { });
angular.module('appName').config(function() { });
angular.module('appName').service(function() { });
angular.module('appName').constant('blah', 'blah');
TL;DR - no it's not.
The way angular is doing it - is when the page renders and scripts are loaded it register all the components(services\config\constants..) but do not execute them.
When the registration completes angular is starting to execute the application, providers --> config --> run and so on..
If your interested in some more detailed explanation on the way angular works under the hood you can check out this awesome article.
*forgot to mention that you must define your module first.
I am working through an eBook to learn the whole MEAN stack and came across an odd problem when working with angular.
Specifically, I was adding angular-route to my application to render a template. At first I could not get it to work and went over the code several times looking for any error I might have made. In the end, I had typed the order of two dependencies for the main application module differently than the book had shown.
This didn't work
var mainApplicationModule = angular.module(mainApplicationModuleName, ['example', 'ngRoute']);
This worked
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'example']);
So I don't have a problem exactly, but I was wondering if anyone could explain why this works this way? I have not been able to find anything about the order of dependency declaration mattering. I can post more of my code if it would be helpful.
This comes from Brad Dayley's book on the Subject.
The order matters in that the the list of modules(dependencies) to be injected has to be in the the order of "required". So if the example module requires the ngRoute then ngRoute has to be before example.
The angular.module() method uses following syntax:
angular.module(name, [requires],[configFn])
The name parameter is the name under which the module is registered in the injector service. The requires parameter is an array of names of modules that are added to the injector service for this module to use.
This explanation does beg for answer about possibility of circular module references in more complicated case. Here is some light on that by David M. Karr SO Answer Link.
I've recently picked up on Angular's basics a couple of months ago, and now I'm trying to build an industry-grade-like practice app.
I've just followed John Papa's Play by Play and Clean Code courses on Pluralsight; both are roughly expansions to his latest ng-conf talk. I am yet to read the Style Guide in its entirety but generally, these courses gave me an idea of the what, why and how of many things. There are few things I don't understand in his code, though, which is replicated on the hottowel yo generator. The 'blocks' decorator modules, both, 'router' and 'exception' blocks do not work when I try to replicate them into my project. This is what I write to configure my landing route (which is almost exactly what is written in the generator's dashboard route):
(function() {
'user strict';
angular
.module('app.landing')
.run(appRun);
appRun.$inject = ['routerHelper'];
////////////////////
// #ngInject
function appRun(routerHelper) {
routerHelper.configureStates(getStates());
}
function getStates() {
return [
{
state: 'landing',
config: {
url: '/',
templateUrl: 'sections/landing/landing.html',
controller: 'Landing',
controllerAs: 'landing',
title: 'landing'
}
}
];
}
})();
I am trying to get the app talking to a Rails backend, so I don't want any server-side node implementation (and my gulp sever is a functioning entirely browser-sync with a middleware proxy implementation), but even just copying the 'blocks' code to the letter doesn't work with me. It doesn't show anything in the browser, nothing at all in the dev-tools and I lost half of my hair trying to figure out what's wrong.
Could you please help me make sense of this?
depends on what the issue is. is there an error in the dev tools? are the files you show above being loaded in the browser? are you loading the app.landing module? can you set a breakpoint on this code?
I've developed my first spa application in Angular js but I've done it on localhost.
Now it's time to test it online. I'm sure that everything works localy but simply I can't make it work online.
It seems to me like controllers are not being loaded although they are linked well.
Routing works because html templates change but THERE ARE NO CONTROLLERS ???.
Here is sample output from console :
First,for every controller in my app I get this (total 5 times) :
Uncaught SyntaxError: Unexpected token <
And after that I get this for controller that is being used right now:
Error: [ng:areq] http://errors.angularjs.org/1.3.5/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at https://code.angularjs.org/1.3.5/angular.min.js:6:416
For every single controller I get the same error.
I followed rule to inject dependacys (found that on stackowerflow but it doesn't help at all) so my every controller looks like this:
myApp.controller('nearCtrl',
['$scope', 'geolocation', 'nearApartments', 'uiGmapGoogleMapApi',
function ($scope, geolocation, nearApartments, uiGmapGoogleMapApi) {...}])
Does anyone have an idea what could I do to fix this ?
Ok I found the solution,as usual it was trivial and now I feel like I shot myself in leg.
The thing was that I was very stupid and didn't follow good
practices as NAMING CONVENTION from the BEGINING of the
project !
In my index.html file there was an issue because few controllers were named by lowercase like myController.js and their real name on server was different like MyController.js so there's a problem.
I worked with git,merged branches and stuff and probabbly git messed up something with names(explains how it worked on localhost I guess) but that wouldn't happen if I had followed rules from the start.
To every wannabe Angular.js developer like me there are some great design guides and good practices described on link below.
Use them !
https://github.com/mgechev/angularjs-style-guide
Tnx everyone who tried to help me, Angular has really great community.
The trouble is with your server routing. You're serving your whole app instead of the individual JS files. First thing you should do is make sure 188.226.150.65/app/components/about/aboutController.js serves correctly the JS for aboutController.js.
Looking at each of your component folders, it seems all your controller.js files all have the same error:
Error in exception handler: The stream or file "/var/www/html/zimmer-
production/app/storage/logs/laravel.log" could not be opened: failed to open stream:
Permission denied in /var/www/html/zimmer-production/bootstrap/compiled.php:9016
The only controllers that seem to actually have any Javascript are the signup controllers and the apartmentControler. I'd check the permissions in your production environment, as that seems to be the problem.
I'm building an Ember application which started using the ember-skeleton (which means I'm using Rake Pipeline as my build toolchain). I'm using ember-i18n, and that constantly throws warnings about not having the CLDR.pluralForm function.
I've added the CLDR plural functions which ember-i18n uses to the app/vendor/ directory and added that file to my Assetfile. I've verified that the code is included in my app.js before the ember-i18n code. I've also added the appropriate require lines in my main.js:
require('plurals');
require('ember-i18n');
Still, ember-i18n is giving warnings. This is the code where it's happening:
if (typeof CLDR !== "undefined" && CLDR !== null) {
pluralForm = CLDR.pluralForm;
}
if (pluralForm == null) {
Ember.Logger.warn("CLDR.pluralForm not found. Em.I18n will not support count-based inflection.");
}
How do I make sure CLDR is defined in my app?
Because no-one else has, I will suggest a few things I might look at if I were debugging the problem myself.
If the message you see in your site is the same as in the fiddler, it is due to the files just load out of order. Pretty much "plural" must load before the "i18n" plugin. If you flip the order of the linked files it will work (I forked the error-ing example).
I would try validating I am wrong by throwing some debugger; statements into each file to see which actually gets loaded first on the browser.
Because of your require('plurals') I am going to assume you are using requirejs (github is down for maintenance so I can't actually examine ember-skeleton at the moment... so this might get an edit in the future). If this assertion is true, you need to declare that 'plurals' is a dependency of 'i18n'.
"If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed." - RequireJS API
This means you probably will end up wrapping the two calls into one, adding a define or making a "shim"; these (and more) examples can be found on the RequireJS site.
Sorry if this does not help you but without seeing it actually broken; it is hard for me to debug the problem.
EDIT: Looking at the ember-skeleton, I don't see requireJS. I have never used rake (we ended up writing our pipeline in nodeJS) so I am not quite sure if you were actually trying to concat the files with require "blaw" in rake or if you actually trying to use both.... So now I assume this answer might not be super helpful.