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):
  • Step by Step AngularJS series - Part-1


  • 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:
  • How to and where to get started with AngularJS?
  • How AnguarJs interacts with Web Pages?
  • Tried witha simple AngularJS app

    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

    Provide your feedback/comments to improve or add more contents to this series.


  • Article by Gaurav Kumar Arora
    Gaurav is a Microsoft Technology Specialist professional. He has awarded lifetime membership from Computer Society of India (CSI). He has more than 13yrs of experience in the industry. Currently, he is working in the capacity of Solution Architect with an MNC. He is serving to the various communities since 1999.

    Follow Gaurav Kumar Arora or read 157 articles authored by Gaurav Kumar Arora

    Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: