AngularJS学习

发布时间：2020-12-17 10:32:22 所属栏目：安全来源：网络整理

导读：参考：RUNOOB.COM，菜鸟教程 1 实例：根据输入内容，直接展示内容。引入：script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"/script div ng-app="" p名字 : input type="text" ng-model="name"/p h1Hello {{name}}/h1 /div input内

参考：RUNOOB.COM，菜鸟教程

1 实例：根据输入内容，直接展示内容。

引入：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

input内输入XX,直接下面显示 Hello XX

一、Angular JS基础

1,1 表达式

<div ng-app =""> //不可缺少 ng-app
<p>我的第一个表达式： {{ 5 + 5 }}</p> 结果为10
</div>

1.2 指令

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p> //John

1.3

1.4 验证

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

1.5

< style >

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

< /style >
< body >

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

1.6

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

二、Angular JS指令

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app 定义应用程序，ng-model 元素值绑定，ng-bind 应用程序数据绑定到HTML视图；

ng-init 指令初始化 AngularJS 应用程序变量；data-ng-bind自定义属性。

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

ng-show 属性返回 true 的情况下显示

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

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

注：

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!