Angularjs 模块化




这个图是官方推荐的angular js 模块化的写法:
var bookStoreApp = angular.module("bookStoreApp",['ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters','bookStoreServices','bookStoreDirectives']);     进行一些依赖注入//

var bookStoreDirectives = angular.module("bookStoreDirectives",[]);
bookStoreDirectives.directive("bookStoreDirectives_1",["$scope",function($scope){

  // 
}]);
bookStoreDirectives.directive("bookStoreDirectives_2",["$scope",function($scope){
//
}]);

这样可以进行多个指令的编写进行很好的模块化.

举个例子:
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <form action="" class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
          <div class="form-group">
            <label for="" class="col-md-2 control-label">用户</label>
            <div class="col-md-10">
              <input type="text" type="password" class="form-control" ng-model="userInfo.email">
            </div>
          </div>
          <div class="form-group">
            <label for="" class="col-md-2 control-label">密码</label>
            <div class="col-md-10">
              <input type="text" type="password" class="form-control" ng-model="userInfo.password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-10 col-md-offset-2">
              <div class="checkbox">
                <label for="">
                  <input type="checkbox" ng-model="userInfo.autoLogin">
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button class="btn btn-default" ng-click="getFormData()">获取值</button>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button class="btn btn-default" ng-click="setFormData()">改变值</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

var userInfoModule = angular.module("UserInfoModule",[]);
userInfoModule.controller("UserInfoCtrl",["$scope",function($scope){
  $scope.userInfo = {
    email:"114850011@qq.com",
    password:"234242342",
    autoLogin:true
  };
  $scope.getFormData = function(){
    console.log($scope.userInfo);
  };
  $scope.setFormData = function(){
    $scope.userInfo = {
      email:"997431210@qq.com",
      password:"12345689",
      autoLogin:false
    }
  }
}])

 

posted @ 2014-11-17 15:58  加油小猪2015  阅读(297)  评论(0)    收藏  举报