These are chat archives for AngularClass/NG6-starter

5th
Feb 2016
Gediminas Bivainis
@bivainis
Feb 05 2016 11:33
hey, how do you handle image assets in this starter? do you use some specific img directory or place files inside component dirs? do you use webpack loaders for them or just direct links?
Sergey Protko
@fesor
Feb 05 2016 11:36
I use webpack, will add some example soon (I currently working on adding angular-material, and there will be logo on AngularClass)

do you use some specific img directory or place files inside component dirs

I like to place images inside UI component, since it part of it.

Gediminas Bivainis
@bivainis
Feb 05 2016 11:58
An example would be great. Also can't wait to see your implementation of angular-material. It would be interesting to compare your approach to the one used in my current project.
Sergey Protko
@fesor
Feb 05 2016 11:58
@gebidesign AngularClass/NG6-starter#98
If you have some expirience with it - feedback would be greate
since I don’t know exactly what should I add
Gediminas Bivainis
@bivainis
Feb 05 2016 15:00
the main challenge for me is ng6 component approach and angular-material components
so in my case, if I have a <tools-panel> component, and I want it to look like material card
then there's a ton of nesting going on. <md-card> will be nested under <tools-panel> in this case.
and <tools-panel md-card> is not an option
so in order for material flexbox layout to properly work, we need to specificly set ng6 components to flex layout in css
Sergey Protko
@fesor
Feb 05 2016 15:05
@gebidesign this isn’t a problem really.
Gediminas Bivainis
@bivainis
Feb 05 2016 15:07
yeah, it's workable, and probably something that can't be avoided at this point
Sergey Protko
@fesor
Feb 05 2016 15:08
@gebidesign how do you think, what ng6-starter should include as most common case when using ngMaterial
Gediminas Bivainis
@bivainis
Feb 05 2016 15:44
@fesor you mean which components should be included into the starter by default?
as I can see now, you already have a sidenav and toolbar with some views, I think that's a good start
I think it's more important to just wire things up, and have very basic layout, as each project's layout can differ a lot
Gediminas Bivainis
@bivainis
Feb 05 2016 15:56
if svg/png/jpeg loading would be ready to go from start, that would be great, although it's not related to angular-material in particular
Andrew Lombardi
@kinabalu
Feb 05 2016 16:09
do you guys have a recommend on mock library for testing things like $http calls?
Sergey Protko
@fesor
Feb 05 2016 19:06
@kinabalu don’t mock http, wrap http in your service and mock it
@kinabalu but if somehow you want to mock $http there is $httpBackend for this purposes
@gebidesign I know, but I want to cover some other cases like images.
Andrew Lombardi
@kinabalu
Feb 05 2016 19:26
@fesor that makes more sense, i guess you’re always pretty sure that $http is not screwed up
@fesor is it possible to define two factories in the same js file? i’ve done one and it owkrs, but once the other one is added, it’s screwy:
let loginInterceptor = function ($q, $location) {
    "ngInject";

    let response = (response) => {
    };

    let responseError = (response) => {
    };

    return {response, responseError};

};

let authService = function($q, $base64, $state, API_ENDPOINT, $localStorage, Restangular) {
    "ngInject";

    let getToken = function(username, password) {
    };

    let login = (username, password) => {
    };

    let logout = () => {
    };

    let isLoggedIn = () => {
    };

    let currentUser = () => {
    };

    return {login, logout, isLoggedIn, currentUser};

};

export loginInterceptor;
export authService;
Sergey Protko
@fesor
Feb 05 2016 19:29
@kinabalu why do you use factory and object instead of just services with classes?
also I think that
// bad
let isLoggedIn = () => {
};

// good
function isLoggedIn() {
}
functions and functional expressions is kind of different things
don’t overuse arrow function that much
but yes, you can define two factories in one file
and then you only need to import it correctly
Sergey Protko
@fesor
Feb 05 2016 19:36
// factories.js
// this should be named objects
export function authService() {}
export function authInterceptor() {}

// module
import {authService, authInterceptor} from ‘./factories’;

// …
    .factory({authService, authInterceptor}} // enhanced  object literals
Andrew Lombardi
@kinabalu
Feb 05 2016 19:45
well I was under the impression that httpInterceptors had to be factories or something
Sergey Protko
@fesor
Feb 05 2016 19:46
httpfactory should be factory, yes
Andrew Lombardi
@kinabalu
Feb 05 2016 19:46
is there a bad thing with arrow functions? I was just porting from some other code I saw from @brownish
Sergey Protko
@fesor
Feb 05 2016 19:46
but authService… I prefer to use classes here
Andrew Lombardi
@kinabalu
Feb 05 2016 19:46
ahh, I think I see
Sergey Protko
@fesor
Feb 05 2016 19:47
@kinabalu I loose readability without any benifits
arrow function are very handy in case of expressions
like
Andy Brown
@brownish
Feb 05 2016 19:47
arrow functions can potential mess about the scope
Sergey Protko
@fesor
Feb 05 2016 19:47
$http.get(‘/something’).then(
    response => response.data,
    reason => throw new NetworkError(reason)
)
Andy Brown
@brownish
Feb 05 2016 19:48
i use them for their lexical scoping
not how they look at much
Sergey Protko
@fesor
Feb 05 2016 19:48
@brownish yep, this is why i think this is really helps with expressions
but for functions it just better to use functions
Andy Brown
@brownish
Feb 05 2016 19:49
yeah
Sergey Protko
@fesor
Feb 05 2016 19:49
wow, angular 1.5 has released
Andy Brown
@brownish
Feb 05 2016 19:49
oh dang nice
Sergey Protko
@fesor
Feb 05 2016 19:50
and one way bindings arrived
Andy Brown
@brownish
Feb 05 2016 19:50
whaattttttt
Andrew Lombardi
@kinabalu
Feb 05 2016 19:50
one way bindings?
Sergey Protko
@fesor
Feb 05 2016 19:50
angular/angular.js#13928
bassicly
Andrew Lombardi
@kinabalu
Feb 05 2016 19:51
@fesor i’ve been trying to use angular-base64 and I think I have the import right, and the module declaration ,but it won’t inject into my code … is it silly to use it?
Sergey Protko
@fesor
Feb 05 2016 19:51
.component('myComponent', {
   bindings: {
        'oneWay': '<',
        'twoWay': '='
   },
   template: `
      <div class="my-component">
        <div class="my-component__two-way">{{$ctrl.twoWay}}</div>
        <div class="my-component__one-way">{{$ctrl.oneWay}}</div>
      </div>
   `
   controller: function () {
       this.twoWay = 'we are screwed'; // will override value
       this.oneWay = 'hell yeah!'; // will override just copy, no side effects
   }
});
Andrew Lombardi
@kinabalu
Feb 05 2016 20:22

hey @fesor, when I did this:

export function loginInterceptor($q, $location) {
    "ngInject";

    let response = (response) => {
        console.log("response");
        console.log(response);
        return response;
    };
    let responseError = (response) => {
        var status = response.status;
        console.log(response.status);
        if (status == 403) {
            console.log("redirect to login screen");
            $location.path('/login');
        }
        return $q.reject(response);
    };

    return {response, responseError};
}

it complained that the Argument was not a function when I tried to add it to .factor(). but if I add default after function, it worked … is that … normal?