angularjs笔记

最新推荐文章于 2021-08-22 18:25:08 发布

V__KING__

最新推荐文章于 2021-08-22 18:25:08 发布

阅读量298

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/v__king__/article/details/119053250

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基础概念

ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

可以干什么

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

指令

指令
ng-app	指令告诉 AngularJS，元素是 AngularJS 应用程序的"所有者"
ng-model	指令把输入域的值绑定到应用程序变量 name，可以看成是绑定到ui上的变量名 `ng-model` 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

ng-bind	指令把应用程序变量 name 绑定到某个段落的 innerHTML 和{{name}}相似
ng-init	指令初始化 AngularJS 应用程序变量
data-ng-	AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
ng-controller
定义ng-app，然后使用app的控制器控制应用 - 控制器知道app的作用域(复杂应用中有多个作用域) - 用控制器来初始化变量名
"ng-repeat ng-options	{{ x }}
ng-options选择的item可以是对象，ng-repeat选择的item只能是字符串。这样在应用的时候可以更加的灵活。
创建自定义的指令
如何调用指令：
ng-show	`ng-show` 属性返回 `true` 的情况下显示
ng-click

过滤器	过滤器可以用来转换数据
ng-disabled	ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。（值为bool类型）
ng-show	ng-show 指令隐藏或显示一个 HTML 元素。（值为bool类型）
ng-hide	ng-hide 指令用于隐藏或显示 HTML 元素。（值为bool类型）

过滤器

AngularJS 过滤器可用于转换数据，下面为angular默认的过滤器。

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

自定义过滤器

下面的例子中，自定了一个angular字符串反转的过滤器。将需要过滤的数据传入，然后返回已经过滤的数据。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<body>

<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>

</body>
</html>

angular和jquery

angular和jquery主要冲突是在 $符号的使用，在使用 j q u e r y 的时候为$ $(‘#id1’)，可以替换为Jquery(‘#id1’).

参考：jQuery 核心 - noConflict() 方法

服务

总的来说：在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。比如后的面的内建服务http,location，timeout，interval，都是一个对象。比如可以使用 $h t t p 服务中的 g e t 方法来请求数据，这里的$ $http服务就相当于一个对象。

angular内建有30多个服务。

从这里可以看出，angular和jquery一样$ $的$ 符号有特殊的用途。

如**$location** 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

$location服务

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

$http 服务

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>
</body>
</html>

$timeout 服务

注意：对于controller来说，两秒后显示信息:


var app = angular.module('myApp', []);
app.controller('myCtrl', function(scope, timeout) {
  scope.myHeader = "Hello World!";
  timeout(function () {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

$interval 服务

每一秒显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

自定义服务

你可以创建自定义服务，链接到你的模块中。所以服务的作用域是你的ng-app模块。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>