💾 Archived View for gem.sdf.org › s.kaplan › cheatsheets › libraries-and-frameworks › angularjs.md captured on 2024-05-12 at 15:32:11.
⬅️ 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)