intro to angularjs
DESCRIPTION
AngularJS tutorial for beginners. The tutorial code is on https://github.com/theRealImy/testAngularTRANSCRIPT
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