View - the HTML. Model - the data available for the current view. Controller - the JavaScript function that makes/changes/removes/controls the data.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
Directives are HTML attributes with an ng prefix. ng-app directive defines an AngularJS app, and tells AngularJS that the
element to the application variable name.
ng-controller directive defines the controller.
Expressions are written inside double braces: {{ expression }}
or as ng-bind="expression"
ng-app (modules) defines the application, ng-controller defines the controller (which controls apps)
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS expressions are like JS expressions, but don't support conditionals, loops, and exceptions -- but do support filters.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
$scope
is the application object (the owner of application variables and functions) onto which we can add props/methods