• Getting Started with Angular JS

    Posted on December 5, 2015 by Hamidul Islam in Angular JS.

    getting-started-with-angular-js


    Angular JS is open source web application framework. Its commonly known as Angular or Angular.js. Some important highlights of this framework 

    • The first version AngularJS is 1.0 released in 2012
    • Angular JS is JavaScript framework like jQuery, Ext JS etc.
    • Angular JS mainly developed and maintained by Google
    • Angular JS is based on the MVC pattern (Model View Controller)
    • Single Page Application (SPA) is one of the main aim of Angular JS
    • We can easily develop Single Page Application (SPA) using Angular JS
    • The official site of Angular JS https://angularjs.org/

    To learn Angular JS we should have basic knowledge of below

    • HTML
    • JavaScript

    Downloading Angular JS:

    We can download Angular JS from https://angularjs.org/. Its just a script file. We can also use CDN of Angular JS in our HTML file without downloading the script file.

    download-angular-js

    Adding Angular JS in our HTML file:

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    </body>
    </html> 
    

    In above we have used Angular JS from CDN. We can also download angular JS in our local machine and include it instead of CDN.

    How to check whether Angular JS is loaded or not:

    In the above code we have shown how to include Angular JS. Sometimes we need to ensure whether the Angular JS is loaded or not. When Angular JS is fully loaded an object angular will be initialized. The angular object must  not be undefined. That means we can just check by alert(angular) which should return object but not undefined. Below is the sample code snippet to know the current version of the angular js which is loaded

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
    alert(angular.version.full);
    </script>
    <body>
    </body>
    </html> 
    

    We can also inspect angular object in Firefox

    angular-object-in-firefox

    Some new terms in Angular JS:

    • Directive
    • Expression
    • Filters
    • Data Binding

    We will explain those in other articles.

     

Comments are closed.
Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close