本文主要参考：

https://www.runoob.com/angularjs/angularjs-tutorial.html

一、AngularJS 实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello {{name}}</h1>

</div>

</body>

</html>

阅读本教程前，您需要了解的知识：

在开始学习 AngularJS 之前，您需要具备以下基础知识：

HTML

CSS

JavaScript

AngularJS 实例

本教程包含了大量的 AngularJS 实例！

AngularJS 实例

AngularJS 参考手册

参考手册包含了本教程中使用到的所有指令和过滤器。

二、AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中

Note 我们建议把脚本放在 <body> 元素的底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello {{name}}</h1>

</div>

</body>

</html>

实例讲解：

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

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

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

Note 如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

</div>

Note HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5：

AngularJS 实例

</div>

三、AngularJS 表达式

AngularJS 使用表达式把数据绑定到 HTML。

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>我的第一个表达式: {{ 5 + 5 }}</p>

</div>

</body>

</html>

AngularJS 数字

AngularJS 数字就像 JavaScript 数字：

AngularJS 实例

<p>总价： {{ quantity * cost }}</p>

</div>

使用 ng-bind 的相同实例：

AngularJS 实例

</div>

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

AngularJS 实例

<p>姓名： {{ firstName + " " + lastName }}</p>

</div>

使用 ng-bind 的相同实例：

AngularJS 实例

</div>

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

AngularJS 实例

<p>姓为 {{ person.lastName }}</p>

</div>

使用 ng-bind 的相同实例：

AngularJS 实例

</div>

AngularJS 数组

AngularJS 数组就像 JavaScript 数组：

AngularJS 实例

<p>第三个值为 {{ points[2] }}</p>

</div>

使用 ng-bind 的相同实例：

AngularJS 实例

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

四、AngularJS 指令

AngularJS 通过被称为指令的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

完整的指令内容可以参阅 AngularJS 参考手册。

AngularJS 实例

<p>在输入框中尝试输入：</p>

<p>你输入的为： {{ firstName }}</p>

</div>

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

AngularJS 实例

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">

价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

Note 使用 ng-init 不是很常见。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

AngularJS 实例

<p>使用 ng-repeat 来循环数组</p>

<ul>

</li>

</ul>

</div>

ng-repeat 指令用在一个对象数组上：

AngularJS 实例

<div ng-app="" ng-init="names=[

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

<ul>

</li>

</ul>

</div>

Note AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。

把实例中的对象想象成数据库中的记录。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了初始值。

通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。

ng-model 指令

ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。

为应用程序数据提供状态（invalid、dirty、touched、error）。

为 HTML 元素提供 CSS 类。

绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

AngularJS 实例

<runoob-directive></runoob-directive>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

return {

template : "<h1>自定义指令!</h1>"

};

});

</script>

</body>

你可以通过以下方式来调用指令：

元素名

属性

类名

注释

以下实例方式也能输出同样结果:

元素名

<runoob-directive></runoob-directive>

属性

类名

注释

限制使用

你可以限制你的指令只能通过特定的方式来调用。

实例

通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

return {

restrict : "A",

template : "<h1>自定义指令!</h1>"

};

});

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

五、AngularJS模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

AngularJS 实例

名字: <input ng-model="name">

</div>

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

app.controller('myCtrl', function($scope) {

$scope.name = "John Doe";

});

</script>

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

AngularJS 实例

名字: <input ng-model="name">

</div>

验证用户输入

AngularJS 实例

Email:

<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

AngularJS 实例

Email:

</form>

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

AngularJS 实例

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

<body>

输入你的名字:

</form>

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine

六、AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

如何使用 Scope

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

AngularJS 实例

控制器中的属性对应了视图上的属性：

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {

$scope.carname = "Volvo";

});

</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据。

Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 实例

如果你修改了视图，模型和控制器也会相应更新：

<h1>{{greeting}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {

$scope.name = "Runoob";

$scope.sayHello = function() {

$scope.greeting = 'Hello ' + $scope.name + '!';

};

});

</script>

Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

AngularJS 实例

当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:

<ul>

</ul>

</div>

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

app.controller('myCtrl', function($scope) {

$scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

每个 <li> 元素可以访问当前的重复对象，这里对应的是一个字符串，并使用变量 x 表示。

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 实例

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

<h1>{{lastname}} 家族成员:</h1>

<ul>

<li ng-repeat="x in names">{{x}} {{lastname}}</li>

</ul>

</div>

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

app.controller('myCtrl', function($scope, $rootScope) {

$scope.names = ["Emil", "Tobias", "Linus"];

$rootScope.lastname = "Refsnes";

});

</script>

七、AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

AngularJS 实例

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{firstName + " " + lastName}}

</div>

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

app.controller('myCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

});

