How do I use eventListeners with Angularjs + Electron?

Question

I am learning Electron and built my own "hello world" type application that works. I started learning it like an hour ago so any noob friendly tips are highly appreciated.

I decided to include angularjs + angular material to style it and see how it works. Now my piece of code that sends notification isn't working. That raised a question.

How do I send click events from angularjs to electron?

Here is the sample code from all files

main.js copied from get-started electron github page

const electron = require('electron');
const {ipcMain} = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;



function openInbox() {
  win.loadURL('https://inbox.google.com/?pli=1');
}

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({width: 1366, height: 768});

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`);
  win.openDevTools();

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

ctrl.js // renderer file that used to work and send notifications prior to including angularjs + material lib

const {ipcRenderer} = require('electron');

const button = document.getElementById('button');

button.addEventListener('click', evt => {
  new Notification('Angular Material FTW!');
});

index.html

<!DOCTYPE html>
<html ng-app="webApp">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
    <script src="angular-main.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">
  </head>
  <body layout-align="center center" layout-padding>
    <h1 id="hello">Hello World!</h1>
    <div></div>
    <md-button class="button md-raised md-primary">Click Me</md-button>
  </body>
  <script src="ctrl.js"></script>
</html>

angular-main.js Angular file

(function() {
  angular
    .module('webApp', ['ngMaterial'])
    .config(themeConfiguration)
    .controller('appCtrl', appCtrl);

  function themeConfiguration($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('blue', {
        'default': '500'
      })
      .accentPalette('red')
      .warnPalette('deep-orange')
      .backgroundPalette('grey', {
        'default': '100'
      });
  }

  function appCtrl() {
    var vm = this;

    vm.notification = function Notification(evt) {
      new Notification('Hello angular');
    };
  }
})();

If I remove Angularjs and Material the ctrl.js works and send notification just fine.

Answer 1

Answering my own question, to make things work just place code inside angularjs Controller function like this

  function appCtrl() {
    var vm = this;

    const button = document.getElementById('button');

    button.addEventListener('click', evt => {
      new Notification('Angular Material FTW!');
    });
  }

How do I use eventListeners with Angularjs + Electron?

Question

1 answers

solution1
0 2016-05-12 15:17:24

How do I use eventListeners with Angularjs + Electron?

Question

1 answers

solution1 0 2016-05-12 15:17:24

solution1
0 2016-05-12 15:17:24