AngularJS基礎

turanaishangn angularjs

# 模板

<div ng-app="myApp" ng-controller="myCtrl">
<p> 姓名:</p>
<h3>{{name}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "郝佳瑤";
});
</script>

# 常用指令

ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 **ng-bind **指令把应用程序数据绑定到 HTML 视图。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。 ng-controller 指令定义了应用程序控制器。 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出。 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 ng-show 指令隐藏或显示一个 HTML 元素。 ng-hide 指令用于隐藏或显示 HTML 元素。 ng-click 指令定义了 AngularJS 点击事件。 ng-include 指令来包含 HTML 内容。

# AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

# 自定义过滤

<div ng-app="myApp" ng-controller="myCtrl">


姓名: {{ msg | reverse }}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

# AngularJS 服务(Service)

$location 它可以返回当前页面的 URL 地址。 $http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。(Axjx) $timeout 服务对应了 JS window.setTimeout 函数。(定时器) $interval 服务对应了 JS window.setInterval 函数。(访问在指定的周期(以毫秒计)来调用函数或计算表达式。)

# 创建自定义服务

<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>过滤器使用服务将10进制转换为16进制。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
app.controller('myCtrl', function($scope) {
    $scope.counts = [255, 251, 200];
});
</script>

# AngularJS Http (XMLHttpRequest)

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

POST 与 GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

此外还有以下简写方法：

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

通用方法实例

 <div ng-app="myApp" ng-controller="myCtrl">

        <p>{{myHeader}}</p>
        <ol>
            <li ng-repeat=" x in myWelcome">{{x.name +','+x.userName}}</li>
        </ol>


    </div>

    <p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http, $timeout) {
            $scope.myHeader = "Hello World!";
            $http.get("http://172.17.1.96:8131/quality/getQuality").then(function (response) {
                console.log(response.data)
                $scope.myWelcome = response.data;
            });
            $timeout(function () {
                $scope.myHeader = "How are you today?";
            }, 2000);
        });
    </script>

简写方法实例

<div ng-app="myApp" ng-controller="myCtrl">
        <ol>
            <li ng-repeat=" x in myWelcome">{{x.name +','+x.userName}}</li>
        </ol>


    </div>

    <p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http.get("http://172.17.1.96:8131/quality/getQuality")
                .then(function (response) { $scope.myWelcome = response.data; });
        });
    </script>

TURANAISHANGN

Choose mode