</script>

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

AngularJS 实例

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{fullName()}}

</div>

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

app.controller('personCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName;

}

});

</script>

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

AngularJS 实例

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}

];

});

保存文件为 namesController.js:

然后，在应用中使用控制器文件:

AngularJS 实例

<ul>

</li>

</ul>

</div>

八、AngularJS 过滤器

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

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

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

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

uppercase 过滤器将字符串格式化为大写：

AngularJS 实例

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

lowercase 过滤器将字符串格式化为小写：

AngularJS 实例

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

currency 过滤器

currency 过滤器将数字格式化为货币格式：

AngularJS 实例

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

AngularJS 实例

<ul>

</li>

</ul>

</div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

AngularJS 实例

<ul>

</li>

</ul>

</div>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

AngularJS 实例

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("");

}

});

九、AngularJS Serivce

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

实例

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

app.controller('customersCtrl', function($scope, $location) {

$scope.myUrl = $location.absUrl();

});

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

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$location vs window.location

window.location $location.service

目的允许对当前浏览器位置进行读写操作允许对当前浏览器位置进行读写操作

API 暴露一个能被读写的对象暴露jquery风格的读写器

是否在AngularJS应用生命周期中和应用整合否可获取到应用生命周期内的每一个阶段，并且和$watch整合

是否和HTML5 API的无缝整合否是（对低级浏览器优雅降级）

和应用的上下文是否相关否，window.location.path返回"/docroot/actual/path" 是，$location.path()返回"/actual/path"

$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

实例

使用 $http 服务向服务器请求数据:

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

app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm").then(function (response) {

$scope.myWelcome = response.data;

});

以上是一个非常简单的 $http 服务实例，更多 $http 服务应用请查看 AngularJS Http 教程。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

实例

两秒后显示信息:

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

AngularJS $interval 服务对应了 JS window.setInterval 函数。

实例

每一秒显示信息:

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

app.controller('myCtrl', function($scope, $interval) {

$scope.theTime = new Date().toLocaleTimeString();

$interval(function () {

$scope.theTime = new Date().toLocaleTimeString();

}, 1000);

});

创建自定义服务

你可以创建自定义服务，链接到你的模块中：

创建名为hexafy 的服务:

app.service('hexafy', function() {

this.myFunc = function (x) {

return x.toString(16);

}

});

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:

实例

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

过滤器中，使用自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在过滤器 myFormat 中使用服务 hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {

return function(x) {

return hexafy.myFunc(x);

};

}]);

在对象数组中获取值时你可以使用过滤器：

创建服务 hexafy:

<ul>

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

</ul>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

