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.
2. Agenda
● What is AngularJS ?
● 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:
o size (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 With AngularJS
Agenda:
o Directives
o Modules
o Expressions
o Controllers
o Model
o Filters
o Create Directives
o services
o Unit Testing
13. Services
● $http
● injector (if you want to read more about dependency injection in JS
http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
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 :-
o is 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
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
Hinweis der Redaktion
AngularJS is an open-source web application framework, maintained by Google, that assists with creating single-page applications
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
p#15
p#19
p#23
P#52
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}}
P#173
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:
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.
since we’re focusing here on Angular, we’re going to use the generator-angular project.