Welcome to the AngularJS Introduction Homepage, Guest!

AngularJS | Framework, Library, and extension of HTML

AngularJS is a web framework that is open source, developed by Misko Hevery and Adam Abrons in 2009. Google now maintains the everyday update and upkeep for AngularJS. The purpose of AngularJS is to create rich internet applications using the javascript based framework. Angular offers the option to write code in a convenient model view controller fashion.

AngularJS is written in the javascript language, and it can be used by importing the required information using a script tag. AngularJS will extend the functionality of HTML with directives. The directives are assigned to tags in order to indicate that an AngularJS application will be applied to this area of the HTML. The ng-app will be placed inside of a tag, such as div, to define an AngularJS application. The ng-app directive will indicate to AngularJS that specific element is the holder of an AngularJS application. The ng-model is to be placed inside an input, select, textarea tag to bind the application data to the AngularJS application. The ng-model binds the application data to the variable name supplied inside the tag. The ng-bind will take the application data and dynamically display the data inside the HTML tag associated with the ng-bind attribute.

Enter your Name:

Enter your Age:

Enter your Birthday:

The example above is a simple use of AngularJS. The code below is from the example above. You can see how each element is defined with the ng-app, ng-model, and ng-bind attributes. All of the ng-bind elemenets must be within the ng-app element in order to be used within scope. If I had placed the p element with the ng-bind data outside of the ng-app div element, the HTML would not render the information dynamically, and the information would be lost and unreachable. The ng-bind elements must be within the scope of the ng-app element in order for the dynamic results to be displayed. There could be a way around this, but I am writing this introduction and tutorial for AngularJS as I am learning how to use the framework/library. If the information is wrong, I will correct it as I learn the right information. The code below is how you can replicate the Name, Age, and Birthday section with dynamic results. The next section is the code written for the small AngularJS ng-app element above. The div element is defined using the ng-app paramenter, while the name, age, and birthday are input variables being assigned and displayed dynamically as they are being entered. The dynamic behavior will only work within the div with the ng-app parameter, and anything outside the div will result in being out of scope.

<div ng-app="">

<h4>Enter your Name: <input type="text" ng-model="name"></h4>

<h4>Enter your Age: <input type="text" ng-model="age"></h4>

<h4>Enter your Birthday: <input type="text" ng-model="birthday"></h4>


<p><p ng-bind="name"></p> <p ng-bind="age"></p> <p ng-bind="birthday"></p></p>


  • Data-binding

    This is the syncing of the data with the model/view elements.

  • Scope

    These are objects that are linked to the model, the link between controller and view.

  • Controller

    The actual Javascript functions that are linked to a specific scope.

  • Services

    Built in services provided by AngularJS, for example: the ability to make XMLHttpRequests.

  • Filters

    Will select a certain set of items from an array, and return the subset of items as a new array.

  • Directives

    A way to mark DOM elements; ng-app, ng-bind, ng-model.

  • Templates

    The actual view that is rendered from the information gathered from the controller and model. This can be one file, index.html, or multiple views using partials.

  • Routing

    The ability to switch between the different views(templates).

  • Model View Controller

    A design pattern for a web application; Model, View, and Controller. Angular adheres to a Model-View-ViewModel method, calling it the Model View Whatever method.

  • Deep Linking

    Will allow a programmer to code the exact state of the application in the URL. This will give the user the ability to restore the URL to the same state.

  • Dependency Injection

    This is suppose to help the developer to develop, understand, and test easier.

Next, we will take a look at the environments of AngularJS

Just follow the buttons to continue the tutorial, Guest