Angular js workshop

AngularJS workshop
University of Latvia
15.02.2016

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

Youth Techclub
Youth 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»)

Youth Techclub next semester
Azure 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 testing
Test driven development
Agile principles
ASO (app store optimization)

Me
Studying Masters in RTU
Youth Techclub founder
Microsoft Student partner
Student fraternity Latvia
Cyber-unit

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 

Some tools we will use
NodeJS – 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

NodeJS
Install 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

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

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

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

More complete picture
Config – 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

Lets prepare solution
1. Create index.html file
2. Create folders «app» and «assets»
3. Create folder «libs» in «assets»
4. Init bower (or add through VS)
5. Copy required libraries to libs folder
6. Add libraries in index.html

Lets create AngularJS Hello world!
1. Create ng-app tag in HTML
2. Create div element and attach controller to it
3. Create app.module.js in «app» folder
4. Define common module, myApp module and a controller
5. Test scoped variables

Directives
Directive 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

Some popular built-in directives
ngModel – binds input to model
value
ngClick – specify behaviour when
element is clicked
ngChange – evaluates
expressions when input changes
ngRepeat – instantiates template
once per item from a collection
ngMaxlength – specifies max
length for input
ngIf – adds/removes DOM
element based on expression
ngShow – shows/hides DOM
element based on expression
ngRequired – adds required
validator to input field

Views
DOM elements after Angular is compiled
Allows to work with components
Handles interaction with user and displaying the state

Controller
Responsible for constructing the model for a view to interact with
Use controller to manipulate data in the scope.

Routing
You can add routing as a dependency
Turns our application in state machine
ngRoute vs ui-router

Promises
A 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

Demo tasks
1. Add routing with ui-router
2. Create header as a directive
3. Create table with source data from service
4. Create a form to send data to service
5. Add custom validations to form

AngularJS 2.0
Complete rewrite, not compatible with previous versions
Written in TypeScript
Some changes - faster, new router, no controllers, no $scope,
different types of directives,

More examples
https://github.com/simpulton/noterious
https://www.madewithangular.com/#/
https://builtwith.angularjs.org/

Tasks
1. Add more validations to form (pattern, max number, etc.)
2. Add .gif loading symbol while GET/POST is executing
3. Enable form button if all fields are filled and form is valid
4. Any other suggestions from your side?

Thank you!
Your feedback is welcomed! 

Angular js workshop

More Related Content

What's hot

Similar to Angular js workshop

Recently uploaded

Angular js workshop