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
}
}
}])
浙公网安备 33010602011771号