AngularJS Lesson 3 : Some Points on ng-controller

These are some points
  • This directive is used to bind the scope of the view with the controller.
  • If your controller is performing too much processing, you can use nested controllers .i.e. a controller within another to delegate specific behavior to another controller.
    1. 8) <body ng-controller="ParentCtrl">
    2. 9) <input ng-model="name" /> {{name}}
    3. 10)
    4. 11) <div ng-controller="ChildCtrl">
    5. 12) <input ng-model="name" /> {{name}} - {{$parent.name}}
    6. 13) </div>
    7. 14) </body>
  • Controllers are useful in sharing objects or create common behavior for event callback functions.
  • Controllers are classes which indicate Angular about the application model by connecting them to $scope object passed into your controller.
  • The controller uses parameters which are dependencies, injected by AngularJS injector service. These are services that are used inside the controller.
  • The DI in Angular works by matching the names of the parameters, when we declare function as function someController($scope) {}, the injector finds the  $scope service from the parameter name.
  • The following is an example usage of ng-controller, it has 2 files the main html file and the controller file;
  • ControllerTest.html
    1. <html>
    3. <head>
    4. <title>Angular JS Modules</title>
    5. <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    6. <script src = "controller1.js"></script>
    7. <meta charset="utf-8">
    8. <meta name="viewport" content="width=device-width, initial-scale=1">
    10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    14. </head>
    16. <body>
    17. <div class="jumbotron">
    18. <h1>ng-controller</h1>
    19. </div>
    21. <div ng-app = "appMainModule" ng-controller = "teamsController">
    23. <table class="table table-striped" border=1>
    24. <tr>
    25. <th>Team Name </th>
    26. <th>City </th>
    27. <th>Rank </th>
    28. </tr>
    30. <tr ng-repeat = "team in team.info">
    31. <td>{{ team.name }}</td>
    32. <td>{{ team.city }}</td>
    33. <td>{{ team.rank }}</td>
    34. </tr>
    35. </table>
    37. </div>
    39. </body>
    40. </html>
Controller.js
  1. var appMainModule = angular.module("appMainModule", []);
  3. appMainModule.controller("teamsController", function($scope) {
  4. $scope.team = {
  6. info:[
  7. {name:'Manchester City',city:'Manchester',rank:1},
  8. {name:'Arsenal',city:'London',rank:2},
  9. {name:'Manchester United',city:'Manchester',rank:3},
  10. {name:'Leicester City',city:'Leicester',rank:4},
  11. {name:'Liverpool',city:'Liverpool',rank:5}
  12. ],
  14. currentState: function() {
  15. var teamObject;
  16. teamObject = $scope.team;
  17. return teamObject.name + " " + teamObject.city+" "+teamObject.rank;
  18. }
  19. };
  20. });
The following is the output we get:
AngularJS ng-controller
                                                                                                                           AngularJS ng-controller

Comments

Post a Comment

Popular posts from this blog

Java Interview : Threads

Java came up with multi threading long time back, still the kind of response it invokes when this topic raises its head during interviews is not very encouraging. If you have attended an java interview, a couple of suppose to be very smart guys also know as lead developers will shower you with questions on multi threading, grilling you down to make sure what you are talking about, even asking you to write fork-join snippets to solve hadoop use cases. But if you are hired and you write a piece code using executor framework, you will be seen with suspicion generally reserved for people with casual shoes at cocktail parties. So here is post to start out thinking about threads. So a path of execution in java is known as a thread, appropriately an instance of Thread class. The main method runs in its own thread and starts up the program execution. If you implement the Runnable interface, you can run in a thread of you own. The Runnable interface has a run() method you implement your...
Read more

Spring Framework Interview Notes : Part Two Wiring

Image
The Spring container is the guy responsible to get the train moving when working with the Spring framework.  The dependency magic gets the things working by somehow getting all the stuff up and running. Now somehow we need to indicate to the spring container as to where and how to “wire” these beans. Remember these beans are also known as components. Components combine to form the structure and thus make the functionality. The concept of component scanning or component finding comes into the picture, literally searching the applications to find the beans required to create these beans. @ComponentScan is the annotation used by giving the the base packages where these components are defined using annotation or xml . Spring Framework Interview Wiring You can also use Autowiring with its attributes, which finds the beans by-name or by-type and injects them appropriately. @Component, @ComponentScan, @Autowired, @Named,  @Bean  with requires and quali...
Read more

Card Dealer In Java in Less than 5 minutes

Image
Code: package design; import java.util.Collections; import java.util.Stack; public class CardDealer { private int totalPlayers; private static Stack<Card> deck; CardDealer(int players){ totalPlayers=players; deck =  Deck.getCardDeck(); } public static void main(String[] args) { CardDealer cardDealer = new CardDealer(5); cardDealer.dealCards(); } public void dealCards(){ int cardsToPlayer = deck.size()/totalPlayers; for(int i=0;i<cardsToPlayer;i++){ for(int j=1;j<=totalPlayers;j++){ System.out.println("Player:"+j+ " gets "+deck.pop()); } } } private int getPlayers() { return totalPlayers; } }  class Deck{ static Stack<Card> deck = new Stack<Card>(); static Deck d=null; static { d = new Deck(); } public static Stack<Card> getCardDeck(){ return deck; } private Deck(){ populateDeckWithcards(); shuffle(); } pr...
Read more