AngularJs基础用法（3）

最新推荐文章于 2024-06-23 17:16:57 发布

萍萍魏

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量223

点赞数

文章标签： AngularJs

本文链接：https://blog.csdn.net/weipping_/article/details/101370362

版权

AngularJs全局Api

angular.lowercase( <angular1.7 )
angular.$$lowercase( angular1.7+ ) 转换字符串为小写

angular.uppercase( <angular1.7 )
angualr.$$uppercase( angular1.7+ ) 转换字符串为大写

<body>
    <div ng-app="app" ng-controller="myCtrl">
        {{ mes }}--------{{ msg }}
        <br/>
        {{ name }}--------{{ names }}
    </div>
</body>
<script>
var app = angular.module("app",[]);
app.controller("myCtrl",function($scope) {
    $scope.mes = "WEIPINGPING";
    $scope.msg = angular.lowercase($scope.mes)
    $scope.name = "pingpingwei";
    $scope.names = angular.uppercase($scope.name)
})
</script>

angular.isString() 判断给定的对象是否为字符串，如果是返回true

angular.isNumber() 判定给的对象是否为数字，如果是返回true

<body>
    <div ng-app="app" ng-controller="myCtrl">
        <p>{{ mes }}</p>
        <p>{{ flag }}</p>
        <hr/>
        <p>{{ num }}</p>
        <p>{{ isshow }}</p>
    </div>
</body>
<script>
var app = angular.module("app",[]);
app.controller("myCtrl",function($scope) {
    $scope.mes = "WEIPINGPING";
    $scope.flag = angular.isString($scope.mes);
    $scope.num = "977";
    $scope.isshow = angular.isNumber($scope.num);
})
</script>

ng-include 渲染包含html的内容

AngularJs依赖注入

AngularJs提供了很好的依赖注入机制：

value 是一个简单的js对象，用来向控制器传递值

service是一个可注入的构造器

factory是一个可注入的方法

provider是一个可配置的factory

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

factory demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myCtrl">
       {{result}}------{{result1}}
       <hr/>
       输入一个数字：<input type="number" ng-model="number"/>
       <button ng-click = "square()">X<sup>2</sup></button>
        <h1>{{result}}</h1>
        <h1>{{result1}}</h1>
    </div>
</body>
<script>
var app = angular.module("app",[]);

//创建一个函数 里面学一些公用的方法
var getValue = function () {
    var factory = {};
    factory.multiply = function (a,b) {
        return a * b;
    };
    factory.addValue = function (a,b) {
        return a + b;
    };
    return factory;
}

//给予一个默认值
app.value("defaultInput", 5);

//建立一个工厂，为service服务
app.factory("MathService",function() {
    return getValue();
})

//建立一个服务，等待控制层的调用
app.service("CalcService",function(MathService) {
    this.square = function (a) {
        return MathService.multiply(a, a);
    };
    this.add = function (a) {
        return MathService.addValue(a, a);
    }
})

//控制器，为页面服务
app.controller("myCtrl",function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);
    $scope.result1 = CalcService.add($scope.number);
    $scope.square = function () {
        $scope.result = CalcService.square($scope.number);
        $scope.result1 = CalcService.add($scope.number);
    }
})
</script>
</html>

萍萍魏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs基础用法（3）

AngularJs全局Apiangular.lowercase( <angular1.7 )angular.$$lowercase( angular1.7+ ) 转换字符串为小写angular.uppercase( <angular1.7 )angualr.$$uppercase( angular1.7+ ) 转换字符串为大写<body> &l...
复制链接

扫一扫