AngularJS workshopUniversity of Latvia
15.02.2016
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)
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»)
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)
MeStudying Masters in RTUYouth Techclub founderMicrosoft Student partnerStudent fraternity LatviaCyber-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 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
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
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
Lets get to the business …
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 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
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
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
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
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
ViewsDOM elements after Angular is compiled
Allows to work with components
Handles interaction with user and displaying the state
ControllerResponsible for constructing the model for a view to interact with
Use controller to manipulate data in the scope.
RoutingYou can add routing as a dependency
Turns our application in state machine
ngRoute vs ui-router
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
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
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,
More exampleshttps://github.com/simpulton/noterioushttps://www.madewithangular.com/#/https://builtwith.angularjs.org/
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?
Thank you!Your feedback is welcomed!
Top Related