AngularJS 1.x ~ Bootstrapping an app - rohit120582sharma/Documentation GitHub Wiki

Introduction

  • It's JavaScript MVC framework to create and maintain Single Page Application (SAP).
  • With client-side templating and heavy use of JavaScript; creating and maintaining large application can be very tedious. AngularJS removes this cruft.
  • In Angular application, the view is DOM, the controllers are JavaScript classes, and model data is stored in object properties.

Reference

Set up the Development Environment

You need to set up your development environment before you can do anything.

Tools

  • Node.js® and npm - Install Node.js® and npm if they are not already on your machine. Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
  • Webpack - Webpack has become the defacto standard when building Angular applications.

Create a new project and skeleton application by running the following commands:

Initialize package manager

Node.js creates package.json which is configuration listing the third party packages your project uses.

npm init

Install other dependencies

Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. These packages are maintained and installed with the Node Package Manager

npm install angular --save
npm install bootstrap --save
npm install angular-material --save
npm install angular-ui-bootstrap --save
npm install @uirouter/angularjs --save
npm install lite-server --save-dev
npm install concurrently --save-dev

Write npm script

"scripts": {
	"build": "webpack",
	"prod": "npm run clean && webpack -p",
	"start": "concurrently \"lite-server\" \"webpack --watch\"",
	"clean": "rimraf ./dist/*"
}

Serve the application

Go to the project root directory and run npm start to launch the sample application.

Bootstrap

Bootstrapping AngularJS applications automatically using the ngApp directive is very easy and suitable for most cases. In advanced cases, such as when using script loaders, you can use the imperative/manual way to bootstrap the application.

This example shows the recommended path for integrating Angular with what we call automatic initialization.

<!doctype html>
<html ng-app>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>

<html ng-app>

This code ask angular to auto-bootstrap your application. Place ng-app typically on the html tag. The ng-app attribute represents an AngularJS directive, named ngApp. This directive is used to flag the HTML element that AngularJS should consider to be the root element of our application.

<script src="angular.js"></script>

This code downloads the angular.js script which creates angular global object when the containing HTML page is fully downloaded. Then following important things that happen during the bootstrap phase:

  • AngularJS looks for the ngApp directive. If AngularJS finds the directive, it will bootstrap the application with the root of the application DOM being the element on which the ngApp directive was defined.
  • load the module associated with the directive.
  • The injector that will be used for dependency injection is created.
  • The injector will then create the root scope that will become the context for the model of our application.
  • AngularJS will then "compile" the DOM starting at the ngApp root element, processing any directives and bindings found along the way.

html

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.

⚠️ **GitHub.com Fallback** ⚠️