Download to read offline
Uploaded byMoran Fine
Angular.js presentation
The document provides an overview of the AngularJS framework. It introduces AngularJS and its key concepts including controllers, scopes, directives, core directives like ng-model and ng-repeat, services, and filters. It also provides details about the author such as their background in food engineering, web development at IBM, and 2 years of experience developing with AngularJS. Code examples are included to illustrate several AngularJS concepts.
Angular.js presentation
- 1.
- 2. About me ● B.Scin Food Engineering and Biotechnology ● Web developer at IBM ● Graduate student at The Open University ● Developing in AngularJS for the last 2 years
- 3. AngularJS Framework ● Createdby Misko Hevery in 2009 ● Open source
- 4. Why AngularJS ● Helpsus to build dynamic views for web applications
- 5.
- 6. Dynamic HTML ● VanillaJavaScript
- 7. JQuery ● Cross -browser Compatibility ● Simplify the client side code
- 8.
- 9. AngularJS ● Clean, modular,reusable architecture ● Separation of concerns ● Dependency management ● Testable ● Data binding
- 10.
- 11. Controllers ● AngularJS objectthat should contain the business logic for a single view
- 12.
- 13. Scope ● Scope isthe glue between application controller and the view
- 14.
- 15. Directives ● Markers ona DOM element (attribute, element name, comment or class) that tell AngularJS to attach a specified behavior to that DOM element ● code
- 16. Directives - linkfunction ● Directives that want to modify the DOM typically use the link option. ● code
- 17. ng-model ● Binds aninput, select or textarea to a property on the scope ● code
- 18. ng-repeat ● Instantiates atemplate once per item from a collection ● Each template instance gets its own scope ● code
- 19. ng-show ● Shows (orhides) the given HTML element based on the expression ● code
- 20. ng-hide ● Hides (orshows) the given HTML element based on the expression ● code
- 21. ng-class ● Allows youto dynamically set CSS classes on an HTML element ● code
- 22. $watch ● Registers alistener callback to be executed whenever the watched expression changes ● code
- 23. Services ● Singleton objects ●Used to share code across your app ● To use Angular service, you add it as a dependency for the component ● Angular only instantiates a service when an application component depends on it
- 24. Services ● code withoutservice ● code with service
- 25. $http ● Is usedto facilitate communication with HTTP servers
- 26.
- 27. Filters ● Selects asubset of items from array and returns it as a new array ● code
- 28. Q&A Moran Fine -moranfine@gmail.com
Editor's Notes
- #10 AngularJS was built from the very beginning to be testable. That means the AngularJS team set out to remove every possible excuse for not testing an AngularJS application. As an example, AngularJS uses the dependency injection design pattern so you can easily swap out your production code for mocks.
- #12 When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope. It should contain only the business logic needed for a single view.
- #16 At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular's HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
- #17 function link(scope, element, attrs) { ... } where: scope is an Angular scope object. element is the jqLite-wrapped element that this directive matches. attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values. In angular if you write code in the linking function its generally the post-link function (by default). It is kind of a callback that gets called after the linking function has linked the data with the template.
- #18 what really happens in the last example is: Binding the view into the model, which other directives such as input, textarea or select require. ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
- #19 When the contents of the collection change, ngRepeat makes the corresponding changes to the DOM: When an item is added, a new instance of the template is added to the DOM. When an item is removed, its template instance is removed from the DOM. When items are reordered, their respective templates are reordered in the DOM.
- #20 The ngShow directive shows or hides the given HTML element based on the expression provided to thengShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).
- #22 The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
- #23 The watchExpression is called on every call to $digest() and should return the value that will be watched. (Since $digest() reruns when it detects changes the watchExpression can execute multiple times per $digest() and should be idempotent.) The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal $watch(watchExpression, listener, [objectEquality]); Registers a listener callback to be executed whenever the watchExpression changes. $watch let's you listen for scope changes and define a callback.
- #24 Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app. Angular services are: Lazily instantiated – Angular only instantiates a service when an application component depends on it. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
- #28 Selects a subset of items from array and returns it as a new array.