Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS
JAVASCRIPT WEB APPLICATION FRAMEWORK
Terminology
MVC architecture
• Model – data
• View – template
• Controller – code (JavaScript) that links views to models
...
jQuery vs. AngularJS
•In jQuery you design a page and then make it dynamic, changing it with DOM manipulations.
•In Angula...
jQuery vs. AngularJS
•Separation of concerns – your view shows what is supposed to happen, your model represents
your data...
Angular Directives
ng-repeat
◦ Allows us to loop through an array
◦ https://docs.angularjs.org/api/ng/directive/ngRepeat
n...
$scope vs. this
http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers
this
•When the controll...
Angular Filters
https://docs.angularjs.org/api/ng/filter/filter
Selects a subset of items from array and returns it as a n...
ngRoute
https://docs.angularjs.org/api/ngRoute
Via routing we can access another Angular feature – deep linking
Use the se...
Animations
https://docs.angularjs.org/guide/animations
Assist with CSS animations
https://docs.angularjs.org/api/ng/direct...
AngularJS Documentation/Links
https://angularjs.org
https://docs.angularjs.org/api
http://stackoverflow.com/questions/1499...
Upcoming SlideShare
Loading in …5
×

Angular js

813 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Angular js

  1. 1. AngularJS JAVASCRIPT WEB APPLICATION FRAMEWORK
  2. 2. Terminology MVC architecture • Model – data • View – template • Controller – code (JavaScript) that links views to models Scopes • Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can watch expressions and propagate events. https://docs.angularjs.org/guide/scope
  3. 3. jQuery vs. AngularJS •In jQuery you design a page and then make it dynamic, changing it with DOM manipulations. •In AngularJS you design the architecture first, then your application, then your view (html template). You don’t alter the DOM (usually). •Think in terms of architecture – single page applications are applications, not webpages. You must think like a server-side developer as well as a front-end developer. •The view is the official record. By looking at it you can tell what directives are being applied. Much cleaner and concise than jQuery. •Data binding – most awesome feature of AngularJS. AngularJS updates the view so you don’t have to code DOM manipulations. •MVC architecture allows for a model completely separate from the view. In jQuery the DOM is the model.
  4. 4. jQuery vs. AngularJS •Separation of concerns – your view shows what is supposed to happen, your model represents your data, there is a service layer to perform reusable tasks and you do DOM manipulations and augment the view with directives. All of this is glued together with controllers. •Dependency Injection – you can declare components and then from other component ask for an instance of it without worrying about loading order, file locations, etc. •Test Driven Development is possible with AngularJS; iterative only with jQuery. Source: stackoverflow.com (link provided on last slide). https://docs.angularjs.org/guide/directive
  5. 5. Angular Directives ng-repeat ◦ Allows us to loop through an array ◦ https://docs.angularjs.org/api/ng/directive/ngRepeat ng-src ◦ Prevents images from loading until the Angular library loads ◦ https://docs.angularjs.org/api/ng/directive/ngSrc
  6. 6. $scope vs. this http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers this •When the controller constructor function is called, this is the controller •When a function defined on a $scope object is called, this is the “scope in effect” when the function was called. This may or may not be the $scope the function was defined on. Inside the function, this and $scope may not be the same. $scope •Every controller has an associated $scope object •A controller function (aka constructor) is responsible for setting model properties and functions/behavior on its associated $scope. •Only methods defined on this $scope are accessible from the HTML/view – ng-click, filters, etc.
  7. 7. Angular Filters https://docs.angularjs.org/api/ng/filter/filter Selects a subset of items from array and returns it as a new array HTML template binding {{ filter_expression | filter : expression : comparator}} JavaScript $filter(‘filter’)(array, expression, comparator) Expression = string, object, or function (custom filters) Comparator = function (actual, expected), true – shorthand for function(actual, expected){return angular.equals(expected, actual)} , false/undefined (case insensitive match shorthand)
  8. 8. ngRoute https://docs.angularjs.org/api/ngRoute Via routing we can access another Angular feature – deep linking Use the service $routeProvider() https://docs.angularjs.org/api/ngRoute/provider/$routeProvider Remember, AngularJS is used to create one page apps. With ngRoute we can simulate multiple pages.
  9. 9. Animations https://docs.angularjs.org/guide/animations Assist with CSS animations https://docs.angularjs.org/api/ng/directive/ngShow Shows or hides the HTML element based on the expression provided to the ngShow attribute. (uses a built in CSS class called ng-hide which sets the display to none with the !important flag)
  10. 10. AngularJS Documentation/Links https://angularjs.org https://docs.angularjs.org/api http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery- background https://egghead.io/technologies/angularjs?order=ASC

×