AngularJS 101

Why AngularJS?

AngularJS lets you extend HTML for declaring dynamic views in web-applications.

AngularJS is a toolset for building the framework most suited to

your application development and fully extensible and works well with other libraries.

Core Concepts

• Client-Side Templates

• Model View Controller (MVC)

• Data Binding

• Dependency Injection

• Directives

Client-side Templates

Model View Controller (MVC)

The core idea behind MVC is that you have clear separation in your code between

managing its data (model),

the application logic (controller),

and presenting the data to the user (view).

Data Binding

Dependency Injection

For example, the $scope object that does our data binding is passed to us automatically; we didn’t have to create it by calling any function.

$scope isn’t the only thing we can ask for. If we want to data bind to the location URL in the user’s browser, we can ask for an object that manages this by putting $location in our constructor.

Directives

A powerful DOM transformation engine that lets you extend HTML’s syntax.

Examples include the double-curly notation for data binding,

ng-controller for specifying which controller oversees which part of the view,

and ng-model, which binds an input to part of the model.

We call these HTML extension directives.

We can write our own to extend HTML’s template abilities

to do anything we can dream of.

Anatomy of an AngularJS

• Invoking Angular

• Model View Controller

• Templates and Data Binding

• Organizing Dependencies with Modules

• Formatting Data with Filters

• Changing Views with Routes and $location

• Talking to Servers

• Changing the DOM with Directives

• Validating User Input

Invoking Angular

• Loading the Script

• Declaring Angular’s Boundaries with ng-app

Loading the Script

Declaring Angular’s Boundaries with ng-app

Model View Controller

• A model containing data that represents the current state of your application.

• Views that display this data.

• Controllers that manage the relationship between your model and your views.

Model View Controller

Templates and Data Binding • Displaying Text • Form Inputs • A Few Words on Unobtrusive JavaScript • Lists, Tables, and Other Repeated Elements • Hiding and Showing • CSS Classes and Styles • Considerations for src and href Attributes • Expressions • Separating UI Responsibilities with Controllers • Publishing Model Data with Scopes • Observing Model Changes with $watch • Performance Considerations in watch()

Displaying Text

Form Inputs

1. Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser.

2. Some folks use browsers that work differently. Visually impaired folks who use screen-readers and some mobile phone users can’t use sites with JavaScript.

3. Javascript works differently across different platforms. IE is usually the culprit here. You need to put in different event-handling code depending on the browser.

4. These event handlers reference functions in the global namespace. It will cause you headaches when you try to integrate other libraries with functions of the same names.

5. These event handlers combine structure and behavior. This makes your code more difficult to maintain, extend, and understand.

A Few Words on Unobtrusive JavaScript

A Few Words on Unobtrusive JavaScript

Lists, Tables, and Other Repeated Elements

Hiding and Showing

CSS Classes and Styles

Considerations for src and href Attributes

Expressions

We can do simple math (+, -, /, *, %), make comparisons (==, !=, >, <, >=, ⇐),

perform boolean logic (&&, ||, !) and bitwise operations (\^, &, |).

We can call functions we expose on $scope in our controller

and we can reference arrays and object notation ([ ], { }, .).

Separating UI Responsibilities with Controllers

The $scope passed to a nested controller prototypically inherits from its parent controller’s $scope.

In this case, this means that the $scope passed to ChildController will have access to all the properties of the $scope passed to ParentController.

Publishing Model Data with Scopes

Observing Model Changes with $watch

Performance Considerations in watch()

Organizing Dependencies with Modules

Enter modules. They provide a way to group dependencies for a functional area within

your application, and a mechanism to automatically resolve dependencies (also

known as dependency injection).

Generically, we call these dependencies services, as they provide specific services to

our application.

Organizing Dependencies with Modules

Formatting Data with Filters

Changing Views with Routes and $location

Changing Views with Routes and $location

Changing Views with Routes and $location

Changing Views with Routes and $location

Talking to Servers

Changing the DOM with Directives

Validating User Input

Thank You

https://angularjs.org/

http://oreil.ly/angularJS