Step by Step AngularJS series - Part-2
This AngularJS article is a part of Step by Step AngularJS series.
In these days, JavaScript framework are on the top. I was trying to dig my head into AngularJS an awesome JavaScript framework.
Background
This AngularJS article is a part of Step by Step AngularJS series.
In these days, JavaScript framework are on the top. I was trying to dig my head into AngularJS an awesome JavaScript framework.Introduction
This is a second part of Step-by-Step AngularJS series. In this series, we will discuss and learn AngularJS as per our ease.
In this series we will start with very basics and gradually go with few complex code/examples.
Before, going through current article, I suggets following reading(s):What we discussed, till now?
Lets take a look, what we discussed till now:
In previous article(s), we had gone through following discussion/reading:What we're going to cover in this part?
In previous article(s), we satarted with very basic to see the output and discussed, how AngualrJS interacts with web pages.
Today, we will discuss more about basics, we will see how to get user inputs and render using AngularJS.What is user input
Its just to explore that any kind of entry from/via any mode/interface (Graphical User Interafce, Console User Interface, Web User Interface or any other),
bu the user (who is currently using the app).Getting user input
AngularJS provides us many great directives one of these is ng-model. This is a magic directive it get the input and bind the same to its own expression.
Consider following code-snippet as an example:
<div class="jumbotron" ng-app>
<h3>New course</h3>
Choose new course:<input type="text" ng-model="course"></input>
<lp>Your new course: {{course}}</p>
</div>
So, above, we are telling AngularJS that 'course' is to bind with input box.Rest things will be taken care by AngularJS itself.
It will automatically assign the values of Input to 'course'.
It will display, immediately whatever we'll input. You can compare this with key-enter/press event (for your reference).Working as per user input
Now, lets think about a scenario, where we need to perform some actions on the basis of user input.
AngularJs provided us 'ng-click' - trust me it is one of the most useful and great directives.
We have following code-snippet and will discuss, how we can perform specified actions on the basis of user input.
<div class="jumbotron" ng-app="MyApp">
<div ng-controller="MyCtrl">
<h3>New course</h3>
Choose new course:<input type="text" ng-model="course"></input>
<button ng-click="show()">Show/Hide</button>
<lp ng-show="display">Your new course: {{course}}</p>
</div>
</div>
In above, we added a button including ng-controller and ng-show. We will discuss about these in upcoming sections.
Till then just understand "ng-click" is trigger the "show()" function and it will show/hide the output.Closing notes
In this part, we discussed about user input and various ways to display the inputs. This is a basic session, so, we did not go in depth.
In coming parts, we will see more advance stuffs with more examples.
A complete source code of simple angular stuffs is available here: Simple AngularJS
Follow