2016-07-31 5 views
2

私はAngularJSを初めて使っていて、コードを試していました。私が得られないことは、別々のモジュールを作る方法です。たとえば、ログイン、登録、パスワードを忘れたなどのすべてのユーザー機能用のモジュールを用意したいとします。Separate controllers AngularJS

これを行う方法については、適切なチュートリアルが見つかりません。誰か助けてくれますか?

<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> 

編集(私はそれがあるべきだと思う何):

HTML

// 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; 
    }); 
    }; 
}); 

そして、この:

私は私のapp.jsでこれを持っています

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(); 
    } 
    }); 
}) 

マイ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; 
     }); 
    }; 
}); 

私はuserController.js私のhtmlでが含まれます。

+0

https://github.com/johnpapa/あなたは、この非常によく書かれたブログを読むことができます詳細については

//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 

angle-styleguide/blob/master/a1/README.md#modules –

+0

これが役立つなら、私の答えをチェックしてください! –

答えて

3

あなたは簡単のように、コードをモジュール化することができます

ステップ1:あなたのメインモジュールの定義

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

ステップ2で依存関係として、すべてのモジュールを定義します。別途

//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 
をこれらのモジュールを定義します。

ステップ3:これらのモジュールに対して、コントローラ/サービス/ファクトリ/ディレクティブを個別に定義することができます。 https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/

やディレクトリを構築するためにジョン・パパのガイドラインに従います: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modules

+0

「スターター」が必要ですか?あなたはモジュールを定義するときにプレフィックスとして?または、モジュール名でモジュールを作成するだけですか? – da1lbi3

+0

任意の名前を付けることができます。ちょうどあなたは 'parentmoduleName'に従うことができます。コードを維持して理解できるようにするための規約としてのものたくさんのjsファイル(コントローラ/サービス/指令)を持つ大規模なアプリケーションの場合は、規約に従うことをお勧めします。 –

+0

さて、ありがとう!私は自分のコードを編集しました。もし私がそれを正しく理解すれば、あなたはそれをチェックできますか? – da1lbi3

関連する問題