1. Introduction to AngularJS
First of all i would like to thank you all, for being a part of Ahmedabad AngularJS Group.
I welcome all of you to our Ahmedabad AngularJS Group.
Let me just brief you guys about the group, why we have started this group? and What is the Idea behind starting this group?
To create awareness about AngularJS
To create a better community of AngularJS in Ahmedabad.

2. What is AngularJS? HTML enhanced for web apps.
MVW Architecture(Model View Whatever)
Framework supporting Web Components and MDV(Model Driven Views)
AngularJS is built around the belief that declarative programming should be used for building user interfaces and wiring software components, while imperative programming is excellent for expressing business logic.
The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes DOM manipulation and improves testability & performacce.
Angular follows the MVW pattern of software engineering and encourages loose coupling between presentation, data, and logic components. Using dependency injection, Angular brings traditional server-side services, such as view-dependent controllers, to client-side web applications. Consequently, much of the burden on the backend is reduced, leading to much lighter web applications.
MVW (Model View Whatever)
A basic concept of MVW is that all definitions are associated with a named Module. Modules can then be aggregated to form complete web applications. Modules can depend on one another, so that including a single Module in your WebApplication may bring along additional functionality on which that Module depends.
Well there are many different JavaScript frameworks available in this genre, all invented for the same purpose. They all try to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer.

3. History behind AngularJS?
Developed in 2009 by Adam Abrons and Miško Hevery at Brat Tech LLC
Named after “<“ (ankle brackets in HTML Tag)
Originally it was hosted as “GetAngular.com”
Got released as OpenSource Library
Adam left the project & Hevery at Google continued to develop and maintain AngularJS with Google employees Igor Minar & Vojta Jina.
Google supported the project and hence called AngularJS by Google (angularjs.org).
AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons at Brat Tech LLC as the software behind an online JSON storage service.
Their software have been priced by the megabyte, for easy-to-make applications for the enterprise.
This venture was located at the web domain “GetAngular.com”.
Before the two decided to abandon the business idea and release Angular as an open-source library.
Abrons left the project, but Hevery, who works at Google, continues to develop and maintain the library with fellow Google employees Igor Minár and Vojta Jína

4. Design Goals of AngularJS?
Decouple DOM manipulation from application logic.
Regard application testing as equal in importance to application writing.
Decouple the client side of an application from the server side.
Design goals
Decouple DOM manipulation from application logic. This improves the testability of the code.
Regard application testing as equal in importance to application writing. Testing difficulty is dramatically affected by the way the code is structured.
Decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
Guide developers through the entire journey of building an application: from designing the UI, through writing the business logic, to testing.

5. Features of AngularJS Data Binding Controller POJO Deep Linking
Form Validation
Server Communication
Data Binding
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
Controller
Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.
POJO
Unlike other frameworks, there is no need to inherit from proprietary types in order to wrap the model in accessors methods. Angular models are plain old JavaScript objects. This makes your code easy to test, maintain, reuse, and again free from boilerplate.
Deep Linking
A deep link reflects where the user is in the app, this is useful so users can bookmark and links to locations within apps. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep link with desktop app-like behavior.
Form Validation
Client-side form validation is an important part of great user experience. AngularJS lets you declare the validation rules of the form without having to write JavaScript code. Write less code, go have beer sooner.
Server Communication
AngularJS provides built-in services on top of XHR as well as various other backends using third party libraries. Promises further simplify your code by handling asynchronous return of data.

6. Features of AngularJS Directives Reusable Components Localisation
Embeddable
Injectable
Testable
Directives
Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.
Reusable Components
We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.
Localisation
An important part of serious apps is localization. Angular's locale aware filters and stemming directives give you building blocks to make your application available in all locales.
Embeddable
AngularJS works great with other technologies. Add as much or as little of AngularJS to an existing page as you like. Many other frameworks require full commitment. This page has multiple AngularJS applications embedded in it. Because AngularJS has no global state multiple apps can run on a single page without the use of iframes. We encourage you to view-source and look around.
Injectable
The dependency injection in AngularJS allows you to declaratively describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced.
Testable
AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.

