{"id":49,"date":"2018-08-28T06:46:00","date_gmt":"2018-08-28T04:46:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/08\/28\/angularjs-tutorial-for-beginners-4-angularjs-modules-and-controllers\/"},"modified":"2020-08-22T08:48:50","modified_gmt":"2020-08-22T06:48:50","slug":"angularjs-tutorial-for-beginners-4-angularjs-modules-and-controllers","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/angularjs-tutorial-for-beginners-4-angularjs-modules-and-controllers\/","title":{"rendered":"AngularJS Tutorial for Beginners 4 – AngularJS Modules and Controllers"},"content":{"rendered":"

In this AngularJS Tutorial we would examine the various aspects of an AngularJS program.<\/p>\n

 <\/p>\n

We would cover the following topics:<\/p>\n

    \n
  1. What is a Module in AngularJS?<\/a><\/li>\n
  2. How to Create a Model<\/a><\/li>\n
  3. What is a Controller in AngularJS?<\/a><\/li>\n
  4. How to Create a Controller<\/a><\/li>\n
  5. How Register a Controller with a Module<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    These are called directives the three most important bit of an AngularJS application that we used in out program. We would discuss more on directives in Tutorial 5.<\/p>\n

     <\/p>\n

    1. What is a Module in AngularJS?<\/h3>\n

    A module in AngularJS is a container that holds various parts of an AngularJS application such as controller, directives, services and filters. It serves\u00a0 as the entry point to the application.
    \nA module specifies how the AngularJS starts.
    \nA module is the first thing you create in an AngularJS application.<\/p>\n

     <\/p>\n

    2. How to Create a Module<\/h3>\n

    To create a module, use the AngularJS syntax below and specify the name of the module just like we did in Tutorial 2<\/a> and Tutorial 3.<\/a><\/p>\n

     <\/p>\n

    var<\/span> FirstApp =<\/span> angular.module('FirstApp'<\/span>, []);<\/pre>\n
     <\/p>\n
    In creating a module, you specify two parameters:<\/p>\n
      \n
    • the name of the module<\/li>\n
    • array of dependencies the module depends on. In this case we pass an empty array [ ] showing that our module does not depend on any external dependencies.<\/li>\n<\/ul>\n
       <\/p>\n
      3. What is a Controller?<\/h3>\n
      The next thing you create after creating a module, is a controller.
      \nA controller in AngularJS is function that controls the communication between the application logic and the view. For example, a controller would manage retrieving data from the database and displaying it in a html page.<\/p>\n
       <\/p>\n
      4. How to Create a Controller<\/h3>\n
      To create a controller, simply create a function and assign it to a variable as shown below
      \n<\/p>\n
       <\/p>\n
      var<\/span> MyController =<\/span> function<\/span>($scope) {\r\n $scope.name =<\/span> \"Welcome to AngularJS\"<\/span>;\r\n}<\/pre>\n
       <\/p>\n
      In this controller, we pass a parameter called $scope to the controller function. $scope is used to make variables available in the view. So any variable attached to the $scope is accessible from the view using the binding expression {{\u00a0 }}.<\/span>
      \nIn this example, we can access the variable name from the html page using {{ name }}<\/span><\/p>\n
       <\/p>\n
      5. How to Register a Controller With a Module<\/h3>\n
      The next step after creating a module and a controller is to register the controller with a\u00a0 module.
      \nTo register a controller with a module, use the syntax below:<\/p>\n
       <\/p>\n
      <\/p>\n
      FirstApp.Controller(\"MyController\"<\/span>, MyController);<\/pre>\n
       <\/p>\n
      Now That we have created a module and a controller, and registered a controller with a module, we can now move to the next step and that is how to use the module and controller in a view.
      \nFor this we need to discuss AngularJS directives in Tutorial 5.<\/p>\n","protected":false},"excerpt":{"rendered":"
      In this AngularJS Tutorial we would examine the various aspects of an AngularJS program.   We would cover the following topics: What is a Module … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":5,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":1019,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/1019"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}