AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)
-
Upload
elfreda-snow -
Category
Documents
-
view
228 -
download
2
Transcript of JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)
![Page 1: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/1.jpg)
JavaScript FrameworksDesktop to Mobile (and an overview of AngularJS)
![Page 2: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/2.jpg)
Goals of a JavaScript Framework• Abstract repetitive code
Manage the DOM (“HTML”) Hide the idiosyncrasies of browsers
… and key for consulting….
• Promote coding guidelines and consistency.
![Page 3: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/3.jpg)
Frameworks
Frameworks we have developers actively using or with knowledge.
Frameworks that we may want to look into.
Frameworks we want to stay away from.
![Page 4: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/4.jpg)
How do we Pick a Framework?• Look at the Application Features
When will users need this application? At their desk, or on the go with a mobile device?
Will there be a lot of data input? Data Grids? Currency Input? Drop Down? Multi Select?
What is the Budget/Timeframe? Some frameworks that offer more come with a license cost that needs to
be accounted for.
• Consultant knowledge of the framework Does the project or timeframe give enough time to learn
a new framework?
![Page 5: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/5.jpg)
Comparison TablejQuery AngularJS ExtJS 4
License MIT MIT Commercial
Pattern N/A MVW (MVVM’ish) MVC
Interface jQuery UI/* Bootstrap/jQuery/*
ExtJS
Unit Testing Jasmine Jasmine Jasmine
Routing Plugin Plugin Plugin
Difficulty Easy Moderate* Moderate
Ideal For Websites Single Page Apps
Data Focused SPA
* Assumes a full understanding of JavaScript
![Page 6: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/6.jpg)
Example Project• IT Hardware Repair – User Stories
As a Admin I need to be able to add hardware. As a Admin I need to be able to delete hardware. As a User I need to submit a repair to IT.
• Single Page Application (aka SPA)
• AngularJS as the Framework
![Page 7: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/7.jpg)
AngularJS Framework• Developed and Maintained by Google with help from the community
• Contains a light version of jQuery called jqLite.
• Very well documented with best practices
• Countless plugins that can be added very quickly and shared.
(function ($) {// most common jQuery abilities will work here
})(angular.element);
![Page 8: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/8.jpg)
Model View Whatever (MVW)• Data Models
• View Template .HTML files.
<input name="foo" ng-model="item.foo" />
<form role="form"> <input name="foo" ng-model="item.foo" /></form>
/app/views/partials/form.html
<div ng-include="/app/views/partials/form.html"></div>
$scope.item = { foo: ‘bar’ } // Controller
![Page 9: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/9.jpg)
Model View Whatever (MVW)Continued
• Whatever… On first glance it looks like a ViewModel, so MVVM.
$scope is pretty much a ViewModel handled by the controller.
Quack
=
$scope.doSomething = function () { /* Something */ };
![Page 10: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/10.jpg)
MVW – What is Data Binding?• Data Binding
One-Way Data Binding Two-Way Data Binding
Source: https://docs.angularjs.org/guide/databinding
![Page 11: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/11.jpg)
Demo
• Bootstrap – A CSS framework created by twitter
Controllers Service Views
LoginController
AdminController
UserController
InventoryService
RepairService
login.html
admin.html
user.html
Base
angular
angular-route
app
![Page 12: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/12.jpg)
Resources• AngularJS Framework: https://angularjs.org/
• jqLite Documentation: https://docs.angularjs.org/api/ng/function/angular.element
• Bootstrap: http://getbootstrap.com/
• Bootstrap Examples: http://bootsnipp.com/
• Slides / Source Code: http://templarian.com/2014/04/30/javascript_tech_talk/
![Page 13: JavaScript Frameworks Desktop to Mobile (and an overview of AngularJS)](https://reader036.fdocuments.net/reader036/viewer/2022062717/56649e205503460f94b0bef7/html5/thumbnails/13.jpg)
Questions?• Framework related questions? CSS? HTML? Bootstrap?
• Thanks for attending the first Tech Talk
• Enjoy a beer and discuss front end development!