7. Why AngularJS? Proper MVW Extensible UI (declarative user interface)
POJO type Data Models
Directives & Reusable components
Filters providing flexibility
Good support for IE 8 & above
Proper MVW
Angular implements MVC by asking you to divide your app into to components, and then Angular manages rest for you and also server as the pipeline that connects them. As compared to other frameworks which also ask you to divide app into components, but at same time they ask you to write code to string them up together again. As Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier.
Extensible UI (declarative user interface)
Angular makes use of raw HTML to define the User Interface. As all of you know that HTML is more intuitive and less convoluted than writing interface in Javascript. its like What You See Is What You Get, and which makes it less brittle as compared to views logic written in Javascript. You can easily ask UI designers to work on the application without breaking any thing in application and having less developer mindset.
POJO type Data Models
Data models in angular are different than what we are aware of in other languages. In traditional sense when you say Data model, it is something that you think of a class interacting with Database and involved in maintaining Persistence of data, transaction,etc. But in AngularJS its basically a plain old javascript object which do not require and extraneous getter and setter functions. Data models in Angular is just a temporary storage area which allows user to put and get the data from it, and in AngularJS Data model works closely with Controller and view. To make a clear distinction from the traditional sense of data model, AngularJS call it as “SCOPES”
AngularJS bounds all the properties of data model to the associated view, and quietly watches for the change to these properties and updates the view automatically when it sense any change in the property. All the data in scope are feed by controllers according to business logic need.
Directives & Reusable components
Directives are the features provided by Angular to create Reusable components and bring additional functionality to HTML. Once directive has been created you need to just use it as regular HTML tag and provide appropriate attributes to it, without worrying about DOM manipulation to render them.
Directives are designed to be standalone reusable elements separate from your app. In fact, if a particular element becomes adopted by the HTML5 standard, it should be as simple as removing your custom directive, and your app should behave exactly the same without needing to change your app.
Filters providing flexibility
Filters are standalone functions separate from the application like directives but the main functionality of filters is transformation of data from one format to other format. There are various types of filters that allows you to perform simple task like formatting-decimal place, formatting dates, sorting array, reversing the order of array, etc.
Filter just filters the data using the transformation function before it is rendered in view.
Cross Browser Support
Basically when it comes for Cross browser support, main problem comes IE. Angular JS works well with all the browsers, also it works well with IE as well with some care and steps listed by AngularJS.

8. Why AngularJS? Write less Javascript Code In place DOM Manipulation
In place Service Providers
Good Unit testing support
Supports better routing
Good Support for Animation
Write less JavaScript Code
Till this point we have seen various benefits, putting it all together we can say that
We don’t have to write own MVC Pipeline
Data models are simple
Data binding means you don’t have to worry about the DOM manipulation.
Directives are separate from main application, which allows parallel development and gets integrated with minimal issues and code
Filters allow to transform data from one format to another without changing any thing in controller and using it directly in view.
In Place DOM Manipulation
In general view manipulates the DOM to present the data and to add behaviour. All the DOM manipulation in AngularJS occurs in directives rather than in view. AngularJS interprets view as an separate HTML page with placeholders for data, this makes the UI designers to work well in application.
As DOM manipulation is taken care by AngularJS, UI Designer can focus on view without worrying about DOM manipulation logic to be written at backend.
It becomes great fun in developing web application by making app purely about presenting data into views, and not have to worry about DOM manipulation.
In Place Service Providers (SP)
Service Provider is the functionality provided by AngularJS which does not get involved in main Web App, it just provides an API to expose the functionality you need to expose to main Web App. Main use of SP is to
Create resource sharing service which allows to share data between multiple controllers.
To expose functions that interact with Server to push and pull the data and provide offline data.
Main task of Controller in AngularJS is to focus on View and Scope to which it is assigned. Controllers in AngularJS is a simple POJO functional that manipulates the scope, perform validation, pre fill form using data from server. Hence controller uses the SP to get the data without worrying about backend logic or stuff involved.
This is the Services that help AngularJS to make controller light weight and perform all the heavy Data manipulation in Services.
Good Unit Testing Support
The whole of AngularJS is linked together by Dependency Injection (DI). It’s what it uses to manage your controllers and scopes. Because all your controllers depend on DI to pass it information, AngularJS’s unit tests are able to usurp DI to perform unit testing by injecting mock data into your controller and measuring the output and behavior. In fact, AngularJS already has a mock HTTP provider to inject fake server responses into controllers.
This beats the more traditional way of testing web apps by creating individual test pages that invoke one component and then interacting with it to see if it works.
Supports better routing
When you want to develop a web app using JS and HTML, the main problem lies in processing URLs and passing parameters to URLs like we pass to any backend in form of POST data or Query Params. AngularJS solves this problem by providing good support for DeepLinking of routes (URL) to Controllers and View. This will make task of developers very easy to get Query params in Controller. It provides support for routes similar to that provided in RoR, but in slight different manner by binding URL to View and controller.

9. Sites using AngularJS nasa.gov stackoverflow.com

10. Lets have a code walkthrough

11. Questions?

12. Thank You
Dipesh Patel