Examples

• 10

  Basic Components and LifeCycle Hooks

  edit move example delete share

  10

  What’s a component?

  • A component is basically a directive that uses a simpler configuration and that is suitable for a component-based architecture, which is what Angular 2 is all about. Think of a component as a widget: A piece of HTML code that you can reuse in several different places in your web application.

  Component

  angular.module('app', [])
      .component('helloWorld', {
          template: '<span>Hello World!</span>'
      });
  

  Markup

  <div ng-app="myApp"> 
    <hello-world> </hello-world>
  </div>
  

  
  

  Using External data in Component:

  We could add a parameter to pass a name to our component, which would be used as follows:

  angular.module("myApp", [])
    .component("helloWorld",{
      template: '<span>Hello {{$ctrl.name}}!</span>',
      bindings: { name: '@' }
    });
  

  Markup

  <div ng-app="myApp"> 
    <hello-world name="'John'" > </hello-world>
  </div>
  

  
  

  Using Controllers in Components

  Let’s take a look at how to add a controller to it.

  angular.module("myApp", [])
    .component("helloWorld",{
        template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
        bindings: { name: '@' },
        controller: function(){
          this.myName = 'Alain';
        }
    });
  

  Markup

  <div ng-app="myApp">  
    <hello-world name="John"> </hello-world>
  </div>
  

  CodePen Demo

  Parameters passed to the component are available in the controller's scope just before its $onInit function gets called by Angular. Consider this example:

  angular.module("myApp", [])
    .component("helloWorld",{
        template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
        bindings: { name: '@' },
        controller: function(){
          this.$onInit = function() {
            this.myName = "Mac" + this.name;
          }
        }
    });
  

  In the template from above, this would render "Hello John, I'm MacJohn!".

  
  

  Using “require” as an Object

  In some instances you may need to access data from a parent component inside your component.

  This can be achieved by specifying that our component requires that parent component, the require will give us reference to the required component controller, which can then be used in our controller as shown in the example below:

  Notice that required controllers are guaranteed to be ready only after the $onInit hook.

  angular.module("myApp", [])
    .component("helloWorld",{
        template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
        bindings: { name: '@' },
        require: {
          parent: '^parentComponent'
        },
        controller: function () {
          // here this.parent might not be initiated yet
  
          this.$onInit = function() {
             // after $onInit, use this.parent to access required controller
             this.parent.foo();
          }
  
        }
    });
  

  Keep in mind, though, that this creates a tight coupling between the child and the parent.

  edited 3 hours ago

  

  

  

  
• 0

  Basic++ Example of Component

  edit move example delete share

  0

  Definition of component:

  angular.module('app', [])
      .component('greeting', {
          bindings: {
              user: '<'
          },
          templateUrl: [function () {
              // can inject services into templateUrl method and dynamically determine which template to use
              return 'greeting.html';
          }],
          controller: [function () {
              this.$onInit = function () {
                  // code that you want to run when component initializes
                  this.user.fullName = this.user.firstName + ' ' + this.user.lastName;
              };
  
              this.doSomething = function () {
                  console.log('Did something', $event);
              };
          ]
      });
  

  Component's HTML template (greeting.html)

  Hello <span ng-bind="$ctrl.user.fullName" ng-click="$ctrl.doSomething()"></span>!
  

  Use in HTML template:

  <greeting user="$ctrl.user"></greeting>
  

  NOTE: example assumes parent component (or controller) has an object "user" and is aliased as "$ctrl"

  created Jul 23 at 9:03

  
• 0

  Components In angular JS

  edit move example delete share

  0

  The components in angularJS can be visualised as a custom directive (< html > this in an HTML directive, and something like this will be a custom directive < ANYTHING >). A component contains a view and a controller. Controller contains the business logic which is binded with an view , which the user sees. The component differs from a angular directive because it contains less configuration. An angular component can be defined like this.

  angular.module("myApp",[]).component("customer", {})
  

  Components are defined on the angular modules. They contains two arguments, One is the name of the component and second one is a object which contains key value pair, which defines which view and which controller it is going to use like this .

  angular.module("myApp",[]).component("customer", {
      templateUrl : "customer.html", // your view here 
      controller: customerController, //your controller here
      controllerAs: "cust"        //alternate name for your controller 
  })
  

  "myApp" is the name of the app we are building and customer is the name of our component. Now for calling it in main html file we will just put it like this

  <customer></customer>
  

  Now this directive will be replaced by the view you have specified and the business logic you have written in your controller.

  NOTE : Remember component take a object as second argument while directive take a factory function as argument.

  created Jul 23 at 14:24