Angular1 Example1

angular1

// Angular 1 - Example 1 (app/index.html):

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <script src="bower_components/angular/angular.js"></script>
  </head>
  <body>

    <p>Nothing here {{'yet' + '!'}}</p>

  </body>
</html>

The above is a boilerplate.  Notice that this main index.html file is inside 
the app folder.  The bootstrap.css file and the angular.js files are loaded 
from inside the bower_components folder.

The above code use a binding expression {{ ... }}.

Notice that we use the ng-app directive without specifying a value (a name for 
the module).  Angular will use the default name ngApp.  In other words,

<html lang="en" ng-app>

is the same as:

<html lang="en" ng-app="ngApp"> 

The ng-app attribute represents an AngularJS directive, named ngApp (AngularJS 
uses kebab-case for its custom attributes and camelCase for the corresponding 
directives which implement them). This directive is used to flag the HTML 
element that AngularJS should consider to be the root element of our 
application. This gives application developers the freedom to tell AngularJS if 
the entire HTML page or only a portion of it should be treated as the AngularJS 
application.

In advanced cases, such as when using script loaders, you can use the 
imperative/manual way to bootstrap the application.  There are 3 important 
things that happen during the bootstrap phase:

1. The injector that will be used for dependency injection is created.
2. The injector will then create the root scope that will become the context 
   for the model of our application.
3. AngularJS will then "compile" the DOM starting at the ngApp root element, 
   processing any directives and bindings found along the way.

Once an application is bootstrapped, it will then wait for incoming browser 
events (such as mouse clicks, key presses or incoming HTTP responses) that might 
change the model. Once such an event occurs, AngularJS detects if it caused any 
model changes and if changes are found, AngularJS will reflect them in the view 
by updating all of the affected bindings.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License