Skip to content

Instantly share code, notes, and snippets.

@paveltimofeev

paveltimofeev/AngularQuickly-another_approach.md

Last active August 24, 2016 12:06
Show Gist options
  • Save paveltimofeev/e78f7b6183b514e627aa0714ae14c9cc to your computer and use it in GitHub Desktop.
Save paveltimofeev/e78f7b6183b514e627aa0714ae14c9cc to your computer and use it in GitHub Desktop.
Download ZIP
Angular Quickly
Raw
AngularQuickly-another_approach.md

Angular Quickly (another approach)

app3.js:

function configApp() {
  
  // todo configuration
}

function HeaderController( $scope ) {
  
  $scope.buttons = ['Home', 'About'];
}

function FeedbackFormController( $scope, Db ) {
  
  $scope.sendFeedback = function( message )
  {
    var db = new Db(); // Factories are not singletons, and require to use 'new' keyword
    db.send( message );
  }
}

function DbService() {
  
  this.send = function( data )
  {
    return data != undefined;
  }
}


// bundle app
  var app = angular.module('app', []);

  app.config(configApp);
  app.service('DbService', DbService);
  app.factory('Db', DbService);
  app.controller('HeaderController', ['$scope', HeaderController]);
  app.controller('FeedbackFormCtrl', ['$scope','Db', FeedbackFormController]);
  

// or:
  angular
    .module('app2', [])
    .config(configApp)
    .service('DbService', DbService)
    .factory('Db', DbService)
    .controller('HeaderController', ['$scope', HeaderController])
    .controller('FeedbackFormCtrl', ['$scope','Db', FeedbackFormController]);

app3.html

<html>

  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script src="app3.js"></script>
  </head>
  
  <body ng-app="app">
  
  <div ng-controller="HeaderController">
    <ul>
      <li ng-repeat="button in buttons">{{button}}</li>
    </ul>
  </div>
  
  <div ng-controller="FeedbackFormCtrl">
    <button ng-click="sendFeedback"/>
  </div>
  
  </body>
</html>
Raw
AngularQuickly.md

Angular Quickly

// Create app
angular.module('secApp', []);


//---------------------------------------------------------------------------------------------------


// Create MainCtrl controller in secApp
angular
  .module('secApp')
  .controller('MainCtrl', function( $scope ){ $scope.PageTitle = 'Main page'; });


//---------------------------------------------------------------------------------------------------


// Create Header controller in secApp (another way)
function HeaderCtrl( $scope ) {
  
  $scope.buttons = ['Home', 'About'];
}

angular
  .module('secApp')
  .controller('HeaderCtrl', HeaderCtrl);


//---------------------------------------------------------------------------------------------------


// Create service and use it in controller
function DbService()
{
  this.send = function( data ) 
  {
    return data != undefined;
  }
}

function FeedbackFormCtrl( $scope, DbService )
{
  $scope.sendFeedback = function( message )
  {
    DbService.send( message );  // Services are singletons (per app)
  }
}

angular.module('secApp').service('DbService', DbService);
angular.module('secApp').controller('FeedbackFormCtrl', FeedbackFormCtrl);


//---------------------------------------------------------------------------------------------------

// Create and use DbService as FACTORY
function FeedbackFormController( $scope, DbService )
{
  $scope.sendFeedback = function( message )
  {
    var db = new DbService(); // Factories are not singletons, and require to use 'new' keyword
    db.send( message );
  }
}

angular.module('secApp').factory('DbService', DbService); // register DbService as factory
angular.module('secApp').controller('FeedbackFormCtrl', FeedbackFormController);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment