Controller
Is responsible for constructing the model on $scope and providing command for the view to act upon.
$scope
Is the glue between the controller and view.
var app = angular.module('app', [])
.controller('HomeCtrl', ['$scope', function($scope){
$scope.title = 'Welcome to the Home Page';
$scope.description = function() {
return 'This is the home page';
}
}]);
Layout Directives
Basic of directives are markers on a DOM element which attach a special behavior to it. For example, static HTML does not know how to create and display a date picker widget. To teach HTML this new syntax we need a directive. The directive will somehow create an element that behaves like a date picker. We will see how this is achieved subsequently.
Layout directives are: ngIf, ngShow/ngHide, ngRepeat, ngSwitch and ngInclude
Interaction Directive are: ngModel, ngBlur/ngFocus, ngClick, ngSubmit
Styling Directives are: ngClass
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-init="title='Angular'; items = [0,1,2,3];">
Hello {{title}}
<div ng-repeat="item in items">
{{item}}
</div>
<br>
<div ng-repeat="item in items | filter:value">
{{item}}
</div>
<h1 ng-hide='hide'>Secret Message</h1>
<button ng-click="items[items.length] = items.length">Add New Item</button>
<button ng-click="hide=!hide">Toggle Show/Hide</button>
<br>
<input type="text" ng-model='value'/>
</body>
</html>