AngularJS step by step Problem Solving for Beginners [Part 1]

AngularJS announced by Google and right now the trend is going on. So, I am not going to write more about the AngularJS we move forward Practical. The first Step to learn How to Embed the Script and Write Simple “Hello World” Web Apps of AngularJS. I love to hear from you. If you have any query regarding the AngularJS then comment below we give our best time to solve your problem. If you want some different example about the Learning AngularJS then comment below we love to solve the problem regarding any programming language.

1. Live Update from TextBox using ng-model in AngularJS
1st AngularJS - Hello World

1st AngularJS – Hello World

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="">
 <b><h3> Enter Text Here </h3><b>
 <p>Name: <input type="text" ng-model="name"></p>
 <b> Your Text is : </b> <font color="#FF0000"><p ng-bind="name"></p></font>
 </div>
 <center>
</body>
</html>
2. Use of ng-bind in AngularJS
1st AngularJS- use of ng-bind

1st AngularJS- use of ng-bind

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <b>
 <h2>
 <div ng-app="" ng-init="firstName='1st Original'">
 <p>The name is <font color="#6633FF"><span ng-bind="firstName"></span></font></p>
 </div> 
 </h2>
 </b>
 </center>
 </body>
</html>
3. Math Expression in AngularJS
1st AngularJS- use of math-expression

1st AngularJS- use of math-expression

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="">
 <b>
 <h2>
 <p>My first Math expression (50 + 50): <font color="#6600FF">{{ 50 + 50 }}</font></p>
 </h2>
 </b>
 </div>
 </center>
 </body>
</html>
4. How to use ng-model in angularJS
1st AngularJS- use of ng-model

1st AngularJS- use of ng-model

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="">
 <p><h2><a href="http://1storiginal.com"> 1storiginal.com </a></h2></p>
 <p><b>Enter Text Here : <input type="text" ng-model="name"></b></p>
 <p><b><font color="#3333FF">{{name}}</font></b></p>
 </div>
 </center>
 </body> 
</html>
5. How to concat String from two TextBox in AngularJS
1st AngularJS- use of ng-controller, ng-app, ng-model

1st AngularJS- use of ng-controller, ng-app, ng-model

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="myApp" ng-controller="myCtrl">
 Enter First Name : <input type="text" ng-model="firstName"><br>
 Enter Last Name : <input type="text" ng-model="lastName"><br>
 <br>
 <b><h3> Your Full Name is : <font color="#3333FF">{{firstName + " " + lastName}} </font></h3></b>
 </div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) 
 {
 $scope.firstName= "1st";
 $scope.lastName= "Original";
 });
 </script>
 </center>
 </body> 
</html>
6. How to change color of TextBox using ng-init in AngularJS
1st AngularJS- use of ng-init for change color

1st AngularJS- use of ng-init for change color

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="" ng-init="myCol='1st Original'">
 <p><b> <a href="http://1storiginal.com"> 1st Original </a></b></p>
 <input style="background-color:skyblue" ng-model="myCol" value="{{myCol}}">
 </div>
</body>
</html>
7. How to use of ng-init with Math Expression in AngularJS
1st AngularJS- use of math-calculation using ng-init ng-app

1st AngularJS- use of math-calculation using ng-init ng-app

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="" ng-init="quantity=10;cost=5">
 <p><b><h1> <a href="http://1storiginal.com"> 1st Original </a> </h1></b></p>
 <p><h2>Total (10*5) : <font color="#3333FF"> {{ quantity * cost }} </font></h2></p>
 </div>
</body>
</html>
8. Concatenation of the String in AngularJS
1st AngularJS- use of Concatenation of the String using ng-init ng-app

1st AngularJS- use of Concatenation of the String using ng-init ng-app

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="" ng-init="person={firstName:'1st',lastName:'Original'}">
 <h2><b><p>The First Name is <font color="#3333FF">{{ person.firstName }}</font></p></b></h2>
 <h2><b><p>The Last Name is <font color="#3333FF"><span ng-bind="person.lastName"></span></font> ( Using ng-bind )</p></b></h2> 
 </div>
 </center>
</body>
</html>
9. How to use Array to fetch the Value in AngularJS
1st AngularJS- use of ng-init ng-bind ng-app for fetch data from Array

1st AngularJS- use of ng-init ng-bind ng-app for fetch data from Array

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 <center> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <div ng-app="" ng-init="points=[1,15,19,2,40]">
 <h2><b><p>The Last result is <font color="#3333FF"> {{ points[4] }} </font></p>
 <p>The First result is <font color="#3333FF"><span ng-bind="points[0]"></span></font> ( Using ng-bind )</p></b></h2>
 </div>
 </center>
</body>
</html>

Any Suggestion for a new problem in Learning AngularJS Comment below we give our best to solve your problem :).


Also published on Medium.

Leave a Reply