Downloaded 29 times
![Modules
angular.module('readingListApp', [])
<html ng-app="readingListApp" ></html>](https://image.slidesharecdn.com/angularjs1-140629054757-phpapp02/75/Getting-Started-With-AngularJS-8-2048.jpg)
Uploaded byOmnia Helmi
Getting Started With AngularJS
This document provides an overview of AngularJS, including what it is, why it is useful, how it compares to Backbone, and how to get started using it. AngularJS is an open-source MVC framework for building single-page applications. It helps organize JavaScript code and build responsive websites. While smaller than Backbone, AngularJS provides better data binding and template support. The document outlines the basics of AngularJS directives, modules, expressions, controllers, models, filters, creating directives, services, and unit testing. It also discusses tools like Karma, Jasmine, Bower, Yeoman, and Angular Mock that can be used with AngularJS.
More Related Content
Similar to Getting Started With AngularJS
Getting Started With AngularJS
- 1. AngularJS By: Omnia Gamal email:- omnia.gamal1988@gmail.com twitter @Omnia_G
- 2. Agenda ● What isAngularJS ? ● Why Angular? ● Angular Vs Backbone ● Getting Started With AngularJS
- 3. What is AngularJS? ● is an open-source MVC framework ● single-page applications ● maintained by Google
- 4. Why AngularJS ? ●helps you organize your JavaScript ● helps create responsive (as in fast) websites. ● plays well with jQuery ● is easy to test
- 5. Angular Vs Backbone keys: osize (BB 18kb vs angular 77kb but … ) o memory management o nested model o binging (angular is better than why?) o RESTFUL ( angular will need ngResource ) o Validation o Template Support
- 6. Getting Started WithAngularJS Agenda: o Directives o Modules o Expressions o Controllers o Model o Filters o Create Directives o services o Unit Testing
- 7. Directives Ex:- ● ng-app ● ng-controller ●ng-show ● ng-hide ● ng-repeat ● ng-model
- 8.
- 9.
- 10.
- 11.
- 12. Create Directives ● restrict ●templeate or templateUrl ● scope (Isolated Scope & Binding) ● controller ● controllerAs
- 13. Services ● $http ● injector(if you want to read more about dependency injection in JS http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
- 14.
- 15.
- 17. ● Karma :-(previously known as Testacular) o is Google’s JavaScript test runner o the natural choice for AngularJS o it is also test framework agnostic (What that mean?) ● Jasmine :- (is the best choise for many and It will be our choice for testing now) o Its syntax is quite similar to that of RSpec ● Bower :- o is a package manager that helps you find and install all your application dependencies o It runs over git, much like Rails bundler
- 18. ● Yeoman :- ois a toolset containing 3 core components: i. Grunt ii. Bower iii. the scaffolding tool Yo o Yo generates boilerplate code with the help of generators and automatically configures Grunt and Bower for your project. You can find generators for almost any JavaScript framework (Angular, Backbone, Ember, etc.) o generator-angular
- 19. Angular Mock ● angular.mock omodule o inject o services $controller $rootScope $httpBackend
- 20. Ref :- ● Code:- https://github.com/OmniaGM/learn_AngularJS ● AngularJS screencasts hosted by John Lindquist, JetBrains Evangelist + Productivity addict. ● codeschool - shaping up with angularJS ● Your First AngularJS App : Scaffolding, Building, and Testing ● Why AngularJS is generally better in Angular vs Ember vs backbone
Editor's Notes
- #4 AngularJS is an open-source web application framework, maintained by Google, that assists with creating single-page applications
- #6 backbone is much stronger debency on jquery, it’s need too _, json2 Angular it take care of memory management, layout management, events but backbone if you use marionette for exp you will never have to worry about memory management but if you not you will need to handle this by yourself Not supported in backbone
- #9 p#15
- #10 p#19
- #11 p#23
- #12 P#52
- #13 The “&” operator allows you to invoke or evaluate an expression on the parent scope of whatever the directive is inside of. = two binding , can be of any type. These work like actual bindings, any changes to a bound value will be reflected in everywhere. @, One binding, they are always strings. Whatever you write as attribute value, it will be parsed and returned as strings. Which means anything inside curly braces {{ }}, will reflect the value. {{::color}}
- #14 P#173
- #17 If you work with JavaScript, it’s highly probable that you already know of at least one of these tools. Let’s briefly review each of these technologies and what it’s useful for:
- #18 Karma it is also test framework agnostic; which means that you can use it in conjunction with any test framework of your choice (such as Jasmine, Mocha, or QUnit, among others). Grunt is a task runner that helps automate several repetitive tasks, such as minification, compilation (or build), testing, and setting up a preview of your application. Bower is a package manager that helps you find and install all your application dependencies, such as CSS frameworks, JavaScript libraries, and so on. It runs over git, much like Rails bundler, and avoids the need to manually download and update dependencies.
- #19 since we’re focusing here on Angular, we’re going to use the generator-angular project.