Basic Hello World App in AngularJS | AngularJS Tutorials

Hello World App in AngularJS

AngularJS is a Javascript framework, and like other Javascript files we just have to simply include it in our HTML document using the <script> tag and because it is just a .js file you don’t need any special IDE for it , you can use any text editor for making an AngularJS application. I am using Visual Studio 2015 you can choose Sublime Text, Notepad++ , Atom, Brackets whatever you feel most comfortable with.

Read More : [INFOGRAPHIC] BEST IDE FOR PROGRAMMING 

There are some of the ways for using AngularJS and they are as follows :

  1. Use AngularJS CDN , CDN stands for Content Delivery Network , it simply means that your content in this case AngularJS files are hosted on someone others server. You can use AngularJS simply by adding the code below.
  2. The second option is that you can download AngularJS from the AngularJS official website and then include the angular.js or angular.min.js file in the HTML document.
    We are using AngularJS 1.5x family in this illustration.
    Download AngularJS , Hello World App in AngularJS
  3. If you are using Visual Studio you can install AngularJS using NuGet Package Manager.Add angularjs with NuGet Package Manger , Hello World App in AngularJS
    Add angularjs with NuGet Package Manger 2 , Hello World App in AngularJS
  4. Install using Bower or npm
    Bower : bower install angular#1.5.5
    npm : npm install angular@1.5.5

Now once you are finished with adding AngularJS let’s get going with our

Hello World! App in AngularJS

See the Pen Hello World in AngularJS by Vivek sharma (@codesparta) on CodePen.dark

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

In this particular example ng-init directive helps us to initialize AngularJS variable like message to initialize . In the h1 tag we use AngularJS expression to use our variable. AngularJS expressions can also be written inside a directive: ng-bind="expression". It can contain variables , integers , literals etc . {{ 5+ 5 }} will give you 10 as output .

Leave a Reply

Your email address will not be published. Required fields are marked *