These are chat archives for AngularClass/NG6-starter

7th
Jan 2016
ragefuljoe
@ragefuljoe
Jan 07 2016 19:51
is there a resource that explains what the import stuff is doing? trying to understand what I have to import and where depending on what I'm doing with components.
there is 2 things:
  • ES6 modules
  • angular moduels (in angular2 replaced with es6 modules)
ragefuljoe
@ragefuljoe
Jan 07 2016 19:54
that's where I'm unclear. I understand the basics of what the import statement is doing
Sergey Protko
@fesor
Jan 07 2016 19:54
how to use es6 imports with angular modules?
ragefuljoe
@ragefuljoe
Jan 07 2016 19:55
so for example, I added a new component using the gulp command, and adding it as a new route
Sergey Protko
@fesor
Jan 07 2016 19:55
yep
ragefuljoe
@ragefuljoe
Jan 07 2016 19:56
in navbar template, I just added another div with the new sref, etc. then in components I import my component. however it won't work unless I also add mycomponent.name to the module list, don't understand that
Sergey Protko
@fesor
Jan 07 2016 19:59

this indeed may confuse.

Basicly you should link only angular modules.

ragefuljoe
@ragefuljoe
Jan 07 2016 20:01
let componentModule = angular.module('app.components', [
    Home.name,
    About.name
]);
Sergey Protko
@fesor
Jan 07 2016 20:02

if you want to use component from module A in component from module B, you need to specify dependency of module B from A.

So for angular 1.x you should import stuff from other modules only in your module definition file, not in components.

all other dependencies will be handled by angular’s module system.
in angular2 you should import all dependencies explicit.
ragefuljoe
@ragefuljoe
Jan 07 2016 20:03
the way ng2 does it I got my sample app working and it made sense. this I'm having harder time with
Sergey Protko
@fesor
Jan 07 2016 20:03
yep, this is all because angular1.x has it’s own module system, which isn’t so good.
ragefuljoe
@ragefuljoe
Jan 07 2016 20:04
so that snippet I pasted, what is Home.name and About.name pulling in exactly?
Sergey Protko
@fesor
Jan 07 2016 20:04
please remember that angular first appear in 2009

so that snippet I pasted, what is Home.name and About.name pulling in exactly?

this is just a strings, name of angular modules.

Home - this is instance of module, Home.name - this is name of module.
ragefuljoe
@ragefuljoe
Jan 07 2016 20:05
by name, you mean the variable declared in the constructor?
Sergey Protko
@fesor
Jan 07 2016 20:06
angular.module(‘moduleName’, [])
or
var moduleInstance = angular.module(‘moduleName’, []);

moduleInstance.name === ‘moduleName’;
ragefuljoe
@ragefuljoe
Jan 07 2016 20:08
O i see. a derrr lol. now I feel dumb
Sergey Protko
@fesor
Jan 07 2016 20:08
)
ragefuljoe
@ragefuljoe
Jan 07 2016 20:10
thanks for clearing that up fesor
ragefuljoe
@ragefuljoe
Jan 07 2016 20:16
checking out your todo mvc. hopefully seeing a more real app will help me understand this more.
Sergey Protko
@fesor
Jan 07 2016 20:17

well… i’d like to make more real app… I just don’t have any ideas for opensource app that makes some value.

If you have any, please share.

ragefuljoe
@ragefuljoe
Jan 07 2016 20:18
I think generally people are building some variant of a CRUD app, so I personally like seeing CRUD with auth
Sergey Protko
@fesor
Jan 07 2016 20:18
maybe some already existing apps on angular

so I personally like seeing CRUD with auth

There is nothing special with crud, but auth… there is several strategies that can be used.