用Easyui写一个银行个人存款计算器（纯前端页面）
某行去实习，让实习生做一个小页面，来计算个人存款的利息，抽空用最简单的方式写了一个效果图需求描述题目编写一个“存款计算器”小应用，用户通过选择存款种类、存款期限，输入存款金额后，可以计算显示出…...
2024/4/28 8:06:12
Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序。 …...
2024/4/19 16:02:11
使用jquery制作计算器_如何使用jQuery对计算器进行编程
使用jquery制作计算器Previously, I showed you how to use CSS border-radius property to create the following calculator. Now I will show you how to use jQuery to implement the functionality of the calculator.之前，我向您展示了如何使用CSS border-rad…...
2024/4/20 15:52:37
ping计算机名获取IP
如何ping别人的计算机名来获取IP？获取别人的IP，是作为骇客或是黑客必要的步骤。那么，怎么来获取IP呢？今天想试着用arp命令干点坏事来陶冶一下情操，当我ping电脑名查询IP时，发现返回的是[fe80::64ca:cb99:2e4d:bd27%13]32位字节数据。于是我百度了几小时，终于找…...
2024/4/28 1:04:37
割双眼皮一年疤痕图片大全
...
2024/4/21 13:38:36
南宁双眼皮梦想整形前沿
...
2024/4/21 13:38:34
张娇娇定制双眼皮怎么样
...
2024/4/21 13:38:33
全切双眼皮特别痛吗
...
2024/4/21 13:38:32
韩式三点双眼皮怎么护理
...
2024/4/21 13:38:31
js预览本地资源
浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问…...
2024/4/21 13:38:30
ionic开发-使用ngCordova增强设备调用能力
什么是ngCordova ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展，让开发者可以方便的在HybridApp开发中调用设备能力，即可以在AngularJs代码中访问设备能力Api。ngCordova是结合cordova和angular包装了许多插件，诸如访…...
2024/4/21 13:38:29
2.Ionic 环境搭建（ios创建环境运行）
前言的前言： 昨天折腾了一天，主要是公司网络不给力，Xcode下了一天啊！！！晚上背着电脑回家继续搞，才把ios环境运行出来。所以今天就乘热打铁，把昨天的血泪史记下来，以此祭…...
2024/4/21 13:38:29
ionic3+cordova使用qr扫描仪
1.下载好qrcode的cordova插件：ionic cordova plugin add codova-plugin-qrscanner 2.下载好npm install --save ionic-native/qr-scanner 3.创建一个扫描仪页面，整个页面都是拿来作扫描的界面，这个界面在调用qrscanner对象的scan方法&#xf…...
2024/4/21 13:38:28
.NET in Browser - Blazor
什么是BlazorBlazor 是一个实验性的. NET web 框架, 使用 C# 和 HTML 在任何浏览器中不需要插件即可运行 WebAssembly 程序集。什么是WebAssemblyWebAssembly是一种新的适合于编译到Web的，可移植的，大小和加载时间高效的格式，是一种新的字节码…...
2024/4/21 13:38:26
NO.14 关于ROS2的第一个程序
零蚀这应该也会很困扰一些没有过ros开发，又想直接ros2开始的人吧开启第一个ros2程序从环境搭建开始如果没有经历过ros的开发，在macos上开发ros2你可能会很凌乱，这些都是啥，到底该怎么开发，用什么ide，怎…...
2024/4/21 13:38:25
cordova调用摄像机，并上传文件
1.什么是cordova 1.cordova是一个能够提供设备服务器的组件，比如摄像头，网络连接，文件传输等等。 2.下面我要说明的demo案例是。ionicangularcorodova调用摄像头实现的文件上传至本地和远程服务端。 3.首先要说明的一个对象时cordova里面的…...
2024/4/21 13:38:24
双眼皮7个月竖线
...
2024/4/21 13:38:23
web前端之HTML5 在桌面端实现拍照功能一 video （typescript）
前言关于在桌面端通过调用摄像头拍照的需求，可能没有那么主流，因为现在大多数都通过移动端（手机，平板）完成，但是如果有需求就要想办法实现，通过查阅资料了解到目前浏览器摄像头拍照有几种实现…...
2024/4/21 13:38:22
ping 加上时间信息
如果要实现 ping 加时间信息，然后还要实时保存到一个文件中，那么就与awk结合1、只用ping信息 [root@zhang pingbackage]# ping 115.239.211.112 PING 115.239.211.112 (115.239.211.112) 56(84) bytes of data. 64 bytes from 115.239.211.112: icmp_seq=1 ttl=53 time=27.1 …...
2024/4/21 13:38:21
JetBrains IDE在OSX 10.14以上版本无法获取麦克风、摄像头以及权限解决办法
前言由于最近公司的大部分用户的mac系统都覆盖到了10.14以上，而且最近开发从QTCreator 迁移到了Clion上（不得不说Clion确实强大），结果遇到了Clion 调试遇到麦克风/摄像头权限时无法获取权限，导致调试的程序被OSX系统…...
2024/4/20 15:52:45

AngularJS 框架（一）

一、AngularJS 实例

二、AngularJS 简介

三、AngularJS 表达式

AngularJS 表达式

AngularJS 数字

AngularJS 对象

AngularJS 数组

四、AngularJS 指令

AngularJS 指令

数据绑定

重复 HTML 元素

ng-app 指令

ng-init 指令

ng-model 指令

ng-repeat 指令

创建自定义的指令

限制使用

五、AngularJS模型

ng-model 指令

双向绑定

验证用户输入

CSS 类

六、AngularJS Scope(作用域)

如何使用 Scope

Scope 概述

Scope 作用范围

根作用域

七、AngularJS 控制器

AngularJS 控制器

控制器方法

外部文件中的控制器

其他实例

八、AngularJS 过滤器

AngularJS 过滤器

表达式中添加过滤器

currency 过滤器

向指令添加过滤器

过滤输入

自定义过滤器

九、AngularJS Serivce

AngularJS 服务(Service)

什么是服务？

为什么使用服务?

$http 服务

$timeout 服务

$interval 服务

创建自定义服务

过滤器中，使用自定义服务

相关文章

最新文章