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 <head> section.
Create first Angularjs App:
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.
- ng-app: Use to give name to Angular application.
- ng-controller: Use to provide selection of particular element.
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.
File Name: App.js
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. 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
$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}}. Final HTML file will look like this.
<html>
<head>
<meta charset="utf-8" />
<title>First Angular App</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="core.js"></script>
</head>
<body>
<div id="main_div" ng-app='my_ang_app' ng-controller='first_div'>
{{message}}
</div>
</body>
</html>
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.