ragefuljoe
@ragefuljoe
Jan 07 2016 20:20
right, and how it works within this component layout. as for crud, that helps to show basic service with components.
maybe todo with logins basically
Sergey Protko
@fesor
Jan 07 2016 20:20
will think about it. Maybe in near feature I will use some web ui for docker distribution
I thought about personal kanban board application)
it could also be used as example of backend application (50% of my dev time I spend as Symfony developer)
ragefuljoe
@ragefuljoe
Jan 07 2016 20:23
haha that I'm clueless on. but other ideas that I find useful to see include nested components, and how they communicate depending on level
Sergey Protko
@fesor
Jan 07 2016 20:23
as for components… there is also several strategies. The most easy one - no communication between components
you just expose part of application state to components and nothing more
all actions that modifies application state passes to service layer, and then all application state recreated
ragefuljoe
@ragefuljoe
Jan 07 2016 20:25
so do everything thru services?
Sergey Protko
@fesor
Jan 07 2016 20:25
yep, just dummy UI components that represents UI for part of application state
check ngRedux for details
also there is some variations of this idea using immutable.js and rx.js
ragefuljoe
@ragefuljoe
Jan 07 2016 20:26
makes sense. that's how I set up my apps before trying to move everyhting into directives/components
Sergey Protko
@fesor
Jan 07 2016 20:26
it also easier to test)
this diversity of ways how you can do things with angular (and documentation doesn’t help developers to learn this) I think it the main reason that angular 1.x considered as not-so-good framework to start.
ragefuljoe
@ragefuljoe
Jan 07 2016 20:32
it did take me a bit to wrap my head around, but I agree. That's why I'm very looking forward to ng2. What I've played around with so far I really like.
Andy Brown
@brownish
Jan 07 2016 20:54

hey @fesor, when you say this:

if you want to use component from module A in component from module B, you need to specify dependency of module B from A.

Does this include injecting a service defined in one component into the constructor of a different component?

Sergey Protko
@fesor
Jan 07 2016 20:55

a service defined in one component

service can be defined only in angular modules

Andy Brown
@brownish
Jan 07 2016 20:55
oh yeah i mean a service defined in another module
2 modules, the first defines a couple services and the second defines a component, can the component inject the services freely?
into the controller of the component
Sergey Protko
@fesor
Jan 07 2016 20:58
ES6 import should be used:
  • inside single module to link things with each other and then register in angular module
  • to link angular modules.
so you firstly need to link angular modules in order to inject services from module A in some components of module B.
in angular 1.x you shouldn’t import things from different angular modules. This is allowed only for angular module definition.
Sergey Protko
@fesor
Jan 07 2016 21:03
@brownish is this clearify this module madness?)
Andy Brown
@brownish
Jan 07 2016 21:03

So if i have:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import DataService from './maidData.data.service';

let maidDataModule = angular.module('maidData', [
  uiRouter
])
  .service('DataService ', DataService );
export default maidDataModule;

Is this required before I can use DataService in my controller

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import maidDataModule from '../maidData/maidData';
import someComponent from './someComponent';
let otherModule = angular.module('otherModuleName', [
  uiRouter,
  maidDataModule.name
])
  .component('componentName', someComponent);
export default otherModule;
Sergey Protko
@fesor
Jan 07 2016 21:04
something like that, yes
Andy Brown
@brownish
Jan 07 2016 21:05
ah
ragefuljoe
@ragefuljoe
Jan 07 2016 21:07
is it similar to ng2, you only import at top-most needed level, and children have access?
Andy Brown
@brownish
Jan 07 2016 21:07
I think so
if module A has modules 1, 2, 3 as deps, then module B can have module A as a dep, then it has access to modules 1,2,3 also
i think
Sergey Protko
@fesor
Jan 07 2016 21:09
all things that registered in any module available globbaly in angular
so if you have module app, which depends on module A and B, then module A can use anything from module B
Andy Brown
@brownish
Jan 07 2016 21:10
So as long as they are in the import chain and defined as a module or part of a module they can be injected into controllers and such?
Sergey Protko
@fesor
Jan 07 2016 21:11
angular modules is used not to handle dependencies ($injector is used for this) but to register stuff in system
Andy Brown
@brownish
Jan 07 2016 21:11
that's where "ngInject"; comes in, right?
Sergey Protko
@fesor
Jan 07 2016 21:12
“ngInject” thing is a hack form ngAnnotate. I’m to lazy to annotate stuff by hand.
Andy Brown
@brownish
Jan 07 2016 21:12
lol yeah same
ragefuljoe
@ragefuljoe
Jan 07 2016 21:12
hmm so not quite same as in ng2
Sergey Protko
@fesor
Jan 07 2016 21:13
@ragefuljoe yep, angular 1.x has very awful module system.
so yes, this is one of the first things that angular teem tried to fix in 2rd version.
for 1.x it is just not impossible to fix during BC.
Andy Brown
@brownish
Jan 07 2016 21:16
@fesor you mentioned ngRedux a few times, I did some reading into it and it sounds really useful but i've not been able to find any real good examples of its use. Does ngRedux work sort of like a service that stores the app's state as well as actions that controllers can use to modify the state?
Sergey Protko
@fesor
Jan 07 2016 21:42

