Intro to AngularJS

AngularJS

Timea Turdean

www.timeaturdean.com

Agenda Introduction AngularJS – identify yourself AngularJS – where can I find you? AngularJS – what do I need to get started? Examples & building blocks Project work

Inroduction

AngularJS - identify yourself A JavaScript open-source-framework for

frontend Created & maintained by people @Google

since 2009 Based on the single-page application(SPA) &

based on the MVC pattern

Fun fact – the versions have funny names 2014 1 .3.x unicorn-hydrafication  2014 1.2.26 captivating-disinterest 2010 0.9.0 dragon-breath 

AngularJS – where can I find you? On the official website: angularjs.org Online videos: Dan Wahlin AngularJS

in 20ish min, AngularJS in 60ish min Confference:  ngeurope.org Tutorials: w3schools.com, CodeSchool Before starting with AngularJS, you should have

a basic understanding of: HTML CSS JavaScript

This tutorial is based on the code @https://github.com/theRealImy/testAngular

AngularJS – what do I need to get started?

angularDemo folder index.html

index.html: <script src=“lib/angular.js”</script> from

https://angularjs.org/ OR

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

Example 1 in tutorial

Let’s get started!

Before & After AngularJS

Before & After AngularJS

Example 5 in tutorial

AngularJS Directives AngularJS extends HTML with ng-directives.

Examples ng-app  Example 5 in tutorial ng-model Example 5 in tutorial

ng-bind Example 6 in tutorial ng-init Example 9 in tutorial

AngularJS Modules

Dan Wahling video (till 40:28)

ng-controller Example 10 & 11 in tutorial ng-repeat Example 12 in tutorial

AngularJS Routes Routes are used for navigation between views

Download or link angular-route.js https://ajax.googleapis.com/ajax/libs/angularjs/

1.2.26/angular-route.js Install a server (node/wamp/xampp) Dan Wahling video (42:04 - 44:45)

Routes Example 13 in tutorial

AngularJS Factory

Factory is a service in AngularJS module.factory( 'factoryName', function );

Factory in Angular Example 14 in tutorial

AngularJS server side

$http is an internal service of AngularJS

$https example Example 15 in tutorial

Project work

Project work

Project work

Project Work

Tutorial code: https://github.com/theRealImy/testAngular

Project work: https://github.com/edemguru/angularWorkshop

AngularJS

Timea Turdean

www.timeaturdean.com

THANK YOU for PARTICIPATING in