[Homework] SPA with AngularJS - Controllers-and-Markup
След много копи-пейст, няколко тутотриала и видеа ето резултата:
ДЕМО - КОД Ъплоуд-а на видео работи само локално на node сървъра!
За скелет ползвам сийд-а от туториала в официалния сайт на Angular цък, който горещо препоръчвам. На 80% си направих нещата от там.Кода в демото е прекрасно обяснен и се минава за два часа. Идеята е да се направят отделни модули за контролерите и филтрите(в случая), които се слагат като депендансита в галвния ни модул на апп-а. В app.js освен модулите си инжектирам и сървисите(май е по-правилно провайдърите) за раутинг ngRoute, и за премахване секюрити(ескейпинг) ишутата ngSanitize , за които Angular така старателно се грижи. Там се конфигурира и на кои урл-та какви паршали да се зареждат, и кои контролери да отговарят за тях. Фактически в index.html има само едно ng-view в бодито, към което се залепят паршалите. Супер чисто и удобно.В js/controllers си правя модул за контролерите. Ползвам $http сървиса. Записвам видета в един videos.json файл. От него си ги гетвам при листване, а при добавяне взимам файла, пушвам новия обект в него, json.stringify-вам го, и чак тогава го поствам. Учудих се, че тръгна така без истински сървиси но... Естествено ъплоуд на видео работи само локално, защото няма кой да ми рънне node-ския сървър като си го хостна на ICN, а иначе това става от server.bat/sh файла. В js/flters имам модул за филтрите. Единия ползва $sce сървиса, за да ми позволи angular да ng-src-свам линковете за видеата. Понеже ползвам iframe(не намерих по-удачен начин) трябв да се линква ембедед-урл-а от ютуб. С другия филтър просто си дисплелйвам тикчета за true и false на hasSubtitles. Валидацията на формата беше голяма заигравка, особенно да е disabled submit бутона при неверен инпут. Ако не зададеш name и ng-model на инпутите angular влиза в конфликт с html валидатора и не могат да се разберат кой кво ше прави.
Отново проблем бяха датите. В json файла няма как да нбиеш new Date() и трябва да сложиш едно такова чудовище 1393134567877, и от него да си правиш после дата. Не можах по никакъв начин да разбера коя цифра за коя част от датата отговаря...никаква логика
Общо взето документация в официалния сайт според мен е супер добре направена и много полезна. Има и dvelopers guide tutorial, който сигурно е доста по-адвансд и полезен
Липсващата лекция ще бъде качена. Останала е забравена на лекторския лаптоп. Утре се надявам да бъде качена. Междувременно подготвяме Lab за AngularJS, но ще е след празниците.