AngularJS Cheatsheet

angularJS.md

AngularJS

ng = A**ng**ular

A module contains the different components of an AngularJS app

A controller manages the app's data

A directive tells that a module will live within the element, termed the application's scope. It defines the scope.

An expression displays values on the page

A filter formats the value of an expression

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

Controller (MainController.js) => app.controller('MainController', ['$scope', function($scope){ $scope.title = 'Milan is the best!'; $scope.promo = "He's learning AngularJS."; $scope.product = {name: 'Angular for Beginners', price: 19, pubdate: new Date('2014', '02', '30') } }]);

Directive (index.html) => ng-app="myApp" | ng-controller="MainController" | ng-repeat="product in products" | ng-src="{{ product.cover }}" | ng-click="plusOne($index)"

Expression (index.html) => {{ name }}

Filter (index.html) => {{ price | currency }}

Angular Flow

A user visits the AngularJS app.

The view presents the app's data through the use of expressions, filters, and directives. Directives bind new behavior HTML elements.

A user clicks an element in the view. If the element has a directive, AngularJS runs the function.

The function in the controller updates the state of the data.

The view automatically changes and displays the updated data. The page doesn't need to reload at any point.

In app.js, we created a new module named MyApp. A module contains the different components of an AngularJS app.

Then, in index.html we added . The ng-app is called a directive. It tells AngularJS that the MyApp module will live within the element, termed the application's scope. In other words, we used the ng-app directive to define the application scope.

In MainController.js we created a new controller named MainController. A controller manages the app's data. Here we use the property title to store a string, and attach it to $scope.

Then, in index.html, we added

. Like ng-app, ng-controller is a directive that defines the controller scope. This means that properties attached to $scope in MainController become available to use within

.

Inside

we accessed $scope.title using {{ title }}. This is called an expression. Expressions are used to display values on the page. The value of title showed up when we viewed the app in the browser.

***Directives are a way to make standalone UI components, like

***Services are a way to make standalone communication logic, like forecast which fetches weather data from a server

***Routes are a way to manage apps containing more views.