Basics of AngularJS

Why "Angular JavaScript"?

We know that HTML is great for declaring static documents, but it does not do well for declaring dynamic views in web applications. Angular JavaScript allows you to extend HTML tags, features and vocabulary for your applications (doesn't matter native, web, static or dynamic), websites and portals. The resulting environment that we get after using Angular JavaScript makes our project work:

  • Extraordinarily Expressive
  • Readable
  • Flexible
  • Quick to develop
  • More Dynamic
  • Extensibility
  • Rich Vocabulary

Alternatives

There is no best alternative to JavaScript but other frameworks deal with HTML's shortcomings by either taking features away from HTML, CSS and/or JavaScript or by providing an imperative way for manipulating the Deterministic Object Model (DOM). Neither of these are very useful for fulfilliing dynamic views for HTML.

Extensibility

In simple words we can define Angular JavaScript as a "toolset" or "tag-kit" that provides support for building a dynamic framework most suited for applications (native, web, static or dynamic), website or portal development. It is fully extensible, flexible and can work well with other libraries easily. Every feature can be modified or replaced to suit your unique development workflow and features needs.

Simple Example

There are 3 major parts in this example similar to any other HTML coding, these parts are:

HTML coding Part

[PROCEDURE]

The JavaScript code depends on you (for providing more extensibility in your code).

Step 1:  HTML CODE

<div ng-app>

    <div>
        <label>
            Name:
        </label>
        <input type="text" ng-model="ABC" placeholder="Write anything">
        <hr>
       <h1>
            Hello its Abhishek Jaiswal {{ABC}}…
       </h1>
    <div>
<div>


HTML CODE

Step 2:  CSS Code

 

<style>

    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bookstrap.css">

    <script src=https://ajax.googleeapis.com/ajax/libs/angularjs/1.2.3/angular.min.js>

    </script>

</style>

CSS Code

Step 3:  JavaScript Code

The JavaScript code depends on you (for providing more extensibility in your code).


JS Code

Output

Output Window

Whatever you write in that box will directly appear after Hello it's Abhishek Jaiswal <!-content will be here..

Output