ng

最新推荐文章于 2020-08-12 08:20:09 发布

夏洛克·林

最新推荐文章于 2020-08-12 08:20:09 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/linchonghui888/article/details/69062964

版权

ng是比较新的技术，版本1.0是在2012年发布的。是JS的框架，可通过<script>标签添加到HTML页面

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

ng通过ng-directives扩展HTML

网页加载完毕时，ng自动开启

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

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

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

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

可通过data-ng-init=“firstName=‘林 ’”绑定内容，然后通过data-ng-bing=“firstName”属性来获取值

ng模块（Module）定义了ng应用

ng控制器（Controller）用于控制ng应用

ng-app指令定义了应用，ng-controller定义了控制器

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

ng表达式

ng把表达式写在双大括号里面：{{expression}}

ng在表达式书写的位置输出位置

ng表达式很像JS表达式，可包含文字、运算符和变量

<p>我的第一个表达式： {{"我爱你，刘冰玉"}}</p>

</div>

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

</div>

使用 ng-init 不是很常见，有更好的初始化数据的方式

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

</div>

ng对象

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

</div>

ng数组

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

</div>

ng表达式和js表达式

都可以包含字母，操作符，变量

不同的是：ng表达式可以写在HTML中，不支持条件判断，循环及异常，支持过滤器

ng指令

ng允许自定义指令

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>

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

</div>

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序

数据绑定

同步ng表达式与ng数据

重复HTML元素

ng-repeat 指令会重复一个 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完美支持数据库的增删改查，把实例中的对象想象成数据库中的记录

ng-app指令

定义了ng应用程序的根元素

在网页加载完毕时会自动初始化应用程序

通过一个值（比如ng-app="myModule"）连接到代码模块

ng-init指令

为ng应用程序定义了初始值

一般情况下不使用，而是用另一个控制器或模块来代替

ng-model指令

绑定HTML元素到赢哦有那个程序数据

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

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

为HTML元素提供CSS类

绑定HTML到HTML表单

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

创建自定义指令

使用.directive函数来创建自定义指令

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

可通过元素名、属性、类名、注释来调用指令

<runoob-directive></runoob-directive>

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

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

E为元素名使用，A为属性使用，C为类名使用，M为注释使用 restrict默认值为EA

ng模型 ng-model指令

ng-model指令用于绑定应用程序数据到HTML控制器（input，select、textarea）的值

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

</div>

</script>

验证用户输入

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

</form>

提示信息会在 ng-show 属性返回 true 的情况下显示

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

Email:

<p>编辑邮箱地址，查看状态的改变。</p>

<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>

<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>

<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

css类

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

<style>

input.ng-invalid {
background-color: lightblue;
}

</style>

<body>

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

</form>

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

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine

ng作用域 Scope

Scope是应用在HTML（试图）和JS（控制器）之间的纽带

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

如何使用Scope

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

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

</div>

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

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

</script>

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

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

Scope作用范围

了解你当前使用的scope是非常重要的。大型项目中HTML DOM中有多个作用域，要清楚自己使用的scope对于的作用域

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

</ul>

</div>

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

app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

根作用域

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

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

ng控制器

ng控制器控制ng应用程序的数据

ng控制器是常规的JS对象，由标准的JS对象的构造函数创建

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

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

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

</div>

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

app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

</script>

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

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

myCtrl函数是一个JS函数

ng用$scope对象来调用控制器

控制器在作用域汇总创建了两个属性（firstName和lastName）

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

外部文件中的控制器

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

ng过滤器

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

ng过滤器可用于转化数据

currency：格式化数字为货币格式

filter：从数组项中选择一个子集

lowercase：格式化字符串为小写

orderBy：根据某个表达式排列数组

uppercase：格式化字符串为大写

表达式中添加过滤器

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

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

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

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

</div>

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

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

$scope.quantity = 1;

$scope.price = 9.99;

});

</script>

向指令添加过滤器

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

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

</ul>

过滤输入

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

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

</li>

ng选择框 Select

ng可使用数组或对象创建一个下拉列表选项

ng-options创建选项框

</select>

</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});

</script>

ng-repeat创建选项框

</select>

ng-options指令更适合创建下拉列表：使用ng-options的选项的一个对象，ng-repeat是一个字符串。使用对象能获取更多信息，应用也更灵活

数据源为对象

<p>选择的网站是:</p>

</select>

<h1>你选择的值是: {{selectedSite}}</h1>

</div>

<p>该实例演示了使用对象作为创建下拉列表。</p>

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

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

$scope.sites = {

site01 : "Google",

site02 : "Runoob",

site03 : "Taobao"

};

});

</script>

使用对象作为数据源, x 为键(key), y 为值(value)

value 在 key-value 对中也可以是个对象

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性

ng表格

ng-repeat 指令可以完美的显示表格

使用 angular 显示表格是非常简单的

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>

</table>

</div>

</script>

给表格添加样式

</style>

使用orderBy过滤器排序

<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>

</table>

显示序列（$index）

表格显示序号可以在 <td> 中添加 $index

<table>
<tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
</tr>

</table>

ng HTML DOM

ng为HTML DOM元素的属性提供了绑定应用数据的指令

ng-disabled指令

</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮

</p>

<p>
{{ mySwitch }}

</p>

</div>

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）

ng-show指令

ng-show指令隐藏或显示一个HTML元素

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

ng-hide指令

ng-show指令隐藏或显示一个HTML元素

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

ng事件

ng有自己的HTML事件指令

ng-click指令

<p>{{ count }}</p>

</div>

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

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

$scope.count = 0;

});

</script>

ng模块

模块是应用程序中不同部分的容器

模块是应用控制器的容器

控制器通常属于一个模块

创建模块

通过ng的angular.module函数来创建模块

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

</script>

myApp参数对应执行应用的HTML元素

通常ng应用程序将模块和控制器包含在JS文件中

ng表单

ng表单是输入控件的集合

HTML控件

input元素、select元素、button元素、textarea元素

重置表单

First Name:<br>

Last Name:<br>

<button ng-click="reset()">RESET</button>

</form>

<p>master = {{master}}</p>

</div>

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

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

$scope.master = {firstName:"John", lastName:"Doe"};

$scope.reset = function() {

$scope.user = angular.copy($scope.master);

};

$scope.reset();

});

</script>

ng输入验证

客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的

HTML 表单属性 novalidate 用于禁用浏览器默认的验证

夏洛克·林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