SwapnilsBlog: March 2017

In this tutorial we are going to see how to change background color of an Application using AngularJs.
So let’s get started.
To know about prerequisites needed to run this example see our previous post.
First create index.html file shown as below.

<html>
<head>
<script src="angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
</html>

The code shown above will add files require to run our angular application.
Next add an textbox which takes input color from user as shown in below,

<input ng-model='bgcolor' placeholder="Enter a color name" />

Where ng-model is a directive used to assign the color value inserted by user to bgcolor property.
next add style to set background color to value inserted by user which is model bgcolor

style="background:{{bgcolor}}"

Also add ng-controller and ng-app directive to our html file.
So final index.html will look like,

<html ng-app="myModule">
<head>
<script src="angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="myController" style="background:{{bgcolor}}">
<input ng-model='bgcolor' placeholder="Enter a color name" />
</body>
</html>

The code written in script.js is for attaching module and controller to the view index.html.
So add module to our script.js file like this,

Var app=angular.module(“myModule”,[]);

Where myModule is our module name and [] is for dependencies.Currently we are not using any dependencies so it will be empty.Now register the controller with our module like this,

app.controller(“myController”,function($scope){
});

Our application is now ready to be executed.
Now take input from user as shown in below image

changes background when color value is entered

As soon as we enter yellow in textbox, the background color is going to change as shown as above
So this is how we can change background color dynamically by using AngularJS.

If you have any question regarding this you can write us at testyourcoding111@gmail.com

Hello everyone,In this article we are going to see what is angular JS? How to start coding with Angular JS. So let’s begin with introduction to angularJS.
Angular JS is Javascript framework introduced by Google in 2012. It is an extension provided to HTML tags with ng- directives. We know that html is used for creating web Applications which are static applications. But to create dynamic applications we can use Angular JS.
One more important thing is Angular JS uses MVC Architecture to create applications.to know more about MVC architechure Click Here.

Prerequisites:
1. Web Browser
2. Server to run Web Application.
3. Text Editor- Sublime Text editor is recommended.
4. angular.min.js file to run Angular Applications. You can download it from here.

- So now let’s start with coding our first angularJS application.
Create index.html file as shown as below:

<html>
<head></head>
<body>Hello</body>
</html>

The code above shown is html code used to show text “Hello” .
Now we will see how to use angularJs to print text ”Hello”.
We will need to create script.js file which contains AngularJs Code as follow.

var myApp=angular.module("myModule",[]);

which is used to create a module.
A module is container of our application which is similar to main method. This will be starting point of our application. Now create a controller for our application as:

var myController=function($scope){
$scope.message="String msg";
}

Controller is used to for retrieving model and attached it to our html view. Model is nothing but the data to be retrieved from db and to be displayed in View. Here $scope is an object which defines scope of controller within the view.
With the scope variable we can attach a value to the property message as,

$scope.message="Hello";

Now next step is we have to register our controller myController with module as

myApp.controller=("myController",myController);

Up till now we have seen,

var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="String msg";
}
myApp.controller=("myController",myController);

Now modify index.html file to add created module and controller to our application
<html ng-app="myModule">
<head></head>
<html ng-app="myModule">
<head></head>
<body ng-controller="myController">
<p>{{message}</p>
</body>
</html>

Where ng-app is a directve used to bind model with our html view.Here myModule is a name of our module created in script.js file. Also ng-controller is directive used to associate our model with html view. So we can print data to be retrieved from data base with the help of property attached to scope variable.
To print Hello text we have to use our message property as {{message}} within body section of our ng-controller. The scope of message will be within opening and closing tags of ng-controller.

add script.js and angular.min.js file within head of our html to make our AngularJS application running.
So final code will be

index.html

<html ng-app="myModule">
<head>
//include angular files
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<p> {{message}}</p>
</body>
</html>

script.js

var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="Hello";
}
myApp.controller=("myController",myController);

So now you will see output as
Hello

This is how you can create your first Application.If you have any query you can write us at testyourcoding111@gmail.com

For more references, goto
https://angularjs.org/
http://www.w3schools.com/angular/
https://www.youtube.com/user/angularjs

SwapnilsBlog

Navigation

Thursday 23 March 2017

Dynamically Change Background color using Angular JS.

Create your First Angular Application Beginner's Level

Blog Archive