Angular Cheatsheet

angular.md

Angular JS

Directives

• ng-app: Load directives in Page
• ng-controller: Load controller in an HTML element
• ng-show: Display HTML element based on expression
• ng-hide: Hide GTML element based on expression
• ng-repeat: For Loop

  <div ng-repeat="product in store.products">
    display product details...
  </div>
  

• ng-source: For loading resource files such as images in img tag
• ng-click:
• ng-init - initial value
• ng-class

Expressions

Modules

• where we write piece of our Angular application
• makes our code more maintainable, testable and readable
• where we define dependencies for our application

More Operations: http://docs.angularjs.org/guide/expression

Controller

• controllers are where we define our app's behavior by defining functions and values.

Filters

{{data | filter:options}}

date: {{"1388123412323" | date:'MM/dd/yyyy @ h:mma'}}

Uppercase & Lowercase: {{'hello bahul' | uppercase}}

limit to:

{{'Hello New York how you doin' | limitTo:8}}
ng-repeat="product in store.products | limitTo:3"

order by:
<li ng-repeat="product in store.products | orderBy:'-price'">

Tab Example

<section ng-init="tab = 1">
	<ul class="nav nav-pills">
		<li ng-class="{ active:tab === 1 }">
			<a href="#" ng-click="tab = 2">Description</a>
		</li>
		<li ng-class="{ active:tab === 2 }">
			<a href="#" ng-click="tab = 2">Specifications</a>
		</li>
		<li ng-class="{ active:tab === 3 }">
			<a href="#" ng-click="tab = 3">Reviews</a>
		</li>
	</ul>
	
	<div class="panel" ng-show="tab === 1"> ... </div>
	<div class="panel" ng-show="tab === 2"> ... </div>
	<div class="panel" ng-show="tab === 3"> ... </div>
</section>

Here in the line active:tab === 1, active is the class that is to be set, based on the result of expression tab === 1.

Here's a much cleaner way. Logic being separated from the html code

<section ng-controller="PanelController as panel">
	<ul class="nav nav-pills">
		<li ng-class="{ active:panel.isSelected(1) }">
			<a href="#" ng-click="panel.selectTab(1)">Description</a>
		</li>
		<li ng-class="{ active:panel.isSelected(2) }">
			<a href="#" ng-click="panel.selectTab(1)">Specifications</a>
		</li>
		<li ng-class="{ active:panel.isSelected(3) }">
			<a href="#" ng-click="panel.selectTab(1)">Reviews</a>
		</li>
	</ul>

	<div class="panel" ng-show="tab === 1"> ... </div>
	<div class="panel" ng-show="tab === 2"> ... </div>
	<div class="panel" ng-show="tab === 3"> ... </div>
</section>

app.controller("PanelController", function() {
	this.tab = 1;

	this.selectTab = function(setTab) {
		this.tab = setTab;
	}

	this.isSelected = function(setTab) {
		return this.tab === setTab;
	}
});

Custom Tags

<product-panels>
...
</product-panels>

app.directive('ProductPanels', function() {
  return {
    restrict: 'E',
    templateUrl: 'product-panels.html',
    controller: function() {},
    controllerAs: 'panels'
  };
})