💾 Archived View for gem.sdf.org › s.kaplan › cheatsheets › libraries-and-frameworks › angularjs.md captured on 2024-03-21 at 15:44:21.

View Raw

More Information

⬅️ Previous capture (2023-09-08)

-=-=-=-=-=-=-

# AngularJS Cheatsheet

## Overview
- AngularJS is a JavaScript framework for building dynamic web applications.
- It uses a Model-View-Controller (MVC) architecture to organize code and provide separation of concerns.
- AngularJS is often used for single-page applications (SPAs) and is known for its two-way data binding and dependency injection.

## Directives
- Directives are markers on a DOM element that tell AngularJS to attach a specific behavior to that element.
- Directives can be used to create custom HTML tags, attributes, and classes.
- Some common directives include `ng-app`, `ng-model`, `ng-repeat`, and `ng-click`.

## Controllers
- Controllers are JavaScript functions that are responsible for controlling a part of the UI.
- Controllers can be used to set up the initial state of the scope, handle user input, and respond to events.
- Controllers can be defined using the `controller` method.

## Services
- Services are objects that provide functionality to an AngularJS application.
- Services can be used to share data between controllers, handle HTTP requests, and perform other common tasks.
- Services can be defined using the `service` method.

## Filters
- Filters can be used to format data for display in the UI.
- Some common filters include `currency`, `date`, `uppercase`, and `lowercase`.
- Filters can be chained together to create more complex transformations.

## Directives
- Directives are markers on a DOM element that tell AngularJS to attach a specific behavior to that element.
- Directives can be used to create custom HTML tags, attributes, and classes.
- Some common directives include `ng-app`, `ng-model`, `ng-repeat`, and `ng-click`.

## Example

<!DOCTYPE html>

<html ng-app="myApp">

<head>

<meta charset="UTF-8">

<title>AngularJS Example</title>

</head>

<body ng-controller="myCtrl">

<h1>Hello {{name}}!</h1>

<p ng-repeat="item in items">{{item}}</p>

<input type="text" ng-model="name">

<button ng-click="addItem()">Add Item</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.name = "World";

$scope.items = ["Item 1", "Item 2", "Item 3"];

$scope.addItem = function() {

$scope.items.push("New Item");

};

});

</script>

</body>

</html>


## Resources
- [AngularJS Website](https://angularjs.org/)
- [AngularJS Tutorial](https://docs.angularjs.org/tutorial)
- [AngularJS API Reference](https://docs.angularjs.org/api)