Angularjs tutorial for beginners

  • Create first Angularjs App:
    Create HTML page with any name and add following sample code.
  • File Name: App.js
    var app = angular.module(‘my_ang_app’, []);
    Add the above file in head section as same we did with angular one but make sure this file is written after angularjs in head section.
  • File name: function ($scope) {
         $scope.message=”Hello world from angular”;
        });
    Just save the file and properly attach it in HTML file.
  • In HTML file just write the following line under DIV {{message}}.
  • Just save the code and run the HTML file in browser.

Angularjs is JavaScript library for web application to create apps based on MVC, MVW framework. Here find angularjs tutorial to get started !

@codeforgeek: Angularjs tutorial for beginners

#Angularjs

Angularjs is JavaScript library written and maintained by Google. Angularjs provide a way to implement MVW,MVC pattern in web application this it super charge the app. Since it’s release it is becoming very popular in developer era. In this post you will find how to setup angular development environment and some code to get started with angularjs.

If you are not familiar with JavaScript libraries and linking them to HTML pages then read the steps below else you may go further. We can link angularjs in our project in two ways. Either download the JS file or link through CDN. if you are testing it in localhost system i suggest you to download it and in case you are going to deploy it to real web server environment then adding a CDN is better approach.

Download AngularJS library from here.

When you click on above link, in new window code will appear just select all and save it as angular.js in your system. You can add it using

in section.

Create HTML page with any name and add following sample code.

Now create any HTML element say DIV inside body. But before that let me explain you some frequent use syntax of Angularjs.

So lets create one DIV and give it a proper name and controller. Put this code under body section of HTML page.

Okay so we have created the DIV with controller, now what? Its time to begin with angularjs. Okay so now create one JS file and call it app.js. Put this code in it.

Add the above file in section as same we did with angular one but make sure this file is written after angularjs in head section. It seems to be a good practice to separate the the angular module and controller module in different files in order to achieve high level of extensiblity in future. So create one file and name it as core.js which contains every working code and paste these code in it.

File name: core.js

Just save the file and properly attach it in HTML file. In HTML file just write the following line under DIV {{message}}. Final HTML file will look like this.

Just save the code and run the HTML file in browser. You should be able to see the message in browser. That’s it for now ! Stay tuned for more angularjs tutorial here.

Angularjs tutorial for beginners

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.