-
-
Save Code0987/bd4cf37ec99f354348121074031536ab to your computer and use it in GitHub Desktop.
My simple AngularJS Cheatsheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Using AngularJS | |
=============== | |
Website: [https://angularjs.org/](https://angularjs.org/) | |
Docs: [https://docs.angularjs.org/guide](https://docs.angularjs.org/guide) | |
Init with Module | |
----------- | |
See [`main-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-main-module-js) | |
```html | |
<html ng-app="app"> | |
``` | |
Manual bootstrap with Module | |
----------- | |
See [`bootstrap.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-bootstrap-js) and [`main-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-main-module-js) | |
```html | |
<div id="loading">Loading...</div> | |
``` | |
Controller | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) and after that [`controller-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-module-js) | |
```html | |
<div ng-controller="ctrl"> | |
<h1>{{ headline }}</h1> | |
</div> | |
``` | |
Controller with Scope | |
----------- | |
See [`controller-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-module-js) | |
```html | |
<div ng-controller="Controller"> | |
<p ng-bind="sayHello"></p> | |
</div> | |
``` | |
Controller with Scope and method binding | |
----------- | |
See [`controller-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-module-js) | |
```html | |
<div ng-controller="Controller"> | |
<p ng-bind="getHelloExpression()"></p> | |
<button ng-click="click()">Make Click</button> | |
</div> | |
``` | |
Root Scope | |
----------- | |
See [`main-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-main-module-js) | |
```html | |
<p>{{ version }}</p> | |
``` | |
Filter | |
----------- | |
See [default filters](https://docs.angularjs.org/api/ng/filter) | |
```html | |
<p>{{ prodct.price | currency }}</p> | |
<p>{{ prodct.pubdate | date }}</p> | |
``` | |
Controller Hierarchy | |
----------- | |
See [`controller-module.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-module-js) | |
```html | |
<div ng-controller="Controller"> | |
<p ng-bind="getHelloExpression()"></p> | |
<button ng-click="click()" ng-controller="ButtonController">{{ label }}</button> | |
</div> | |
``` | |
List / Repeat | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) | |
```html | |
<ul class="unstyled"> | |
<li ng-repeat="item in items">{{ item.name }}</li> | |
</ul> | |
``` | |
Inline styles | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) | |
Using `style="font-size:{{ item.val }}px"` will only work for IE <= 11; `ng-style` is supported down to IE8. | |
```html | |
<ul class="unstyled"> | |
<li ng-repeat="item in items" ng-style="{'fontSize':(item.val+'px')}">{{ item.name }}</li> | |
</ul> | |
``` | |
Bidirectional binding | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) | |
```html | |
<form class="form-horizontal"> | |
<input type="text" ng-model="input"/> | |
</form> | |
<p>Your input: {{ input }}</p> | |
``` | |
Click event | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) | |
```html | |
<button class="btn" ng-click="add()">Add</button> | |
``` | |
Method binding | |
----------- | |
See [`controller.js`](https://gist.github.com/hofmannsven/d67f0cb2f67911a438ed#file-controller-js) | |
```html | |
<p>Available items: {{ getItemsLenght() }}</p> | |
``` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var intID; | |
intID = setInterval( function() { | |
if ( /loaded|complete/i.test(document.readyState) ) { | |
angular.bootstrap( document, ['app'] ); | |
clearInterval( intID ); | |
} | |
}, 10 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Controller( $scope, $log, Model ) { | |
$log.log( 'Controller instance for view.' ); | |
$scope.sayHello = 'Hello world!'; | |
$scope.label = 'Default label'; | |
/* | |
// Default within $scope | |
$scope.click = function () { | |
Model.setVariable( Model.getVariable() + 1 ); | |
}; | |
*/ | |
// Prepare to leave $scope | |
this.model = Model; | |
var that = this; | |
$scope.click = function () { | |
that.onClick(); | |
}; | |
$scope.getHelloExpression = function () { | |
return $scope.sayHello + ' #' + Model.getVariable(); | |
}; | |
this.scope = $scope; | |
} | |
var ctrl = Controller.prototype; | |
ctrl.onClick = function () { | |
// Call setUp() from root scope | |
this.scope.$root.setUp(); | |
}; | |
function ButtonController( $scope, $log, Model ) { | |
// Overwrite parent label | |
$scope.label = 'Custom label'; | |
// Overwrite parent click() | |
this.scope = $scope; | |
var that = this; | |
$scope.click = function() { | |
that.onClick(); | |
} | |
} | |
var btnctrl = ButtonController.prototype; | |
btnctrl.onClick = function () { | |
console.log('Clicked.'); | |
// Call parent click() | |
this.scope.$parent.click(); | |
}; | |
var controller = angular.module('app.controller', ['app.model']) | |
.controller( 'Controller', Controller ) | |
.controller( 'ButtonController', ButtonController ) | |
; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function ctrl( $scope ) { | |
$scope.headline = 'Headline'; | |
$scope.items = [ | |
{ name: 'Item 1', val: 10 }, | |
{ name: 'Item 2', val: 12 }, | |
{ name: 'Item 3', val: 14 }, | |
{ name: 'Item 4', val: 16 } | |
]; | |
$scope.product = { | |
price: 19, | |
pubdate: new Date('2015', '08', '01') | |
} | |
$scope.getItemsLenght = function () { | |
return $scope.items.length; | |
}; | |
$scope.input = 'Username'; | |
$scope.add = function () { | |
$scope.items.push( { name:$scope.input, val:10 } ); | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app = angular.module('app', ['app.model', 'app.controller']) | |
.run(function ( $rootScope, $log, Model ) { | |
$log.log('App started.'); | |
// Model.setVariable('Variable updated.'); | |
$rootScope.version = Model.getVersion(); | |
$rootScope.setUp = function () { | |
Model.setVariable( Model.getVariable() + 1 ); | |
}; | |
document.getElementById('loading').innerHTML = Model.getMyData(); | |
document.getElementById('headline').innerHTML = Model.getVariable() + ' ' + Model.getConstant(); | |
}) | |
; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Model = function( $log, myVariable, myConstant, version ) { | |
$log.log('New singleton instance of model.'); | |
return { | |
getMyData : function() { | |
return 'Ready.'; | |
}, | |
getVariable : function() { | |
return myVariable; | |
}, | |
setVariable : function( val ) { | |
myVariable = val; | |
}, | |
getConstant : function() { | |
return myConstant; | |
}, | |
getVersion : function() { | |
return version; | |
} | |
} | |
}; | |
var model = angular.module('app.model', []) | |
.value('myVariable', 1) | |
.constant('myConstant', 'My constant.') | |
.constant('version', '1.0.0') | |
.factory('Model', Model) // also via .service() | |
; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment