Skip to content

Instantly share code, notes, and snippets.

@artieziff
Last active December 18, 2015 11:19
Show Gist options
  • Save artieziff/5774581 to your computer and use it in GitHub Desktop.
Save artieziff/5774581 to your computer and use it in GitHub Desktop.

###ANGULAR.JS

<html ng-app>

###Data Binding

<input type="text" ng-model="yourModel">

{{yourModel}}

####Default Value

{{name || "Maicol Llacson"}}

###Controllers (Model Scope)

<div ng-controller="controllerName">
  <input ng-model="name">
  <h1>{{name}}</h1>
  <h2>{{age}}</h2>
</div>

<div ng-controller="anotherController">
  <input ng-model="name">
  <h1>{{name}}</h1>
  <h2>{{age}}</h2>
</div>

<script>
  var controllerName = function ($scope){
    $scope.name = "Maicol Llacson";
    $scope.age = 20;
  };
  var anotherController = function ($scope){
    $scope.name = "Elbis Presli";
    $scope.age = 20;
    $scope.$watch('name',function(){
      console.log($scope.name);
    });
  };
</script>

###Directives ####ng-show The ngShow and ngHide directives show or hide a portion of the DOM tree (HTML) conditionally.

<div>
  <input type="checkbox" ng-model="checked"><label>Show?</label>
</div>

<div ng-show="checked">
	Hello, world!
</div>

####ng-hide The ngHide and ngShow directives hide or show a portion of the DOM tree (HTML) conditionally.

<div>
  <input type="checkbox" ng-model="checked"><label>Hide?</label>
</div>

<div ng-hide="checked">
  Hello, world!
</div>

####ng-repeat The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

<div>
	<input type="search" ng-model="search">
</div>

<div ng-controller="List">
	<ul>
		<li ng-repeat="person in people | filter:search">
			{{person.name}} : {{person.age}}
		</li>
	</ul>
</div>

<script>
	var List = function($scope) {
		$scope.people = [
			{name: "Tom", age:20},
			{name: "Jeffrey", age:30},
			{name: "Dan", age:60},
			{name: "David", age:40},
			{name: "Peter", age:50}
		];
	};
</script>

####ng-show The ngShow and ngHide directives show or hide a portion of the DOM tree (HTML) conditionally

<span ng-show="$first">First</span>
<span ng-show="$last">Last</span>
<span ng-show="$middle">Middle</span>

####ng-click The ngClick allows you to specify custom behavior when element is clicked.

<div>
	<input type="search" ng-model="search">
</div>

<div ng-controller="List">
	<ul>
		<li ng-repeat="person in people | filter:search">
			{{person.name}} : {{person.age}}
			<button ng-click="remove($index)">x</button>
		</li>
	</ul>
	<div>
		<label>Name:</label><input ng-model="new_name">
		<br>
		<label>Age:</label><input type="number" ng-model="new_age">
		<br>
		<button ng-click="add()">Add</button>
	</div>
</div>

<script>
	var List = function($scope) {
		$scope.people = [
			{name: "Tom", age:20},
			{name: "Jeffrey", age:30},
			{name: "Dan", age:60},
			{name: "David", age:40},
			{name: "Peter", age:50}
		];
		$scope.add = function (){
			$scope.people.push({
				name: $scope.new_name,
				age: $scope.new_age
			});
			$scope.new_name = '';
			$scope.new_age = '';
		};
		$scope.remove = function (index){
			$scope.people.splice(index,1);
		}
	};
</script>

####ng-change Evaluate given expression when user changes the input. The expression is not evaluated when the value change is coming from the model.

<div ng-controller="Browser">
	<div>
		<label for="url">&larr; &rarr; &infin;</label>
		<input value="edit/{{path}}">
	</div>
	<div>
		<label>Update the url:</label>
		<input ng-change="clean()" ng-model="path">
	</div>
</div>
<script>
	var Browser = function ($scope){
		$scope.path = $scope.path.replace(/\s+/, '-') .replace(/[^a-z0-9-]/i,'');
	};
</script>

####ng-options

<div ng-controller="Contacts">
	<div>
		<input type="search" ng-model="search">
	</div>
</div>
<select ng-model="selected_person"
		ng-options="person.name for person in people | filter:search">
		<option value="">Choose a person:</option>
</select>
<br>
<div>
	<label>Name:</label><input ng-model="selected_person.name">
	<br>
	<label>Number:</label ng-model="selected_person.number">
</div>
<script>
	var Contacts = function ($scope) {
		$scope.people = [
			{name:'Hugo Sanchez', number: 01234},
			{name:'Maicol Llacson', number: 43210},
			{name:'Niño Bomba', number: 14320}
		];
	};
</script>

####ng-view ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

###Modules ####Modules Primer

<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<body>
	<div ng-controller="Example">
		{{name}}
	</div>
	<script>
		angular.module('myApp',[]).controller('Example', function($scope){
			$scope.name = "Hello World!":
		});
	</script>
</body>
</html>

####Dependency Injection

var a = function (b) {
	b.name = "Lleims"
};

a.$inject = ['$scope'];
angular.module('myApp',[])
.controller('Example', ['$scope', function (s){
	s.name = 'Lleims';
}]);

###Routing ####Primer

$routeProvider.when('/contact/:index',{
	templateUrl:'edit.html',
	controller: 'Edit'
}).when('/', {
	templateUrl:'list.html'
});
  • $routeProvider - Configure the routing
  • $routeParams - Get parameters from the url
  • $location - Modify and update the url

###Filters

{{price | currency:'€'}}
{{amount | number: 2}} // Number of decimal places.
{{message | uppercase}}
{{message | lowercase}}
{{date | date:'dd MM yyy'}}
<li ng-repeat="name in names | limitTo:4">{{name}}</li>
<li ng-repeatt="person in people | orderBy:'lastname':True"></li>
<li ng-repeatt="person in people | orderBy:'lastname':reverse"></li>

####Creating A Filter

<!DOCTYPE html>
<html ng-app="myApp">
<head>
</head>
<body>
	<div ng-controller="Filter">
		<p>{{text | clean:''}}</p>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script>
		angular.module('myApp',[])
		.filter('clean', function () {
			return function (input, separator) {
				var filter = new RegExp('[^a-z0-9'+(separator || '-')+']', 'ig');
				return input.toLowerCase()
							.replace(/\s+/g, (separator || '-'))
							.replace(filter,'');
			};
		})
		.controller('Filter', function ($scope) {
			$scope.text = 'Hello world, this is some text!';
		});
	</script>
</body>
</html>

###Directives

hello world¡
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment