AngularJs

最新推荐文章于 2022-04-27 19:46:52 发布
最新推荐文章于 2022-04-27 19:46:52 发布
阅读量97 收藏
点赞数
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46684624/article/details/109444947
版权

AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。

<div ng-app="" ng-init="firstName='John'">
 
<p>姓名为 <span ng-bind="firstName"></span></p>
 
</div>

AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!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="">
     <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
 
</body>
</html>

AngularJS应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。

AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。 
ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app = 'myApp' ng-controller = 'myCtrl'>
名：<input type = 'text' ng-model = 'firstName'></br>
姓：<input type = 'text' ng-model = 'lastName'></br>
</br>
姓名：{{firstName + '' +'lastName'}}
</div>
<script>
	var app = angular.module('myApp',[]);
	app.controller('myCtrl',function($scope){
		$scope.firstName = 'John';
		$scope.lastName = 'Doe';
})
</script>

AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。

AngularJS数字

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>总价： {{ quantity * cost }}</p>
 
</div>

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>总价： <span ng-bind="quantity * cost"></span></p>
 
</div>

AngularJS 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 {{ points[2] }}</p>
 
</div>

AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

  • ng-bind 绑定
  • ng-model 双向绑定

重复 HTML 元素

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat = 'x in names'>
    {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat = 'x  in names'>
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

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 实例
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

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

  • 元素名
<runoob-directive></runoob-directive>
  • 属性
<div runoob-directive></div>
  • 类名
 <div class="runoob-directive"></div>
  • 注释
<div class="runoob-directive"></div>

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

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS模型

双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

验证用户输入

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

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>
</html>

应用状态
ng-model指令可以为应用数据提供状态值 （invalid,dirty,touched,error）;

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
 
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

CSS类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
</head>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myName" ng-model="myText" required>
</form>

<p>编辑文本域，不同状态背景颜色会发生变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

</body>
</html>

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 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

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

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

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

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

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

Scope作用范围
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

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

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

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

</div>

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

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

AngularJS 过滤器

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

  • currency 格式化数字为货币格式。
  • filter 从数组项中选择一个子集。
  • lowercase 格式化字符串为小写。
  • orderBy 根据某个表达式排列数组。
  • uppercase 格式化字符串为大写。
<div ng-app="myApp" ng-controller="personCtrl">

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

</div>

货币样式

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

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | curr

</div>

向指令添加过滤器
orderBy过滤器根据表达式排列数组

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

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy :'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

自定义过滤器

<!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 = "HELLO";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

</body>
</html>

AngularJS 服务(Service)

什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

$location服务
$location 服务，它可以返回当前页面的 URL 地址。
注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>


var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location){
	$scope.myUrl = $location.absUrl();
})

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

var app =  angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
	$http.get('welcome.htm').then(function(response){
		$scope.myWelcome = response.data;
})
})

$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);
});

AngularJS事件

ng-click指令

<div ng-app='' ng-controller='myCtrl'>
<button ng-click='count = count + 1 '>点我!</button>
<p>{{count}}</p>
</div>

隐藏HTML元素
ng-hide指令用于设置应用部分是否可见
ng-hide=“true” 设置 HTML 元素不可见。
ng-hide=“false” 设置 HTML 元素可见。

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

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',function($scope){
	$scope.firstName = 'John',
	$scope.lastName = 'Doe'
	$scope.myVar = false;
	$scope.toggle = function(){
		$scope.myVar = !$scope.myVar;
}
})
</script>
郭大钰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS（一）
weixin_43238931的博客
03-03 159
AngularJS使用 在标签下面添加 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 指令含义 ng-app="" 定义AngularJS的使用范围 ng-init="变量=值;变量=值" 初始化变量的值，有多个变量时用分号隔开 ng-model="变量" 定义变量名 ng-bind="变量" 绑定变量名，获取该变量的数据，使用双重花括号{{变量}}获取变
初识AngularJS
silenceyobbo的博客
09-15 223
初识AngularJS一、AngularJS是什么？ AngularJS，简称：ng 它是一款非常优秀的前端高级JS框架 由Misko Hevery等人创建 2009年被Google公司收购，用于其多款产品 有一个全职的开发团队继续开发和维护这个库 这个框架可以轻松构建SPA应用程序 通过指令扩展HTML，通过表达式将数据绑定到HTML（基本不需要DOM操作） 二、SPA应用程序简单介绍 单页面应用
AngularJS
weixin_59938047的博客
09-17 302
1.AngularJS简介 AngularJS 是一个JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="https:...
angularJS
hello_world123456789的博客
06-27 696
1.AngularJS简述 AngularJS的官方文档是这样介绍它的。 完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。 AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如： 解...
AngularJS入门
hu1376586的博客
04-27 737
AngularJS的学习
AngularJs 1.5.8
11-07
AngularJS 1.5.8 是一个非常重要的版本，它是Google开发的JavaScript框架AngularJS的稳定版本之一。这个框架主要用于构建动态web应用，通过MVC（Model-View-Controller）架构模式来简化前端开发，提供了丰富的特性以...
angularjs_angularjs_
10-04
AngularJS，作为一款由Google维护的前端JavaScript框架，被广泛应用于构建动态Web应用程序。它以其数据绑定、依赖注入和模块化等特性深受开发者喜爱。在本文中，我们将深入探讨AngularJS 1.6版本，从环境搭建到核心...
AngularJS包
04-23
**AngularJS**，是Google维护的一个开源JavaScript框架，主要用于构建单页应用（SPA，Single Page Applications）。这个框架以其强大的数据绑定和依赖注入机制而闻名，极大地简化了前端开发流程。在给定的...
angularjs eclipse 1.2.0
11-06
angularjs eclipse 1.2.0 离线安装包，eclipseOxygen.3a Release (4.7.3a)（我使用的版本）->help->Install new software->add->Local. 之后就是下一步就行。 安装完后，会要求重启软件，启动后，在你创建的project...
AngularJS 示例
06-06
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动...
嵌入式系统开发：深入理解信号机制及其在进程通信中的应用
08-24
这篇文件是一份关于嵌入式系统中信号机制的详细介绍，它不仅涵盖了信号的基本概念和特性，还深入探讨了信号的基本操作和应用场景。信号是软件中断的一种模拟，它允许异步进程中断正在运行的进程，以处理突发事件。这种机制对于嵌入式系统尤为重要，因为它可以确保系统对外部事件做出快速响应。 文档首先解释了信号的异步通信特性，即进程无需等待信号的到来，也无法预知信号何时到达。接着，它详细介绍了信号的命名规则和如何在Linux系统中查看信号与数字编码的对应关系。例如，使用命令kill -l可以列出所有信号及其对应的数字编码。 进一步，文档列举了产生信号的几种情况，包括用户操作、硬件异常、软件异常、调用kill函数和运行kill命令。每种情况下，文档都提供了详细的解释和示例，帮助读者理解信号是如何在不同情境下产生的。 文档还介绍了进程收到信号后的几种处理方式：忽略信号、执行系统默认动作或自定义信号处理函数。特别强调了SIGKILL和SIGSTOP信号不能被忽略，因为它们提供了一种可靠的进程终止方法。
资源androidioswinOpenOpenCV3.4.7
08-24
资源androidioswinOpenOpenCV3.4.7提取方式是百度网盘分享地址
java源码资源学生成绩系统(图形界面)
08-24
java源码资源学生成绩系统（图形界面）提取方式是百度网盘分享地址
资源OpenCV3视频分析跟踪对象指导视频+文档+源码
最新发布
08-24
资源OpenCV3视频分析跟踪对象指导视频+文档+源码资源大小2G提取方式是百度网盘分享地址
Autodesk Vault.zip
08-24
Autodesk Vault.zip
源代码-材料仓储管理系统 v2.0.zip
08-24
源代码-材料仓储管理系统 v2.0.zip
ZLMediaKit MediaServer播放器
08-24
2024-08-24编译的ubutun16.04下全功能版本
基于darknet实现目标检测，提供识别点选验证码的实例和训练自己数据的API_darknet_captcha.zip
08-24
基于darknet实现目标检测，提供识别点选验证码的实例和训练自己数据的API_darknet_captcha
资源androidioswinOpenOpenCV3.4.8
08-24
资源androidioswinOpenOpenCV3.4.8提取方式是百度网盘分享地址
AngularJS入门指南
"AngularJS: Up and Running 是一本权威的AngularJS教程，旨在帮助读者从基础到高级概念逐步掌握这个JavaScript框架。本书由在Google参与AngularJS开发的工程师Shyam Seshadri和Brad Green撰写，适合JavaScript初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值