Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Matt Prestlien
@mattchue
Hello! Quick question - as I'm scaling my app up, I want to separate out my controllers into their own .js files. It seems like unless i use something like gulp-concat then my only option is to include every individual controller in a <script> tag in my index.html. For large apps, this could mean you have hundreds of potential script includes. Am I missing something here?
Mike Haas
@mikehaas763
@mattchue There are three options that I can think of. 1 use a module system that takes care of loading the individual script files. 2 concat everything into a bundle as you mentioned. You still need to make sure you load things in the right order though. For example, make sure you order your angular.module('mod', []) defines before angular.module('mod) reads. 3 use a tool like gulp-linker to help automate the insertion of script tags. You still have to make sure you load your module defines before the reads.
Matt Prestlien
@mattchue
@mikehaas763 that helps a ton. the only module loader that i'm aware of is AngularAMD, which still required individual script declarations, just via javascript instead of html. additionally, i know gulp-concat can sweep through folders and find script files so you don't have to try and define them all yourself. I will definitely check out linker as well. Thanks!
Mike Haas
@mikehaas763
@mattchue I wouldn't use that AngularAMD package personally. I believe the point of that is to allow lazy loading of modules. I mean a module system as in RequireJS, browserify, webpack, or native ES6 modules transpiled and loaded using SystemJS.

Yes using something like gulp-concat or gulp-linker automatically finds files but you have to tweak something generally so that the files that define your angular modules are loaded before other files that add things such as controllers or directives to the angular modules.

For example

//file1.js
angular.module('myMod', []);

//file2.js
angular.module('myMod').controller('myController', MyControllerConstructor);
Brad Wertman
@bmwertman
I'm using $scope.$on to listen for an event object. I'm able to console.log() the data I need inside the $scope.$on callback function. But if I return data outside the callback and try to console.log there it's undefined. Can someone explain?
Mike Haas
@mikehaas763
One thing I've done on past teams is made the files that defined the modules named 00-module.js etc. The gulp.src, gulp-concat etc loads them in the correct order just based on the file name. There are other ways you could automate this though.
@bmwertman Can you make a small snippet or gist or something for an example?
Brad Wertman
@bmwertman
@mikehaas763 Yes, one sec.
Brad Wertman
@bmwertman
Mike Haas
@mikehaas763
@bmwertman so I'm guessing you're saying you can console.log(datesInView) when you're inside the $scope.$on callback?
Brad Wertman
@bmwertman
@mikehaas763 , correct
But I need to be able to use the data returned in the callback outside $scope.$on in my ManageCtrl
Mike Haas
@mikehaas763
So what's happening is you're experiencing the asynchronous and closure nature of javascript. Inside this controller, you call two statements. $scope.$on() and console.log(). Those two statements get invoked synchronously one time when the controller is first instantiated... (I have more)
If you only want the data in the controller so that you can bind it to your view or something similar to that you would do something like
myModule.controller('ManageCtrl', function ($scope) {
    // always store your data in an object. Look up the angular 'dot' problem if you're not aware.
    $scope.dataObject = {};

    $scope.$on('newDates', function (dates) {
      var datesInView = dates.targetScope;

      // now using this in your view you could have {{ dataOject.datesInView }} etc
      $scope.dataObject.datesInView = datesInView;

      // what are you returning your data to here?
      return datesInView;
    });

    console.log(datesInView);// this is undefined
});
The anonymous function you pass to the $scope.$on is an event handler that is invoked asynchronously. Likely, after all the other code in your controller has already executed and is done.
Brad Wertman
@bmwertman
So doing this if I console.log($scope.dataObject) outside $scope.$on callback it should contain the data I'm after in my ManageCtrl? The return datesInView was my attempt to make the datesInView data available to other functions in the ManageCtrl.
Mike Haas
@mikehaas763
No, because console.log() will have already ran before your newDates event has fires the function that puts the data there.
Brad Wertman
@bmwertman
So anything I want to do with datesInView has to be done inside the $scope.$on callback?
Mike Haas
@mikehaas763
The short but not complete answer to that is yes. If you want to do some sort of work etc you should invoke some other code from the event handler (with good practice that code should be in a separate service that is injected).
What do you want to do with "datesInView"? I can maybe point you in the right direction.
A controller should be used to initiate anything you need done at first and to put things on the $scope that can be bound to from the view. Such as event handlers that listen to change events or just data objects that are used to show data on the view etc.
Brad Wertman
@bmwertman
In my view I have a week view calendar. When the user swipes left or right they see the dates for the previous or next week. The function feeding those dates is where I use $scope.$emit to push those from CalendarController to ManageCtrl. I need to query my database to check availability of some combination of two resources that the user can select for each of the seven dates returned and update the view to show whether both resources can be scheduled for the required time on those days.
Mike Haas
@mikehaas763
So with what you've got so far get the dates from the event. You can take those dates and pass it to another function or method that you call from the event handler.
Brad Wertman
@bmwertman
Thanks for your help @mikehaas763
Darrin Dickey
@darrindickey

I've got a directive that renders a Google Map. Inside of that directive, I'm trying to use the click function to pass a value to a controller. Ultimately, I want to replace the information inside of a div. In my directive, under Scope, I have: changed: '='.

In my HTML, I have :

<map-list>changed='updateMap(locationId)')</map-list>

In my Controller, I have:
$scope.updateMap = function() {
console.log('$scope.locationId');
};

I can't figure out how to pass locationId from the directive.

Jared
@jareddr
@darrindickey something looks funny with your html there, but if i'm reading it right, locationId will be passed into the updateMap function, would look like this $scope.udpateMap = function(locationId) { console.log(locationId) };
```$scope.updateMap = function(locationId) {
haha oh man i'm not good at gitter chat yet
Darrin Dickey
@darrindickey
It may be from me converting it on the fly from Jade.
But how do I pass locationId out of the directive?
Jared
@jareddr
it depends on where you’re trying to send it to
Darrin Dickey
@darrindickey
I tried scope.changed({ locationId: placeId }), but then I get "changed is not a function"
I want to send it to the controller.
Actually, ultimately I want to send it to the view.
Jared
@jareddr
ya i see, so you’ll define the updateMap function in your controller
and then you’ll send a map id intot your map directive
sorry i feel like i’m not being super helpful, i can’t totally see what your code is trying to do
Darrin Dickey
@darrindickey
In the directive, there is data that includes placeId (unique to each location).
I loaded that into the locationsId variable. And I'm trying to pass it to the controller.
I was using the scope changed: '=' to do two-way binding on the data.
Jared
@jareddr
then i think your html should look more like this
Darrin Dickey
@darrindickey
Was passing through the directive element in the view via changed='updateMap(locationId)'
Jared
@jareddr
<map-list changed=‘locationId’></map-list>
Darrin Dickey
@darrindickey
But that won't call the updateMap function in the controller.
Sorry, I think I'm being confusing. Let me try what you suggest and see what I get.
Jared
@jareddr
correct, so you want something in the directive to call a function in the controller i see
so yeah in your controller define an update map function
this goes in your controller: scope.updateMap = function(locationId) { console.log(locationId) }
then in your html do