craftcamp for students - introduction to angularjs
TRANSCRIPT
Introduction to AngularJS
Gunther Laurijssens Consultant @laurigun
Agenda
● What is AngularJS? ● Why use AngularJS?
● Concepts + demos
● Tips
What is angular?
● AngularJS IS NOT - a Library - a replacement for HTML, CSS or JS
● AngularJS IS
- a clientside JavaScript MVC Framework - Extention to HTML with new attributes, custom tags, ..
Why use angular? ● Re-usable components ● Modularity
● Dependency Injection
● Two-way Databinding
● Testing
Concepts
● Expressions
● Filters
● Directives
● Models
● Modules
● Controllers
● 2-Way Databinding
● Services
Getting started
1. Include Angular
2. Bootstrap Angular
Directives • Extend HTML to define custom tags, attributes
and classes
• ng-prefix • Normalization
ngModel
Recommended HTML5
compliant
Directives • As an attribute (A)
• As a class (C)
• As an element (E)
• As a comment (M)
Scopes
• Exactly ONE root Scope via ng-app
• Child scopes (controllers, directives)
• Scope inheritance à Mimic DOM structure
• Determine access to models
Models • Encapsulate application data
• Variable on Scope
• ngModel directive
Expressions • JavaScript-like code snippets that are
usually placed in bindings - {{ expression }}
• Valid expressions - {{ 1 + 1 }} - {{ a + b }} - {{ name }}
Filters ● Formatting values
● Separated by | (pipe)
● {{ expression | filter }}
● Built-in filters: uppercase, lowercase, limitTo, …
Templates
HTML + Directives + Filters
View
Compile
Modules ● AngularJS has nothing like a main method
● Container for custom components
● Allows us to build re-usable components - Controllers - Services - Filters - Directives
Controllers
• Set up the inital state of $scope object
• Add behavior to the $scope object
• Inheritance
Controllers
• Creates a new child scope
• Scope of view injected in Controllers constructor function
$Scope
View Controller
ViewModel
Model
2-way databinding
Services
● Extract re-usable code
● Communicate between controllers
● Lazily instantiated (Dependency Injection)
● Singletons
Services ● $rootScope
● $scope
● $http ● $q
● $log
• $interval
• $resource
• $timeout
• $window
• $document
Services - Factory
Services - Service
Tips
Modules • An application level module
• A module for each Feature
• A module for each reusable component - Controllers - Services - Filters - Directives
Controllers • Do not use controllers to:
- Manipulate DOM ( à use directives)
- Format input (à use forms)
- Share code or state across Controllers (à use services)
Dependencies
• What happens with Minification?
- Renames function parameters
- How do does compiler know which is which?
ngSrc
• The easy way
• How it should be written
Not covered • Promises
• Localization
• Form Validation
• Views & Routes
• Server communication
• Testing
• …
Resources
• https://docs.angularjs.org/
• https://egghead.io/
• https://thinkster.io/
• http://www.slideshare.net/craftworkz/
• https://github.com/craftworkz/ucll-workshop-angularjs
Thanks for listening!
Questions?