AI Generated Cheatsheets

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 !</h1>
  <p ng-repeat="item in items"></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

This site is open source. Improve this page.