Angular2+AngularJS

时间 2019-11-16

标签 angular2+angularjs angular angularjs 栏目 AngularJS 繁體版

原文原文链接

AngularJS 系列：html

1.angular.module 的定义node

var mapApp = angular.module("positionSalaryEditApp",["subBase","empInfoDialogBase"]);

其中 “subBase” 是公共的基层module , "empInfoDialogBase" 是自定义的弹框控件对应的module，在此处进行调用，若是不须要引用任何东西，则直接为：
var mapApp = angular.module("positionSalaryEditApp",[]);
2.module 对应的factory的定义 
（若是是想放到已定义的module中，放在改定义代码下便可，若分开另外一个文件，则须要作如下重定义：var serviceApp = angular.module("positionSalaryEditApp");以下图代码）

var serviceApp = angular.module("positionSalaryEditApp");
serviceApp.factory("positionSalaryEditService", ["$http", "$location", function ($http,  $location) {
         // 保存
        function save(positionView, callback, errorCallback){
            $http.post("/sub/paas/sub/positionSalary/save.do", positionView).success(function (result) {
                if (callback) {
                    callback(result);
                }
            }).error(errorCallback);
        }

        return {
               save:function(setBudgetVO, callback, errorCallback){
                  save(setBudgetVO, callback, errorCallback);
                 }
        }


}]);  //factory end

3.module 对应的controller 的定义npm

var mapApp = angular.module("positionSalaryEditApp",["subBase","empInfoDialogBase"]);
mapApp.controller("positionSalaryEditCtrl",["$scope","$http","$filter",'$location',"positionSalaryEditService",function($scope,$http,$filter,$location,commonSubService,positionSalaryEditService){
      var view={ id:"",
                 name:""    
       }
      $scope.view=view;
      $scope.getName=function(){
             $scope.view.name="cjjuan";
       }


}]);  //controller end

4.html与angularJs 的双向绑定app

 <!------------ 对应angular.module 定义的变量--------->
<html ng-app="positionSalaryEditApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>岗位工资</title>
    <!------------ 引入对应的js文件--------->
    <script src="script/controllers/positionSalaryEditController.js"></script>
    <script src="script/services/positionSalaryEditService.js"></script>
    
</head>
<!------------ 对应angular.module 相应的controller的变量--------->
<body ng-controller="positionSalaryEditCtrl">
<form name="positionSalaryEditForm">
</form>
</body>
</html>

1. 自定义弹框post

1.angularJS directive自定义标签和属性 ui

2.angularJs 自定义过滤器spa

在angular.module 对应的下加 filter,具体见以下代码：.net

 1 var mapApp = angular.module("subApplyEditApp",["uniformCommon"]);
 2     /**
 3      *过滤器：取小数点后num位,且无千位符
 4      */
 5     mapApp.filter("num",function(){
 6         return function(input,num){
 7             if(input){
 8                var v=parseFloat(input);
 9                return v.toFixed(num);
10             }else{
11                 return "";
12             }
13         }
14     });

在html中调用以下：双向绑定

<td>{{item.approvedTax|num:2}}</td>

在js中调用以下：rest

item.approvedTax=$filter('num')(123456.1234);  输出结果为 123456.12

3.自定义校验器

定义了module后，在module 变量下定义文本框输入校验器

    /**
     * 自定义输入校验,两位小数位的正数
     */
    mapApp.directive('inputNum2',function (){
        return{
            restrict: "A",
            require: "?ngModel",
            link: function(scope, element, attrs, ngModelCtrl){
                element.blur(function() {
                    var reg = /^(([1-9]\d*)|0)(\.\d{1,2})?$/;
                    var value = element.val().replace(/,/g,'');
                    value = value.replace(/\s+/g,"");
                    if(reg.test(value)){
                        ngModelCtrl.$setViewValue(parseFloat(value).toFixed(2));
                        element.val(parseFloat(value).toFixed(2));
                        scope.$apply();
                    }else if(value==""){
                        ngModelCtrl.$setViewValue(0.00.toFixed(2));
                        element.val(0.00.toFixed(2));
                        scope.$apply();
                    }else{
                        pms.warn("请输入正确的数量!");
                        ngModelCtrl.$setViewValue(0.00.toFixed(2));
                        element.val(0.00.toFixed(2));
                        scope.$apply();
                    }
                });
            }
        }
    });

校验器在html上的调用以下：

<input ng-model="item.applyNum" type="text"    input-num2  />

Angular2环境搭建

参考微博：http://blog.csdn.net/ning0_o/article/details/52624911

官网参考：https://angular.cn/docs/ts/latest/quickstart.html

1.安装node以及其自带的npm:下载地址为https://nodejs.org/en/download/

更多相关文章...