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/

更多相關文章...

相關標籤/搜索

AngularJS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。