as well as actions that controllers can use to modify the state?

well… sort of. it doesn’t replace controllers. It simplifyes state control

you application has some state
you pass this state to UI controls
state is immutable, UI controls doesn’t change it.
instead of it controllers of components sends actions or some sort of events describing user action.
then redux’s reducers creates fully new state from queue of actions
this is commonly known as event sourcing
so the main idea is that you don’t change state, you create a new one as combination of actions preformed over time.
Andy Brown
@brownish
Jan 07 2016 21:45
ohhhhh
Sergey Protko
@fesor
Jan 07 2016 21:46
checkout Greg Yang’s spech about event sourcing and CQRS
this approach commonly used on the backend
Andy Brown
@brownish
Jan 07 2016 21:46
so parts of the state can appear and disappear from the state object depending on which actions the controllers and such use
Sergey Protko
@fesor
Jan 07 2016 21:46
yep
Andy Brown
@brownish
Jan 07 2016 21:47
interesting
Sergey Protko
@fesor
Jan 07 2016 21:47
in this case all application state stores in one place
providing you a single sourch of truth
Andy Brown
@brownish
Jan 07 2016 21:47
with ng6-starter, would i define actions all in one place?
Sergey Protko
@fesor
Jan 07 2016 21:48
ng6-starter doesn’t provide any predefined way of how you handle application state
Andy Brown
@brownish
Jan 07 2016 21:48
yeah i'm just thinking of how to structure it into ng6
i've currently got most logic happening either in components or services
Sergey Protko
@fesor
Jan 07 2016 21:49
well… it’s depends
for example - refux/flux simplifies application state handling alot.
but for smaller projects - it can be overhead
facebook forces only things that works for them, on their scales)
Andy Brown
@brownish
Jan 07 2016 21:50
im attempting to build a fairly complex project
Sergey Protko
@fesor
Jan 07 2016 21:50
What I’m trying to say - all this flux things is a nice theory
in real life there is some use cases which breaks all this functional purity
the simple one - image crop)
you don’t want to pass all this state changes across all application for this particular use case. It just not so efficient way to make this done.
Personally I like the idea of stateless components which don’t do anything with application state and just drives the UI.
Andy Brown
@brownish
Jan 07 2016 21:53
oh i suppose if you're only making small changes to the state then you're going to be doing a lot of extra work by copying the state every time
Sergey Protko
@fesor
Jan 07 2016 21:53
yep
Andy Brown
@brownish
Jan 07 2016 21:54
i checked out your todomvc and thought it was a good lightweight example of components. that's pretty much what i was trying to do but i think i let my components get too heavy
too many of my components' controllers are directly accessing services i think
Sergey Protko
@fesor
Jan 07 2016 21:55
yes, the main idea is to simplify UI components as much as you can
UI = f(state)
for some use cases you can break the rules in order to make your work done
but for the most of them - keep your UI components as stupid as you can
they should not know from where the data came
Andy Brown
@brownish
Jan 07 2016 21:57
basically just create a component that then uses other components in its template, passing in only what they need to work?
Sergey Protko
@fesor
Jan 07 2016 21:57
yes
for top-level components - pass state from router resolvers for example
there is also interesing approach with uiRouter
you split you UI on separate views (hierarhies of states in terms of uiRouter)
each uiRouter state has one top-level component
instead of tracking changes in components, you can ask services to make stuff and then just refresh the view
and then pass new state to your top-level component from uiRouter resolvers
Andy Brown
@brownish
Jan 07 2016 22:00
ohhh interesting
i was trying to implement something like that but could never get it to work
Sergey Protko
@fesor
Jan 07 2016 22:00
one of my coworker experementing with such approach and he has a very complex app
Andy Brown
@brownish
Jan 07 2016 22:01
i have been doing that with topbar/sidebar/content, where each one talks directly to the services
the state idea with views is a great idea
Sergey Protko
@fesor
Jan 07 2016 22:02
there is also some guy on the internet that proposed devision on component and components container
components containers is statefull and just stores data (getting in from services) and putting it to lower-level components
but it doesn’t have any UI logic
something like
class NewsFeedContainerController {
    constructor(newsFeed) {
          this.newsFeed = newsFeed;
          this.refresh();
    }

