Angular2: Шаблон в отдельном файле

Для начала работы с Angular2 и перехода на него нужно решить в общем и целом всего несколько вещей — как формировать шаблоны, как получать данные и роутить контроллеры и как собственно потом это все выложить на сервер. По очереди разберем эти вопросы — и самым первым — вопрос дизайна и адекватности шаблонов, так как чтобы мы потом не делали — если работа выглядит «говняшкой» — то это говняшка.

Продолжить чтение…


AngularJs: Примеры сайтов Bitcoin

Новой валюте - новые сайты!

Немножко новых примеров чтобы увидеть — где же и как же используется ангуляр собственно в живом мире

bravenewcoin.com

Не весь сайт — но самая «динамичная» часть — курсы валют, реализованы как приложение. Основные графики же сделаны через highstock.js и немного jquery. Но заметьте — сайт все равно отлично работает с таким набором разношерстных либ, так что правильная компоновка и упаковка, а главное — внешняя красота, и никто ничего не заметит.

bitcoin_angular

blockchain.info

Весь внутренний кабинет пользователя — сплошной angular. Это отличный пример для разбора динамичных страниц и форм, регистрация не сложная, результат интересен сам по себе.

<div class="activity-feed ng-scope" ng-if="status.isLoggedIn"><h5 class="mtn em-400 type-h5 mbl af-header ng-scope" translate="MOST_RECENT_ACTIVITY">Самые последние действия</h5><ul class="af pln"><!-- ngRepeat: activity in activities | limitTo: 8 --><li class="af-item flex-align-start ng-scope" ng-repeat="activity in activities | limitTo: 8" ng-class="{ 'af-fade' : $last &amp;&amp; activities.length &gt;= 8 }"><div class="af-marker"><i ng-class="activity.icon" class="ti-layout-list-post"></i></div><div class="af-info flex-center width-100 width-100-mobile"><p class="h5 af-type flex-1 mvn ng-scope" translate="TRANSACTION">Транзакция</p><p class="af-date mlm flex-1 hidden-xs mvn ng-binding">Jul 4, 2016</p><div class="af-log flex-center flex-3 flex-end"><p class="mvn right-align ng-scope received" translate="RECEIVED" ng-class="activity.message.toLowerCase()">Получено</p><span class="pls" ng-show="activity.type == 0"><fiat-or-btc btc="activity.amount" class="ng-isolate-scope"><span><span ng-hide="isBitCurrency(currency)" btc="btc" class="ng-isolate-scope ng-hide">

Ionic Bitcoin Starter

Всего за 16 долларов Вы можете получить свое личное маленькое приложение для торговли битками. Ionic напомню это надстройка над ангуляром для самых ленивых бережливых веб-программистов


GoogleAnalytics: дополнительная настройка

Аналитика страшная вещь в умелых руках, а с каждым днем — данных которые Вы можете использовать — все больше. К примеру — можно интегрировать сайт с mailchimp и следить за каждым подписчиком персонально)

Продолжить чтение…


Typescript: красиво просто и быстро скомпилировать в один файл

PhpStorm с плагинами — отличный выбор для fullstack php программиста.

Чтобы не бегать по всему проекту и не путать app.js и app.ts — очень советую сразу настроить автокомпиляцию кода тайпскрипта в один прикольный файлик js. tsconfig.json в корне проекта очень помогает). Или добавить file watcher соотвествующий.

{
"compilerOptions": {
	"target": "es5",
	"module": "commonjs",
	"moduleResolution": "node",
	"sourceMap": false, 
	"outFile" : "public/js/all.js",
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"removeComments": false,
	"noImplicitAny": false
}
}

Структура универсального проекта

PHP проекты сейчас стали все более и более сложными, а одного бекенда подчас недостаточно — поэтому мы обычно работаем уже в связке фронт и бекенда и кучи маленьких «плагинчиков», «сборщиков» и «компиляторов». Зачем каждый из них и что делается — простыми словами, без лишнего.

php storm project

Продолжить чтение…