├── .gitignore
├── .settings
└── tasks.json
├── LICENSE
├── README.md
├── app
└── index.js
├── browser
├── index.html
└── main.ts
├── package.json
├── tsconfig.json
└── tsd.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | browser/jspm_packages
29 | typings
30 | dist
--------------------------------------------------------------------------------
/.settings/tasks.json:
--------------------------------------------------------------------------------
1 | // Available variables which can be used inside of strings.
2 | // ${workspaceRoot}: the root folder of the team
3 | // ${file}: the current opened file
4 | // ${fileBasename}: the current opened file's basename
5 | // ${fileDirname}: the current opened file's dirname
6 | // ${fileExtname}: the current opened file's extension
7 | // ${cwd}: the current working directory of the spawned process
8 |
9 | /*
10 | // A task runner that calls the Typescipt compiler (tsc) and
11 | // Compiles a HelloWorld.ts program
12 | {
13 | "version": "0.1.0",
14 |
15 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
16 | "command": "tsc",
17 |
18 | // The command is a shell script
19 | "isShellCommand": true,
20 |
21 | // Show the output window only if unrecognized errors occur.
22 | "showOutput": "silent",
23 |
24 | // args is the HelloWorld program to compile.
25 | "args": ["HelloWorld.ts"],
26 |
27 | // use the standard tsc problem matcher to find compile problems
28 | // in the output.
29 | "problemMatcher": "$tsc"
30 | }
31 | */
32 |
33 | // A task runner that calls the Typescipt compiler (tsc) and
34 | // compiles based on a tsconfig.json file that is present in
35 | // the root of the folder open in VSCode
36 |
37 | {
38 | "version": "0.1.0",
39 |
40 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
41 | "command": "tsc",
42 |
43 | // The command is a shell script
44 | "isShellCommand": true,
45 |
46 | // Show the output window only if unrecognized errors occur.
47 | "showOutput": "silent",
48 |
49 | // Tell the tsc compiler to use the tsconfig.json from the open folder.
50 | "args": ["--experimentalDecorators", "-p", "."],
51 |
52 | // use the standard tsc problem matcher to find compile problems
53 | // in the output.
54 | "problemMatcher": "$tsc"
55 | }
56 |
57 | // A task runner configuration for gulp. Gulp provides a less task
58 | // which compiles less to css.
59 | /*
60 | {
61 | "version": "0.1.0",
62 | "command": "gulp",
63 | "isShellCommand": true,
64 | "tasks": [
65 | {
66 | "taskName": "less",
67 | // Make this the default build command.
68 | "isBuildCommand": true,
69 | // Show the output window only if unrecognized errors occur.
70 | "showOutput": "silent",
71 | // Use the standard less compilation problem matcher.
72 | "problemMatcher": "$lessCompile"
73 | }
74 | ]
75 | }
76 | */
77 |
78 | // Uncomment the following section to use gulp in a watching mode that compiles a
79 | // less file. The gulp task prints "[hh:mm:ss] Starting 'clean-styles'" to the console
80 | // when existing css files get deleted and "[hh:mm:ss] Finished 'styles'" when the
81 | // overall less compilation has finished. When the clean pattern is detect internal less
82 | // problems are cleaned. When the finshed pattern is detected in the output less
83 | // problems are published.
84 | /*
85 | {
86 | "version": "0.1.0",
87 | "command": "gulp",
88 | "isShellCommand": true,
89 | "tasks": [
90 | {
91 | "taskName": "watch-less",
92 | // Make this the default build command.
93 | "isBuildCommand": true,
94 | // Show the output window only if unrecognized errors occur.
95 | "showOutput": "silent",
96 | // Task is running in watching mode.
97 | "isWatching": true,
98 | "problemMatcher": {
99 | // Use the standard less compilation problem matcher as the base.
100 | "base": "$lessCompile",
101 | // A regular expression signalling that a watched task begins executing (usually triggered through file watching).
102 | "watchedTaskBeginsRegExp": "^\\[\\d+:\\d+:\\d+\\] Starting 'clean-styles'\\.\\.\\.$",
103 | // A regular expression signalling that a watched tasks ends executing.
104 | "watchedTaskEndsRegExp": "^\\[\\d+:\\d+:\\d+\\] Finished 'styles' after \\d+"
105 | }
106 | }
107 | ]
108 | }
109 | */
110 |
111 | // Uncomment the following section to use jake to build a workspace
112 | // cloned from https://github.com/Microsoft/TypeScript.git
113 | /*
114 | {
115 | "version": "0.1.0",
116 | // Task runner is jake
117 | "command": "jake",
118 | // Need to be executed in shell / cmd
119 | "isShellCommand": true,
120 | "showOutput": "silent",
121 | "tasks": [
122 | {
123 | // TS build command is local.
124 | "taskName": "local",
125 | // Make this the default build command.
126 | "isBuildCommand": true,
127 | // Show the output window only if unrecognized errors occur.
128 | "showOutput": "silent",
129 | // Use the redefined Typescript output problem matcher.
130 | "problemMatcher": [
131 | "$tsc"
132 | ]
133 | }
134 | ]
135 | }
136 | */
137 |
138 | // Uncomment the section below to use msbuild and generate problems
139 | // for csc, cpp, tsc and vb. The configuration assumes that msbuild
140 | // is available on the path and a solution file exists in the
141 | // workspace folder root.
142 | /*
143 | {
144 | "version": "0.1.0",
145 | "command": "msbuild",
146 | "args": [
147 | // Ask msbuild to generate full paths for file names.
148 | "/property:GenerateFullPaths=true"
149 | ],
150 | "taskSelector": "/t:",
151 | "showOutput": "silent",
152 | "tasks": [
153 | {
154 | "taskName": "build",
155 | // Show the output window only if unrecognized errors occur.
156 | "showOutput": "silent",
157 | // Use the standard MS compiler pattern to detect errors, warnings
158 | // and infos in the output.
159 | "problemMatcher": "$msCompile"
160 | }
161 | ]
162 | }
163 | */
164 |
165 | // Uncomment the following section to use msbuild which compiles Typescript
166 | // and less files.
167 | /*
168 | {
169 | "version": "0.1.0",
170 | "command": "msbuild",
171 | "args": [
172 | // Ask msbuild to generate full paths for file names.
173 | "/property:GenerateFullPaths=true"
174 | ],
175 | "taskSelector": "/t:",
176 | "showOutput": "silent",
177 | "tasks": [
178 | {
179 | "taskName": "build",
180 | // Show the output window only if unrecognized errors occur.
181 | "showOutput": "silent",
182 | // Use the standard MS compiler pattern to detect errors, warnings
183 | // and infos in the output.
184 | "problemMatcher": [
185 | "$msCompile",
186 | "$lessCompile"
187 | ]
188 | }
189 | ]
190 | }
191 | */
192 | // A task runner example that defines a problemMatcher inline instead of using
193 | // a predfined one.
194 | /*
195 | {
196 | "version": "0.1.0",
197 | "command": "tsc",
198 | "isShellCommand": true,
199 | "args": ["HelloWorld.ts"],
200 | "showOutput": "silent",
201 | "problemMatcher": {
202 | // The problem is owned by the typescript language service. Ensure that the problems
203 | // are merged with problems produced by Visual Studio's language service.
204 | "owner": "typescript",
205 | // The file name for reported problems is relative to the current working directory.
206 | "fileLocation": ["relative", "${cwd}"],
207 | // The actual pattern to match problems in the output.
208 | "pattern": {
209 | // The regular expression. Matches HelloWorld.ts(2,10): error TS2339: Property 'logg' does not exist on type 'Console'.
210 | "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
211 | // The match group that denotes the file containing the problem.
212 | "file": 1,
213 | // The match group that denotes the problem location.
214 | "location": 2,
215 | // The match group that denotes the problem's severity. Can be omitted.
216 | "severity": 3,
217 | // The match group that denotes the problem code. Can be omitted.
218 | "code": 4,
219 | // The match group that denotes the problem's message.
220 | "message": 5
221 | }
222 | }
223 | }
224 | */
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Santhosh Kumar Bala Krishnan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # electron-angular2
2 | Electron starter app with Angular 2
3 |
4 | I had an idea in mind and decided that I will learn Electron and Angular2 in the process.
5 |
6 | I did not want to clone an existing starter branch and start off from there, rather wanted t0 start from scratch. Here is all that I learnt and did.
7 |
8 | * Set up a Github project. Add a readme and licence. Also add node to gitignore. Here’s mine: https://github.com/bsanth/electron-angular2.git
9 | * Git clone the repo to your system.
10 |
11 | ```git clone https://github.com/bsanth/electron-angular2.git```
12 | * Get Node Package Manager ready.
13 |
14 | ``` npm init```
15 |
16 | Here's how mine looks:
17 |
18 | ```
19 | name: (electron-angular2)
20 | version: (1.0.0) 0.0.0
21 | description: Starter app for electron-angular2
22 | entry point: (index.js) app/index.js
23 | test command: electron .
24 | git repository: (https://github.com/bsanth/electron-angular2.git)
25 | keywords:
26 | author: Santhosh Kumar Bala Krishnan
27 | license: (ISC) MIT
28 | About to write to /Users/sbalakrishnan/repos/electron-angular2/package.json:
29 |
30 | {
31 | "name": "electron-angular2",
32 | "version": "0.0.0",
33 | "description": "Starter app for electron-angular2",
34 | "main": "app/index.js",
35 | "scripts": {
36 | "test": "electron ."
37 | },
38 | "repository": {
39 | "type": "git",
40 | "url": "git+https://github.com/bsanth/electron-angular2.git"
41 | },
42 | "author": "Santhosh Kumar Bala Krishnan",
43 | "license": "MIT",
44 | "bugs": {
45 | "url": "https://github.com/bsanth/electron-angular2/issues"
46 | },
47 | "homepage": "https://github.com/bsanth/electron-angular2#readme"
48 | }
49 | ```
50 |
51 | * Electron uses a js file as an entry point to the app. Let's create that next.
52 |
53 | ```
54 | mkdir app
55 | touch app/index.js
56 | ```
57 | * I installed electron globally and added electron as a dependency to this project next.
58 |
59 | ```
60 | npm install electron-prebuilt -g
61 | npm install electron-prebuilt --save-dev
62 | ```
63 |
64 | * Let's create a base index file:
65 |
66 | ```
67 | touch browser/index.html
68 | ```
69 | * Let's now write the entry point js file to electron. Go to index.js file and type out the following. This is directly taken from electron starter app. [https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md)
70 |
71 | Only change I made was the path to the index.html file.
72 |
73 | ```
74 | const app = require('app'); // Module to control application life.
75 | const BrowserWindow = require('browser-window'); // Module to create native browser window.
76 |
77 |
78 | // Keep a global reference of the window object, if you don't, the window will
79 | // be closed automatically when the JavaScript object is GCed.
80 | var mainWindow = null;
81 |
82 | // Quit when all windows are closed.
83 | app.on('window-all-closed', function() {
84 | // On OS X it is common for applications and their menu bar
85 | // to stay active until the user quits explicitly with Cmd + Q
86 | if (process.platform != 'darwin') {
87 | app.quit();
88 | }
89 | });
90 |
91 | // This method will be called when Electron has finished
92 | // initialization and is ready to create browser windows.
93 | app.on('ready', function() {
94 | // Create the browser window.
95 | mainWindow = new BrowserWindow({width: 800, height: 600});
96 |
97 | // and load the index.html of the app.
98 | mainWindow.loadURL('file://' + __dirname + '/../browser/index.html');
99 |
100 | // Open the devtools.
101 | mainWindow.openDevTools();
102 |
103 | // Emitted when the window is closed.
104 | mainWindow.on('closed', function() {
105 | // Dereference the window object, usually you would store windows
106 | // in an array if your app supports multi windows, this is the time
107 | // when you should delete the corresponding element.
108 | mainWindow = null;
109 | });
110 | });
111 | ```
112 |
113 | * Let's tell electron where to look for the entry point js file. Edit package.json and add the following line if not already added.
114 |
115 | ```
116 | "main": "app/index.js",
117 | ```
118 | * Just to make sure I got the electron part working, I ran the following command to see if I can see my app running - after adding some content to index.html. HOORAY!
119 |
120 | ```
121 | electron .
122 | ```
123 | * **Let's get to the angular2 part!**
124 |
125 | * Angular2 is based off TypeScript. Let's install TypeScript next. These are taken from [AngularJS QuickStart guide](https://angular.io/docs/js/latest/quickstart.html)
126 |
127 | ```
128 | npm install -g tsd@^0.6.0
129 | tsd install angular2 es6-promise rx rx-lite
130 | npm install -g typescript
131 | ```
132 |
133 | * Let's init TSD so that we have the config file set up.
134 |
135 | ```
136 | tsd init
137 | ```
138 | * Get angular2.js, systemJS and reflect-metadata from NPM.
139 |
140 | ```
141 | npm install angular2 --save
142 | npm install systemjs --save
143 | npm install reflect-metadata --save
144 | ```
145 | * Moving on to index.html inside browser folder. Added all the dependent js file scripts and SystemJS configuration.
146 |
147 | * Create new main.ts file as found in this git repo. This is also form the [angular quickstart guide](https://angular.io/docs/js/latest/quickstart.html).
148 |
149 | * Watch and compile the .ts file.
150 |
151 | ```
152 | tsc -m commonjs -t es5 --emitDecoratorMetadata browser/main.ts --watch
153 | ```
154 | * Once the compile completes, run electron again and **you're done!**
155 |
156 | ### Heavily inspired from
157 | * https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
158 | * http://www.dotnet-rocks.com/2015/05/04/writing-an-electron-atom-shell-app-using-angular-and-es6/
159 | * https://github.com/SebastianM/angular2-bootstrap/blob/01e0e99a51466772af77aa351217a1d87aabe7b6/examples/index.html
160 |
161 | Thank you both!
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | const electron = require('electron');
2 | // Module to control application life.
3 | const {app} = electron;
4 | // Module to create native browser window.
5 | const {BrowserWindow} = electron;
6 |
7 | // Keep a global reference of the window object, if you don't, the window will
8 | // be closed automatically when the JavaScript object is GCed.
9 | let mainWindow = null;
10 |
11 | // Quit when all windows are closed.
12 | app.on('window-all-closed', function() {
13 | // On OS X it is common for applications and their menu bar
14 | // to stay active until the user quits explicitly with Cmd + Q
15 | if (process.platform != 'darwin') {
16 | app.quit();
17 | }
18 | });
19 |
20 | // This method will be called when Electron has finished
21 | // initialization and is ready to create browser windows.
22 | app.on('ready', function() {
23 | // Create the browser window.
24 | mainWindow = new BrowserWindow({width: 800, height: 600});
25 |
26 | // and load the index.html of the app.
27 | mainWindow.loadURL('file://' + __dirname + '/../browser/index.html');
28 |
29 | // Open the devtools.
30 | mainWindow.openDevTools();
31 |
32 | // Emitted when the window is closed.
33 | mainWindow.on('closed', function() {
34 | // Dereference the window object, usually you would store windows
35 | // in an array if your app supports multi windows, this is the time
36 | // when you should delete the corresponding element.
37 | mainWindow = null;
38 | });
39 | });
--------------------------------------------------------------------------------
/browser/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | angular2-bootstrap examples
4 |
5 |
6 |
7 |
8 |