[2015/03/14] MaGIC Academy: Intro to AngularJS

Event Date
Sat Mar 14, 2015

Event Time
10:00 AM - 5:00 PM MYT

Event Venue
Level 26, Menara 3 Petronas, Persiaran KLCC, Kuala Lumpur City Centre, 50088 Kuala Lumpur, Malaysia

Venue Address
Level 26, Menara 3 Petronas, Persiaran KLCC, Kuala Lumpur City Centre, 50088 Kuala Lumpur, Malaysia


Event Details
MaGIC in collaboration with JomWeb is conducting a workshop on AngularJS. The workshop will be fully on-hands. During the workshop, the participants will be coding up a simple todo list in AngularJS. The template that will be used is http://todomvc.com, which is simple enough to do in a few hours, but complex enough to demonstrate the potential of AngularJS. The participants will be demonstrated how to do CRUD actions on their data and bind the data to the DOM. The participants will be shown how to save the data inside the browser's localstorage first then switch over to firebase.com that provides realtime data storage.

Key Takeaways
After completing the workshop, participants will:

• Introduction to front-end framework (AngularJS)
• AngularJS data binding
• Creating a single page apps that covers CRUD methods
• Saving data locally on the browser
• Realtime data storage in the cloud
• Synchronize data in real-time with firebase.com

Pre - Requisite & Planning

• Participants to pre-install sublime text
• A registration a https://www.firebase.com
• Some sort of Webserver (be it apache, nginx or just php -S will do). This will enable angular to fetch remote data via AJAX and save on local storage.
• Participants must already have working knowledge of jQuery & javascript.
• To ensure participants benefit the most from this workshop, please ensure you are able understand the content and can complete the following online tutorial before attending. See http://www.codecademy.com/en/tracks/jquery. It should not take more than 3 hours of your time

Useful References (and recommended readings)

• Microsoft Virtual Academy - Introduction to AngularJS
• The AngularJS website
• jQuery vs. AngularJS: A Comparison and Migration Walkthrough
• AngularJS plugins and packages
• Example of what we target to achieve at the end of this AngularJS workshop
• An introduction to localStorage
• 10 reasons why you should use AngularJS

Agenda
9.30 am : Registration
10.00 am : Brief comparison of JS/JQuery/Angular vs other JS frameworks.
10.30 am : Let's do our todo
1.00 pm : Lunch break (will be provided)
2.00 pm : Persisting data with localstorage and firebase
4.00 pm : Tea Break (will be provided)
4.15 pm : Q & A
5.00 pm : End

About the Speaker

Zulfa Juniadi Zulkifli is a fullstack developer professionally for 8 years. He has been developing countless projects. On the backend he does PHP on Laravel, Codeigniter or Slim. For the front end , he does AngularJS and BackboneJS. He is very active in the Jomweb Group where he contributes his time, effort and knowledge . Zulfa works full-time at Sands Consulting Sdn Bhd, spend most of his time coding, but also make time to mentor peers and offering consultation to customers.

Organizer

Malaysian Global Innovation and Creativity Centre
http://www.mymagic.my/
Our mission is to catalyze the entrepreneurial ecosystem in Malaysia, bringing together the abundant resources from partners and communities alike, and to develop entrepreneurs of enduring, high growth startups that will make a positive impact at a regional or global scale.

Reminder for MaGIC Academy: Introduction to Angular JS
Dear Attendees,
Thanks for signing up for this workshop. Please note the below :

1) Dress Code : No Slippers or Shorts
Please take note of the above or you will be refused
entry to the building.

2) Please complete the pre-requisites before attending the
workshop :
i) Participants to pre-install sublime text.
ii) A registration at https://www.firebase.com.
iii) Some sort of Webserver (be it apache, nginx or just
php -S will do). This will enable angular to fetch
remote data via AJAX and save on local storage.
iv) Download and run the git clone project:
https://github.com/zulfajuniadi/angularjs-intro

If you need further information , please email us at academy@mymagic.my.

Thanks.

Malaysian Global Innovation and Creativity Centre, the organizer

Note (from Kirby510's Website Blog)
01a. Sublime Text 2 (Windows) [5MB]
01b. Sublime Text 2 (Windows - Portable Version) [6MB]
01c. Sublime Text 2 (Windows 64 bit) [6MB]
01d. Sublime Text 2 (Windows 64 bit - Portable Version) [8MB]

02a. Presentation Slides [464KB]
02b. Files [100KB]
02c. CastMyCode.com
02d. Documentations

03a. TodoMVC
03b. JavaScript Char Codes (Key Codes)
03c. UI Bootstrap
03d. AngularFire

04a. Todo Code (Part 1 - Array Storage) [101KB]
04b. Todo Code (Part 2 - Local Storage) [101KB]
04c. Todo Code (Part 3 - Firebase Storage) [101KB]