These are chat archives for AngularClass/NG6-starter

14th
Oct 2015
dror
@i-am-dror
Oct 14 2015 07:38
hey, trying to add bootstrap-sass and angular-ui-bootstrap with no luck, any pointers?
Andy Brown
@brownish
Oct 14 2015 07:39
Try requiring the actual css file in the main app.js as well as injecting ui-bootstrap into your main module
Thats pretty much how i got angular material to work throughout the whole site
dror
@i-am-dror
Oct 14 2015 08:16
@brownish thanks, i'll do that
Andy Brown
@brownish
Oct 14 2015 08:18
@i-am-dror lemme know if it works. I havent tried using ui-bootstrap with ng6 but can imagine the issues you'd face wouldnt be dissimilar with those I've dealt with
dror
@i-am-dror
Oct 14 2015 08:42

@brownish the ui-bootstrap is working, thanks, still trying to figure how to import the css. i got an error regarding the glyphicons.

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
Module parse failed: /Users/dror/workspace/NG6-starter/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4790-4842

Andy Brown
@brownish
Oct 14 2015 08:44
what i did for angular-material was create another file in the client folder called app.config.js and inside it i put
let css = () => {
  require('../../node_modules/angular-material/angular-material.css');
};

export default css;
then in my app.js i put:
```
import css from './app.config';

angular.module( 'app', [
    css,
that seemed to work
i dont think it's the most elegant solution but it seems to work lol
David Haines
@davidfhaines
Oct 14 2015 08:47
@brownish import 'angular-material/angular-material.css';
directly in app.js
dror
@i-am-dror
Oct 14 2015 09:05
i guess the problem is with compiling font because i have the same problem with font-awesome
Andy Brown
@brownish
Oct 14 2015 09:07
@davidfhaines I think I added app.config.js and the require bit so that I could include it in the function that app.config exports without importing the .css immediately upon importing app.config from app.js
I'll probably just import directly into app.js though from now on
@davidfhaines any idea why the css for angular-material doesn't automatically get imported when i import angular-material in app.js?
David Haines
@davidfhaines
Oct 14 2015 09:11
hmmm
the main entry point defined in package.json is index
// Should already be required, here for clarity
require('angular');

// Load Angular and dependent libs
require('angular-animate');
require('angular-aria');

// Now load Angular Material
require('./angular-material');

// Export namespace
module.exports = 'ngMaterial';
and doesn't appear to require the css
whereas its bower main does
  "main": [
    "angular-material.js",
    "angular-material.css"
  ]
not sure if that's by design or an oversight
David Haines
@davidfhaines
Oct 14 2015 09:27
@brownish either way, seems strange that the package contents would differ between bower and npm
Andy Brown
@brownish
Oct 14 2015 09:48
@davidfhaines ahhhh i see. That makes sense
Thanks!
I was wondering, lol
dror
@i-am-dror
Oct 14 2015 11:27
how can i run the app without bundling, so it will be easier to use the debug console?
David Haines
@davidfhaines
Oct 14 2015 20:27
@i-am-dror if your issue is that the stacktrace output references bundle.js, have a look at this thread angular/angular.js#5217
i added the following to app.js to resolve
.config(($provide) => {
  $provide.decorator('$exceptionHandler', () => {
    return (exception, cause) => {
      setTimeout(() => {
        throw exception;
      });
    }
  });
})
Roman Storm
@rstormsf
Oct 14 2015 21:54

question: how do I bind something from controller: lets say I have in constructor:

this.value = null;

then sometimes after I update this value, how do I trigger update in the view?

{{vm.value}}

?

if I set something else - my view doesn't get updated
I mean after the view has been loaded
David Haines
@davidfhaines
Oct 14 2015 23:04
@rstormsf value should be bound and updated automatically on change
class TwoWayBindingController {
  constructor() {
    this.name = 'twoWayBinding';
    this.value = null;
  }

  changeMe () {
    this.value = Math.random();
  }
}

export default TwoWayBindingController;
David Haines
@davidfhaines
Oct 14 2015 23:15
<label>Value</label>
<input data-ng-model="vm.value">
<button data-ng-click="vm.changeMe()">Change Me</button>