This document provides an introduction and overview of frameworks and best practices in JavaScript, with examples using AngularJS. It discusses the history of JavaScript, best practices including modularization and testing, and what modules and frameworks are. It then explains the key components of AngularJS including controllers, directives, services, and how they work together.
4. POP QUIZ
Which company is credited with inventing JavaScript
• Google
• Amazon
• Netscape
• Mozilla
• Microsoft
5. POP QUIZ
Which company is credited with inventing JavaScript
• Google
• Amazon
• Netscape – in 1995
• Mozilla
• Microsoft
JavaScript was built by Brenden Eich in 10 days.
8. MODERN DAY JS ENVIRONMENTS
• Browsers
• Servers
• Node.js
• Databases
• MongoDB
• Drones
• Complex 3D Games
• Oculus Rift
• Musical Instruments
• Operating Systems
• Chromium OS
9. BEST PRACTICES
• Whatever you think is a best practice – AUTOMATE IT - GruntJS
1. JSHint, JSLint
2. Modularize
3. Keep DOM access to a minimum
4. Don’t yield to the browser
5. Testing – Unit Test & e2e
10. • They’re DRY
• Makes your code easier to maintain, easier to change and easier to read
Why Modules?
• Transcends frameworks and libraries
• It is a way to structure your js code
• Create an anonymous function and execute it immediately
• All of the code that runs inside that function lives in a closure
• Provides: Privacy and State
What is a Module?
12. WHAT IS A JAVASCRIPT FRAMEWORK?
• JS had a not-so-good wrap among developers
• Complex handling of browser differences
• jQuery
13. ANGULARJS
• Open Source JavaScript framework developed
and maintained by Google
• Initial release was in 2009
• Turns HTML in a declarative programming
language ready to serve up dynamic content
through two-way data binding
14.
15. DESIGN GOALS
• Decouple DOM manipulation from application logic. This improves the testability of
the code.
• Regard application testing as equal in importance to application writing. Testing
difficulty is dramatically affected by the way the code is structured.
• Decouple the client side of an application from the server side. This allows
development work to progress in parallel, and allows for reuse of both sides.
• Guide developers through the entire journey of building an application: from
designing the UI, through writing the business logic, to testing.
17. CONTROLLER
• Sets up a new $scope
• An object that represents the application model
• Arranged hierarchically
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl',
['$scope',function($scope) {
$scope.greeting = 'Hola!';
}]);
Script.js DOM
<div ng-app="myApp">
<div ng-
controller="GreetingCtrl">
{{ greeting }}
</div>
</div>
18. DIRECTIVE
• DOM things
• Custom elements, class and attributes
• Domain Logic
• There are some powerful directives provided for you
• You can also write your own custom directives – VERY POWERFUL
• Directives can also have their own scope – Plunker Example
• This is where the event listeners are declared
• Must pass everything you need into the directive
19. SERVICE
• Data things
• Factory Functions – Services are singletons
• Inject Services into Controllers, Directives and even other Services
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
return shinyNewServiceInstance;
});