What are the key differences between AngularJS and jQuery?
AngularJS Extends HTML
AngularJS extends HTML with
ng-directives
.
The
ng-app
directive defines an AngularJS application.
The
ng-model
directive binds the value of HTML controls (input, select, textarea) to application data.
The
ng-bind
directive binds application data to the HTML view.
AngularJS Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src=""></script>
</body>
</html>
Example explained:
AngularJS starts automatically when the web page has loaded.
The
ng-app
directive tells AngularJS that the <div> element is the "owner" of an AngularJS
application
.
The
ng-model
directive binds the value of the input field to the application variable
name
.
The
ng-bind
directive binds the
innerHTML
of the <p> element to the application variable
name
.
You can use
data-ng-
, instead of
ng-
, if you want to make your page HTML5 valid.
AngularJS Directives
As you have already seen, AngularJS directives are HTML attributes with an
ng
prefix.
The
ng-init
directive initialize AngularJS application variables.
AngularJS Example
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
AngularJS Controllers
AngularJS applications are controlled by
controllers
.
The
ng-controller
directive defines the controller.
The controller code will execute when the page loads.
AngularJS Example
<div ng-app="" ng-controller="personController">
Want to read all 18 pages?
Want to read all 18 pages?
You've reached the end of your free preview.
Want to read all 18 pages?
- Summer '14
- Document Object Model, AngularJS, AngularJS Example
