AngularJS is an open-source web application framework, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.
Angular makes browsers smarter — without the use of extensions or plug-ins. It includes
- How to use client-side data binding and dependency injection to build dynamic views of data that change immediately in response to user actions.
- Angular creates listeners on your data without the need for DOM manipulation.
- A better, easier way to test your web apps.
- Angular services to make common web tasks, such as getting data into your app, easier.
- Create a dynamic application that works in any browser.
- Define the differences between Angular and common JavaScript frameworks.
- data binding works in AngularJS.
- Use the angular-seed project to quickly boot-strap your own projects.
- Create and run tests.
- Identify resources for learning more about AngularJS.
Core Concepts
Templates
In Angular applications, you move the job of filling page templates with data from the server to the client. The result is a system better structured for dynamic page updates. Below are the core features you’ll use.
Data binding
Data Binding in Classical Template Systems
Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.
Data Binding in Angular Templat
Angular templates work differently. First the template (which is the uncompiled HTML along
with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.
Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.
Expressions
- 1+2={{1+2}}
- Output = 1+2 = 3
Directives
- Creating Custom Directives
$route
- $route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url()and tries to map the path to an existing route definition.
Filters
- Filters are used to filter the data from view,
- You can create your own filter also
Forms
- Concepts of AngularJS Forms
- Controls (input, select, textarea) are ways for a user to enter data. A Form is a collection of controls for the purpose of grouping related controls together.
- Form and controls provide validation services, so that the user can be notified of invalid input. This provides a better user experience, because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.
Application Structure
When to use directives, controllers or services
Angular JS is a very powerful front-end MVC framework. It also introduces many concepts that may be unfamiliar. A few of these are:
- Directives
- Controllers
- Services
Dependency injection
Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies.
The Angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to components as requested.
Scopes
scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.
Communicating with servers
$http
The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.
$resource
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $httpservice.
Requires the ngResource module to be installed.
Other AngularJS Features
- Animation:Core concepts, ngAnimate API, and Animation in AngularJS 1.2
- Security: Strict Contextual Escaping, Content Security Policy, $sanitize, video
- Internationalization and Localization: Angular Guide to i18n and l10n, date filter, currency filter, Creating multilingual support
- Mobile: Touch events
