The AngularJS team maintains a NPM package with the latest release. Let's install AngularJS. We will use version 1.4.8 of AngularJS:
- In the terminal, run this from the src directory:
npm install [email protected]
- Create a copy of src/index.html called src/index-angular.html. Let's add the minified version of AngularJS into the footer of index-angular.html:
<script src="node_modules/angular/angular.min.js"></script>
AngularJS requires a module definition, which is basically your application container, to hook into so that AngularJS knows which parts of the DOM to execute upon:
- First, create a file, src/app/myphoto.module.js, and add the following module definition:
angular.module('MyPhoto', [])
- Next, add the module definition to the footer of the index-angular.html:
<script src="node_modules/angular/angular.min.js">
</script>
<script src="app/myphoto.module.js"></script>
- Next, we need to bootstrap. In this instance, bootstrap means loading the module and hooking it to a part of the DOM, and is not to be confused with the framework that this book is based upon! To do this, we use the ngApp AngularJS directive. The ngApp directive will automatically bootstrap the defined module to the element it is attached to, using that element as the root element of the application. We will apply ng-app to the body element of index-angular.html:
<body ng-app="MyPhoto" data-spy="scroll" data-
target=".navbar" class="animated fadeIn">
As you can see, we add the ng-app attribute with the value of "MyPhoto", the name we used when defining the module in myphoto.module.js. Now, MyPhoto has been bootstrapped with an AngularJS module and is now technically an AngularJS application, although AngularJS doesn't execute or manipulate anything.
Now, let's see how we can leverage core AngularJS features, such as directives, data binding, and JavaScript abstractions to build reusable and dynamic components for MyPhoto.