Fatal编程技术网

Javascript 独立控制器AngularJS

javascript angularjs

Javascript 独立控制器AngularJS,javascript,angularjs,Javascript,Angularjs,我是AngularJS的新手，正在试验代码。我不懂的是如何制作独立的模块。例如，我想有一个模块，用于所有用户功能，如登录、注册、忘记密码等 我找不到合适的教程来学习如何做到这一点。有人能帮我吗 我的app.js中有这个： // Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name

我是AngularJS的新手，正在试验代码。我不懂的是如何制作独立的模块。例如，我想有一个模块，用于所有用户功能，如登录、注册、忘记密码等

我找不到合适的教程来学习如何做到这一点。有人能帮我吗

我的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;
    });
  };
});

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

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

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;
        });
    };
});
MyusersController.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;
    });
  };
});

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

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

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;
        });
    };
});
我在html中包含了userController.js。

您可以轻松地将代码模块化为：

步骤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步：然后可以为这些模块分别定义控制器/服务/工厂/指令

//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
有关更多详细信息，请阅读这篇写得非常好的博客：

并遵循John Papa的指南来构建您的目录：

如果有帮助，请检查我的答案！定义模块时是否需要“starter.”作为前缀？或者我可以用模块名创建一个模块吗？您可以给出任何名称。只是您可以遵循“parentmoduleName.”这一惯例，使代码易于维护和理解。当涉及到有很多js文件（控制器/服务/指令）的大型应用程序时，遵循约定是一个很好的实践。好的，谢谢！我已经根据你的代码编辑了我的代码。你能检查一下我是否理解正确吗？我想可以。但是为了更好的可读性，您应该真正遵循convention@JorawarSingh当前位置我很高兴我能做出贡献