Upload
eusebiu-schipor
View
168
Download
0
Embed Size (px)
Citation preview
AngularJS is awesome!
Eusebiu Schipor - Frontend Developer
http://angularjs.org
AngularJS:
• Is a client-side MVW JavaScript framework for writing single page web applications.• It's built and mantained by Google.• Help us building testable web applications that scale.• It lets you use HTML as your template language and lets
you extend HTML's syntax to express your application's components clearly and succinctly.• The unique and innovative features are two-way-data
bindings, dependency injection, easy-to-test code and extending the HTML dialect by using directives.
Some key features of the Angular JS in web development:
• Two way data binding• MVC framework• Templating• Custom-directive (reusable components)• REST-friendly• Set up a link for any dynamic page• Form Validation• Server Comunication• Localization• Dependency injection• Full testing environment• AngularJS can do everything that jQuery does and much more, yet is roughly
equivalent in download size
AngularJS vs jQueryjQuery AngularJS
Restful API NO YES
Integration test runner NO YES
MVC support NO YES
Template NO YES
Two way data binding NO YES
Dependency injection NO YES
AJAX YES YES
Cross Module Communication YES YES
Unit test runner YES YES
Form validation NO YES
Localization NO YES
File size 32 kb 38 kb
Model-View-Controller Architecture
Single Page Applications (SPA)• In a Single Page Application (SPA), either all necessary code (HTML, CSS,
JavaScript) is retrieved with a single page load.• Appropiate resources are dynamically loaded and added to the page as
necessary, ussually in response to user actions.• The page does not reload at any point in the process.• Interaction with the single page application often involves dynamic
communication with the web server behind the scenes.• SPAs are backe-end independent, and we only care about the JSON
data coming back, be it from JAVA, .NET, PHP or any other server-side language.
Main components of AngularJS:
• Directives - HTML annotations that trigger JavaScript behaviors• Modules - Where our application components live• Controllers - Where we add application behavior• Expressions - How values get displayed within the page
Getting started
Modules
• We can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.• A container for different parts of application• Modules can have other modules as dependencies
Creating a module
Controllers
• An Angular Controller allows us to interact with a View and Model, it's the place where presentational logic can take place to keep the UI bindings in sync with the Model.
Dependency injection
When MyController is created by AngularJS, the $scope and instances of dep1 and dep2 are automatically passed in. This eliminates the need for hard-coding dependencies with global variables or creating instances manually within the component, which greatly complicates and limits testability.
Expressions
• Allow you to insert dynamic values into your HTML.• AngularJS expressions are written inside double braces: {{expression}}• Binds data to HTML the same way as the ng-bind directive, and
output the data exactly were the directive is written.• They are used for small calculations only or getting the value of
$scope properties.
$scope
• Every controller has an associated $scope object.• $scope is an object that refers to the application model• In the Model-View-Controller structure, the $scope
object becomes the model.• We only use $scope inside Controllers, where we bind
data from the Controller to the View.
Views
DirectivesAngularJS extends HTML through use of directives, a feature that allows you to create your own HTML elements.- ng-app directive initializes an AngularJS application.- ng-init directive initializes application data.- ng-click directive allows you to specify custom behavior when an element is clicked
Using directives
_
Custom Directives
Using filters• A filter formats the value of an expression for display to
the user. They can be used in view templates, controllers or services and it is easy to define your own filter.
Two-way Data Binding
• Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
AngularJS form validation• There are many form validation directives available in AngularJS:
Creating templates
$http Service
The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
Custom services
• We can define our own custom services in AngularJS apps and use them wherever required.• There are several ways to declare AngularJS service
within application. Following are two simple ways:
The Role of Factories
AngularJS routing• Since we are making a single page application and we
don’t want any page refreshes, we’ll use Angular’s routing capabilities.
Defining routes
Pain Points
• Angular Expressions are used extensively in the View layer of Angular.• It lets the developer use complicated logic and even
perform assignment operations and calculations, all inside the view templates• Putting logic inside the templates makes it harder to
test, sometimes impossible to test.
Summary• AngularJS provides a robust “SPA” framework for bulding robust
client-side applications.
Key features:• Directives and filters• Two-way data binding• Views, Controllers, Scope• Modules and Routes
Resources• http://angularjs.org• http://builtwith.angularjs.org• http://angular-ui.github.io• http://mgcrea.github.io/angular-strap• http://pluralsight.com