    refresh() {
         this.newsFeed.load().then(feed => this.feed = feed);
    }
}

export default {
    template: `
         <news-feed feed=“vm.feed”></news-feed>
    `,
    controller: NewsFeedContainerController
}
so here you have two components - newsFeed which responsible for UI and newsFeedContainer which responsible for data fetching
so you can segregate responsibilities.
Andy Brown
@brownish
Jan 07 2016 22:06
so kind of like adding that extra controller to help out with resolves with ui-router
Sergey Protko
@fesor
Jan 07 2016 22:06
also components can notify container component to change state and so on
Andy Brown
@brownish
Jan 07 2016 22:07
that would rely less on ui-router for resolving and more on pure components
Sergey Protko
@fesor
Jan 07 2016 22:07

so kind of like adding that extra controller to help out with resolves with ui-router

well… this is kinda replacement of uiRouter. This could be usefull for very small projects

Andy Brown
@brownish
Jan 07 2016 22:07
yeah
Sergey Protko
@fesor
Jan 07 2016 22:08
I also want to try rx.js approach…. there is a hell lot of ways of how you can cook angular)))
Andy Brown
@brownish
Jan 07 2016 22:08
yeah for sure
i just saw that feature 1.0 is now in alpha for ui-router
which adds some awesome new state change hooks
Sergey Protko
@fesor
Jan 07 2016 22:09

i just saw that feature 1.0 is now in alpha for ui-router

hm… need to look at it

you can much more easily trigger functions on state change
Sergey Protko
@fesor
Jan 07 2016 22:10
holly...
Andy Brown
@brownish
Jan 07 2016 22:10
and you can make sure a promise resolves before state change endsd
Sergey Protko
@fesor
Jan 07 2016 22:10
$stateChange is deprecated!
Andy Brown
@brownish
Jan 07 2016 22:10
yep
Sergey Protko
@fesor
Jan 07 2016 22:11
Ionic project had a very ugly hack with timeout just because of this.
Andy Brown
@brownish
Jan 07 2016 22:11
$transitions.onBefore( { to: 'auth.*', from: '*' }, function(MyAuthService) {
  // If isAuthenticated is false, the transition is cancelled.
  return MyAuthService.isAuthenticated();
});
Sergey Protko
@fesor
Jan 07 2016 22:11
and this hack is very and very annoying since it has a lot of side effects
Andy Brown
@brownish
Jan 07 2016 22:12
yeah i've been trying to figure out a good way to make absolutely sure that nothing renders before a user is authenticated
this seems to help that a lot
Sergey Protko
@fesor
Jan 07 2016 22:12
I ended up with first-level abstract state with resolver
Andy Brown
@brownish
Jan 07 2016 22:13
i was trying to add the hook in the run function, with $stateChangeStart
Sergey Protko
@fesor
Jan 07 2016 22:13
hell yah, it just makes all this use cases that brings pain in our lifes so easy to handle
Andy Brown
@brownish
Jan 07 2016 22:14
yeah
i think im going to try it out, even in alpha it should pretty much stay the same
it looks like the functionality i need is all there so far
Sergey Protko
@fesor
Jan 07 2016 22:15
if you have a few monthes untill production - worth to try
Andy Brown
@brownish
Jan 07 2016 22:16
eh i don't know
i can't get distracted by another new thing out there lol
Sergey Protko
@fesor
Jan 07 2016 22:17
))
Andy Brown
@brownish
Jan 07 2016 22:17
i'll probably just do the abstract parent state resolve that checks auth
Sergey Protko
@fesor
Jan 07 2016 22:18
well… I don’t know either.
but you’ll probably will have less problem with alpha version
or maybe no...
José Oliveros
@joliveros
Jan 07 2016 22:19
Hi everybody. Anyone familiar with ocLazyLoad?
Andy Brown
@brownish
Jan 07 2016 22:20
looks like the important features are there
José Oliveros
@joliveros
Jan 07 2016 22:21
@fesor: yeah, I'm using it quite a bit in my app. Although, I have this issue that only occurs rarely. For instance, right now I can only reproduce it in windows 7/firefox 43
Dan helped me set it up actually
Sergey Protko
@fesor
Jan 07 2016 22:23
well… this is interesting) can’t help you. Looks like bug in angular $compile
but really don’t have enought expirience with lazy loading. All my apps just provides beatufull spinner for the first run)
Andy Brown
@brownish
Jan 07 2016 22:29
say @fesor do you know a decent way of getting webpack to split ng6-starter's bundle.js into a bundle.js and a vendor.js? Getting webpack to do what I want while not messing up angular has caused me tons of frustration
Sergey Protko
@fesor
Jan 07 2016 22:31
check my todomvc example
Andy Brown
@brownish
Jan 07 2016 22:31
ah cool, thanks
Sergey Protko
@fesor
Jan 07 2016 22:32
I will add PR with separation of vendor and app modules in short time
Andy Brown
@brownish
Jan 07 2016 22:32
great!
I've tried to use a pure webpack build that splits the bundle into vendor.js and app.js with hot-reloading but i've never gotten it to work lol
and I know there is a way to build vendor.js without having to explicitly define vendors: ['angular', 'other', 'third', 'party', 'modules']
but it is super confusing haha, i'll try what you've got, hopefully that will make rebuilding faster
Sergey Protko
@fesor
Jan 07 2016 22:36

