angular js workshop

26
AngularJS workshop University of Latvia 15.02.2016

Upload: rolands-krumbergs

Post on 12-Apr-2017

141 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Angular js workshop

AngularJS workshopUniversity of Latvia

15.02.2016

Page 2: Angular js workshop

AgendaAngularJS core principlesBuilding a sample web site to demonstrate how AngularJS works (from the scratch)Some words about AngularJS 2Practical tasks (if there is time and energy)

Page 3: Angular js workshop

Youth TechclubYouth Techclub brings together young people that are interested in building their skills in information technology by sharing knowledge and exploring.

Wide variety of people – coders, graphic designers, idea generators..

Workshops, meet-up’s, external speakers.

Apply via official Facebook page (search for «Youth Techclub»)

Page 4: Angular js workshop

Youth Techclub next semesterAzure Web Apps (from Dreamspark students)Web development:

- HTML5/CSS3- Javascript- jQuery- Angular, Angular 2.0

ASP.NET:- MVC- Web API

GitHub:- Git usage

Mobile app development:- Xamarin (cross platform development)

Unit testingTest driven developmentAgile principlesASO (app store optimization)

Page 5: Angular js workshop

MeStudying Masters in RTUYouth Techclub founderMicrosoft Student partnerStudent fraternity LatviaCyber-unit

Page 6: Angular js workshop

Lets clear some things…There are things that are hard to translate to Latvian

Workshop is an introduction to AngularJS

I’m only one so I won’t be able to help you all

Demo gods can be cruel some times if you have not offered a tribute for some time

Page 7: Angular js workshop

Some tools we will useNodeJS – server-side JavaScript runtime

Bower package manager – handles getting client side packages in web development

Node package manager – handles getting server side packages in web development

Bootstrap – UI framework to help with responsive web sites

Page 8: Angular js workshop

NodeJSInstall from https://nodejs.org/en/

You can use both the mature and the latest version

Visual Studio comes with built-in NodeJS support, but the version is not the latest

Page 9: Angular js workshop

Bower In command line execute – npm install –g bower

Navigate to solution and execute - bower init

bower.json file is created, it will contain the list of packages installed

Page 10: Angular js workshop

Lets get to the business …

Page 11: Angular js workshop

What is AngularJS and why it is popular?Open-source web application framework maintained by Google

Addresses challenges encountered in developing single-page applications

Decoupling and dependency injection

Makes testing very easy and code modular

Page 12: Angular js workshop

Lets understand how AngularJS works

AngularJS application – defined by ng-app attribute in HTML, creates $rootScope

Modules – logically splits application

Views – renders HTML to user

Controller – manipulates data and business logic

Page 13: Angular js workshop

More complete pictureConfig – you can configure different aspects of modules – routing, dependencies, HTTP request handling and lot more

Routes – defines URL for modules

$scope – local $scope for controller, shared with view

Directives – markers in DOM that instruct Angular to attach specified behaviour to DOM element

Service – encapsulates common logic

Page 14: Angular js workshop

Lets prepare solution1. Create index.html file2. Create folders «app» and «assets»3. Create folder «libs» in «assets»4. Init bower (or add through VS)5. Copy required libraries to libs folder6. Add libraries in index.html

Page 15: Angular js workshop

Lets create AngularJS Hello world! 1. Create ng-app tag in HTML2. Create div element and attach controller to it3. Create app.module.js in «app» folder4. Define common module, myApp module and a

controller5. Test scoped variables

Page 16: Angular js workshop

DirectivesDirective defined in code must match the directive in HTML markup.4 ways to define in markup:

<my-dir></my-dir><span my-dir=«exp»></span><!– directive; my-dir exp --><span class=«my-dir: exp;»></span>

‘Restrict’ option defines how to match code with markup

Lets create a header navigation directive

Page 17: Angular js workshop

Some popular built-in directivesngModel – binds input to model valuengClick – specify behaviour when element is clickedngChange – evaluates expressions when input changesngRepeat – instantiates template once per item from a collection

ngMaxlength – specifies max length for inputngIf – adds/removes DOM element based on expressionngShow – shows/hides DOM element based on expressionngRequired – adds required validator to input field

Page 18: Angular js workshop

ViewsDOM elements after Angular is compiled

Allows to work with components

Handles interaction with user and displaying the state

Page 19: Angular js workshop

ControllerResponsible for constructing the model for a view to interact with

Use controller to manipulate data in the scope.

Page 20: Angular js workshop

RoutingYou can add routing as a dependency

Turns our application in state machine

ngRoute vs ui-router

Page 21: Angular js workshop

PromisesA service that helps to run functions asynchronously and use their return values when they are done processing.

ES6 style or deffered objects style

Promise chaining

Page 22: Angular js workshop

Demo tasks1. Add routing with ui-router2. Create header as a directive3. Create table with source data from service4. Create a form to send data to service5. Add custom validations to form

Page 23: Angular js workshop

AngularJS 2.0Complete rewrite, not compatible with previous versions

Written in TypeScript

Some changes - faster, new router, no controllers, no $scope, different types of directives,

Page 24: Angular js workshop

More exampleshttps://github.com/simpulton/noterioushttps://www.madewithangular.com/#/https://builtwith.angularjs.org/

Page 25: Angular js workshop

Tasks1. Add more validations to form (pattern, max number,

etc.)2. Add .gif loading symbol while GET/POST is executing3. Enable form button if all fields are filled and form is

valid4. Any other suggestions from your side?

Page 26: Angular js workshop

Thank you!Your feedback is welcomed!