Главные темы. Последние записи с тегом «javascript». Страница 131

Сегодня 22 февраля, суббота

Какой рейтинг вас больше интересует?

получить код

Главная /

Главные темы

Тэг «javascript»

Создаем ToDo-приложение на основе Electron и AngularJs

2015-08-05 21:03:09
... script type="text/javascript" src="node_modules/angular ... type="text/javascript" src="node_modules ...
+ развернуть текст сохранённая копия

todo-приложения на основе electron и angularjs

Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового приложения доступен на Github.

Первым делом необходимо установить Electron:

npm install electron-prebuilt -g

Затем перейдем к созданию самого проекта. Для этого, например, можно воспользоваться генератором от Yeoman, либо создать файлы вручную. Так как нам нужно создать всего лишь несколько файлов, мы выберем второй вариант. Создадим новую папку и добавим в нее три файла: app.js, main.js и index.html.

Начнем с первого файла app.js. В нем мы инициализируем наше electron-приложение, укажем опций для окна, название, иконки и прочее. Здесь можно взять за основу код с странички документации и дополнять его по необходимости:

[js]

var app = require(‘app’); // Module to control application life.

var BrowserWindow = require(‘browser-window’); // Module to create native browser window.

// Keep a global reference of the window object, if you don’t, the window will

// be closed automatically when the JavaScript object is GCed.

var mainWindow = null;

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

app.on(‘ready’, function() {

// Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600, resizable: false});

// and load the index.html of the app.

mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’);

// Open the devtools.

mainWindow.openDevTools();

// Emitted when the window is closed.

mainWindow.on(‘closed’, function() {

// 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.

mainWindow = null;

});

[/js]

Теперь создадим index.html в котором будет находиться внешний вид нашего приложения. Для начала просто поместим в него строку текста “Hello world” и для проверки запустим наше приложение с помощью команды:

electron app.js

Теперь скачаем необходимые нам библиотеки – AngularJs, Angular Material, а так же веб-шрифт с иконками Material Icons. Для этого можем воспользоваться менеджером пакетов npm:

npm install angular
npm install angular-material

После того как пакеты скачались их необходимо подключить в index.html. Для работы Angular Material потребуются еще две библиотеки Anuglar Animate и Angular Aria, если скачиваете скрипты вручную, то не забудьте и о этих скриптах.

Сразу же займемся и интерфейсом нашего приложения: добавим тулбар в шапку, боковое меню, а так же список с чекбоксами, которые и будут отображать наши будущие задачи в центральной части приложения. Воспользовавшись заготовками и инструкциями с документации Angular Material, у меня получился такой код:

[html]

<!DOCTYPE html>

My Todo App <!– Web Font with Material Icons –> <!– Toolbar with title –>

<!– Sidebar with navigation –>

<!– all tasks –>

<!– todo –>

<!– done tasks –>

[/html]

Теперь перейдем к основной части нашего списка дел к javascript-логике и для этого откроем третий файл main.js. Здесь мы для начала инициализируем angular-приложение todoApp с модулем ngMaterial, создадим контроллер AppCtrl и инициализируем несколько массивов с объектами. В первый из них поместим три объекта для навигаций с двумя полями: название пункта меню и текстовое название иконки (список всех иконок Material Icons). Во втором массиве мы будем хранить наши задачи и для этого нам так же потребуется два поля: название задачи и статус (сделано или нет). В итоге у меня получилось так:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, function($scope){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

}]);

[/js]

Запустим наше приложением и посмотрим, как оно выглядит и что оно уже умеет.

electron app.js

На данный момент у нас отображаются все три пункта меню с иконками и две задачи, которые мы поместили в наш массив. Кроме того, мы можем переключаться между тремя созданными списками (все задачи, предстоящий и сделанные).

Теперь предлагаю перейти к созданию формы с помощью которой мы смогли бы добавлять новые задачи в наш список. Для этого я предлагаю добавить Fab-кнопкочку в левый нижний угол приложения, по нажатию на которую у нас бы открывалось popup-окошко с текстовым полем для ввода названия новой задачи.

Для этого добавим код Fab-кнопки в index.html:

[html]

add

[/html]

Вернемся к файлу main.js и первым делом пропишем две необходимые нам зависимости $mdDialog и $mdToast для всплывающих оповещений:

[js]

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast) {…}

[/js]

Теперь создадим новую функцию, которая будет открывать новый диалог по нажатию на fab-кнопку:

[js]

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

[/js]

Как видите, функция show от $mdDialog принимает html-шаблон с диалогом, а так же новый контроллер, который мы сейчас и создадим:

[js]

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

[/js]

И конечно же, не забываем добавить функцию addTask(), которая будет добавлять нашу новую задачу в общий массив на первую позицию:

[js]

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

[/js]

В итоге, у меня main.js выглядит следующим образом:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

}]);

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

[/js]

создание приложения на основе electron

На этом пока что все, экспериментируй, расширяйте возможности

Тэги: angularjs, design, electron, javascript, material, статьи

Тэги: browserify, hmr, javascript, live, patch, react, reactjs, веб-разработка, программирование

Страницы: ... 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 ...

Главная / Главные темы / Тэг «javascript»

Блограйдеров
14506

Блогов
219941
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Бизнес»

Взлеты Топ 5


+1006	1094	ДеВаЧкА-НеФоРмАлКа
+989	1001	White_Rabbit_Pics
+988	1000	Смотрим на жизнь сквозь сетку
+934	1101	Вадим Гоц
+928	932	Блог о подарках и праздниках

Падения Топ 5


-1	10	Блог Находчивого Продавца
-1	459	alexfox2011 - BLOG.I.UA
-2	3	Деньги в интернете
-5	992	Allendy.ru - экономический портал
-6	729	Натяжные потолки Херсон

Загрузка...

Главные темы

Тэг «javascript»

Создаем ToDo-приложение на основе Electron и AngularJs

Создаем ToDo-приложение на основе Electron и AngularJs

Создаем ToDo-приложение на основе Electron и AngularJs

[Из песочницы] Разработка callback-виджета от Oblax

Обновление React компонентов с сохранением состояния в режиме реального времени для Browserify

Введение: Как это работает?