and I know there is a way to build vendor.js without having to explicitly define

I don’t either

hopefully that will make rebuilding faster

also try to use webpack-dev-server

Andy Brown
@brownish
Jan 07 2016 22:37
yeah angular2-webpack-starter uses that i think
Sergey Protko
@fesor
Jan 07 2016 22:37
currenly ng6 doesn’t utilize webpack’s inremental build features fully
Andy Brown
@brownish
Jan 07 2016 22:37
i tried to kind of merge the two but i gave up
split dev and production builds, with dev hot-reloading using webpack-dev-server
Sergey Protko
@fesor
Jan 07 2016 22:41

with dev hot-reloading

I would like to have angular templates hot reloading...

Andy Brown
@brownish
Jan 07 2016 22:41
yeah
adding angular to any build system turns into a nightmare
Sergey Protko
@fesor
Jan 07 2016 22:42
adding new build system is a nightmare)
Andy Brown
@brownish
Jan 07 2016 22:42
if only ngUpgrade was fully operational
lol
Sergey Protko
@fesor
Jan 07 2016 22:42
angular2 solve mose of our problems
Andy Brown
@brownish
Jan 07 2016 22:43
yeah
Sergey Protko
@fesor
Jan 07 2016 22:43
but… we need to wait a little more
Andy Brown
@brownish
Jan 07 2016 22:43
i did the tour of heroes tutorial and fell in love with angular2
Sergey Protko
@fesor
Jan 07 2016 22:43
@brownish did you tried react?)
Andy Brown
@brownish
Jan 07 2016 22:43
no
Sergey Protko
@fesor
Jan 07 2016 22:44
I hate angular 1.x for it’s documentation… it seems to be a little bit outdated
I think this is the main reason that new developers write ugly things in angular
Andy Brown
@brownish
Jan 07 2016 22:45
yeah
and the javascript world is in chaos right now with ES6 not quite the norm yet
tons of build systems and frameworks, frontend and backend
Sergey Protko
@fesor
Jan 07 2016 22:46
NIH problem
Andy Brown
@brownish
Jan 07 2016 22:46
yep
even a few months ago using npm to install all your deps wasn't possible
or easy
now you can use es6 to write everything, with awesome webpack build systems
Sergey Protko
@fesor
Jan 07 2016 22:47
or system.js)
Andy Brown
@brownish
Jan 07 2016 22:47
the frameworks, like angular, are catching up
yeah
Sergey Protko
@fesor
Jan 07 2016 22:47
I really love javascript only since I switched to babel
Andy Brown
@brownish
Jan 07 2016 22:47
yeah definitely
i taught myself JS about a year ago
Sergey Protko
@fesor
Jan 07 2016 22:48
6 month ago I just hated to be full-stack developer and thought about to skip frontend stuff to other devs
Andy Brown
@brownish
Jan 07 2016 22:49
im a grad student trying to build this app for my master's
so i have had to learn everything as i go lol