AngularJS Basics

Directory Structure and Code

To organize angular javascript codes, create directory to manage javascripts.

• app.js
• controllers.js
• service.js

The order to read these file

<script type="text/javascript" src="/javascripts/app/app.js"></script>
<!-- Service Factory -->
<script type="text/javascript" src="/javascripts/app/service.js"></script>
<script type="text/javascript" src="/javascripts/app/controller.js"></script>

app.js

Module definition, and dependencies.

var appModule = angular.module("appModule",[]); // Create module

service.js

Register services to use this project

(function(module){
    'use strict';
    module.factory('List',function($rootScope){
        return new app.List($rootScope);
    });
    // module.service('List',['$rootScope',app.List]);
}(appModule));

Register app.List from service implementation as ‘List’

controller.js

Controller element and event and others

(function(module){
 'use strict';  // Strict mode

  // Page total controller(event etc...)
  module.controller('pageController', function($scope){
  });

  // This is partial controller
  module.controller('partController', function($scope){
     // $scope.$parent.
  });
}(appModule));