da1lbi3 da1lbi3 - 4 months ago 12
AngularJS Question

Seperate controllers angular js

I'm new to Angular js and experimenting with the code etc. The thing what I don't get is how to make seperate module's. For example: I want to have a module for all the user functions such as login, register, forgot password etc.

I can't find a proper tutorial to learn how to do this. Can someone help me?

I have this in my app.js:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.controller('AppCtrl', function($scope, $http) {
$scope.data = {};

$scope.submit = function(){
var link = 'http://nikola-breznjak.com/_testings/ionicPHP/api.php';

$http.post(link, {username : $scope.data.username}).then(function (res){
$scope.response = res.data;
});
};
});


And this at my html:

<body ng-app="starter" ng-controller="AppCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>

<ion-content padding="true">
<form ng-submit="submit()">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" name="username" placeholder="enter username" ng-model="data.username">
</label>

<input class="button button-block button-positive" type="submit" name="submit" value="Submit to server">
</form>

<div class="card">
<div class="item item-text-wrap">
Response: <b ng-bind="response"></b>
</div>
</div>
</ion-content>
</ion-pane>
</body>


Edit (What I think it should be):

My app.js:

angular.module('starter', ['ionic','login'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})


My usersController.js

var app = angular.module("login", []);

app.controller('AppCtrl', function($scope, $http) {
$scope.data = {};

$scope.submit = function(){
var link = 'http://nikola-breznjak.com/_testings/ionicPHP/api.php';

$http.post(link, {username : $scope.data.username}).then(function (res){
$scope.response = res.data;
});
};
});


I include the userController.js at my html.

Answer

You can easily modularize the code as:

Step1: Define all your module as dependencies in your main module definition

angular.module('starter', [
    'ionic',
    'starter.login',
    'starter.register',
    'starter.forgot_password',
    //and any other module you want to add
])

Step2: Define these modules separately

//note these can be in same files or separate files all together

angular.module('starter.login',[
     'starter.login.services', //sub module for services
     'starter.login.directives', //sub module for directives
  ]);
angular.module('starter.register',[]);
angular.module('starter.forgot_password',[]);

//you can further create submodules for above modules
//eg: sub module for directive, sub module for service etc as

Step3: You can then define separately controllers/services/factories/directives for these modules.

//giving example for just login controller
 angular.module('starter.login').controller(function($scope){
      //note this module must be defined first before using it with a controller. so files must be loaded in the right order
});

   //similarly you will have to define your sub-modules before using them with services/controllers or directives

For more details you can read this very well written blog: https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/

and follow John Papa's guidelines for structuring your directory: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modules