AngularJS Get Started
Set up your first AngularJS page by loading the library and activating it with the ng-app directive.
Getting AngularJS Onto a Page
AngularJS is a plain JavaScript file. To use it, you only need to load it with a <script> tag before your own code runs — there is no compiler, bundler, or command-line tool required to get started.
- Load it from a CDN (Content Delivery Network) with a <script src="..."> tag
- Or download angular.min.js and reference it from a local folder
- Add the ng-app directive to the HTML element you want AngularJS to control
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>1 + 2 = {{ 1 + 2 }}</p>
</div>
</body>
</html>The ng-app Directive Starts Everything
ng-app tells AngularJS which HTML element is the root of the application. AngularJS only looks for other directives — ng-model, ng-repeat, ng-bind, and so on — inside the element that carries ng-app. Anything outside it is treated as regular, inert HTML.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Inside the app: {{ 5 * 5 }}</p>
</div>
<p>Outside the app: {{ 5 * 5 }}</p>
</body>
</html>One Automatic Application Per Page
A page can only auto-bootstrap one ng-app element. If you need more than one independent application on the same page, you must start the extra ones manually with angular.bootstrap() in JavaScript, which is an advanced technique rarely needed for typical pages.
Exercise: AngularJS Get Started
What does the ng-init directive do?
