Angular js workshop
- 1. AngularJS workshop University of Latvia 15.02.2016
- 2. 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)
- 3. 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»)
- 4. 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)
- 5. Me Studying Masters in RTU Youth Techclub founder Microsoft Student partner Student fraternity Latvia Cyber-unit
- 6. 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
- 7. 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
- 8. 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
- 9. 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
- 10. Lets get to the business …
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. 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
- 18. Views DOM elements after Angular is compiled Allows to work with components Handles interaction with user and displaying the state
- 19. Controller Responsible for constructing the model for a view to interact with Use controller to manipulate data in the scope.
- 20. Routing You can add routing as a dependency Turns our application in state machine ngRoute vs ui-router
- 21. 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
- 22. 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
- 23. 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,
- 25. 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?
- 26. Thank you! Your feedback is welcomed!