AngularJS1

Lets start creating a basic angular js app with a “Hello world”.

Set-up required creating an Angular JS app:

Any text editor, such as notepad++ , sublime or the simply superb notepad that comes with windows.

Set-up required running an Angular JS app:

Any browser [IE, Google chrome, Mozilla etc..]

These are the minimum basic setup required to create and run an Hello world Angular app, when it comes to a larger sized app there we need some other setup and minimum knowledge in other frameworks and technologies, which we will discuss in the next blog.

Ok.., hope you are ready with the above setup. Before making our hands dirty, lets know some facts about Angular JS1.

Angular JS framework.
Angular JS comes a normal JavaScript file.
Angular JS app will be built with JavaScript.
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.

There are more lot of things need to be known about Angular JS.

Now lets dive into writing the app.

File structure of the app as below:

Hello-world-app

|---/js

| |---app.js

|---index.html

js/app.js :

var app = angular.module(‘helloWorldApp’,[]);

app.contoller(‘helloWorldController’,[‘$scope’,function($scope){

$scope.data = “Hello world !!!!!”;

}]);

Index.html :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Hello world Angular App</title>

</head>

<body>

<div ng-app="helloWorldApp">

<div ng-controller="helloWorldController">

<p>{{data}}</p>

</div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

<script src="js/app.js"> </script>

</html>

Now run the index.html file in browser and you will see the output as “Hello world !!!!!”