AngualrJS

最新推荐文章于 2022-05-21 22:39:38 发布

Lo-ra

最新推荐文章于 2022-05-21 22:39:38 发布

阅读量391

点赞数

本文链接：https://blog.csdn.net/yana_loo/article/details/68490191

版权

AngualrJS 使得开发现代的的单一页面应用程序变得更容易

支持：应用程序数据绑定到HTML 元素、克隆和重复HTML 元素、隐藏和显示HTML 元素、在HTML 元素“背后”添加代码、支持输入验证码

AngularJS 扩展了HTML

Angular 通过ng-directives 扩展了 HTML

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

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

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

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

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

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

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

AngularJS 将在表达式书写的位置“输出”数据

AngularJS 模块（Module）定义了AngularJS 应用 no-app 指令定义了应用

AngularJS 控制器（Controller）用于控制器AngularJS 应用， ng-controller 定义了控制器

<!-- ng-repeat 重复HTML 元素 -->
<!-- ng-app 指令定义了AngularJS应用程序的 根元素，在网页加载完毕时会自动引导（自动初始化）应用程序 -->
<!-- ng-init 指令为AngularJS 应用程序定义了一个 初始值 -->
<!-- ng-model 指令绑定HTML 元素到应用程序数据 -->
<!-- ng-repeat 指令对于集合中（数组中）的每个项目会克隆一次HTML 元素 -->
<div ng-app="" ng-init="name=['Tom','Lily','Ban']">
	<ul>
		<li ng-repeat="x in name">
			{{x}}
		</li>
	</ul>
</div>
<div ng-app="" ng-init="name=[
{name:'Tom',country:'Cananda'},
{name:'Lily',country:'Sweden'},
{name:'Kai',country:'Norway'}]">
	<p>循环对象</p>
	<ul>
		<li ng-repeat="y in name">
			{{y.name+","+y.country}}
		</li>
	</ul>
</div>

<!-- restrict  -->
<!-- E 作为元素名使用、A 作为属性使用、C 作为类名使用、M在作为注释使用 -->
<!-- 默认 EA -->
<div ng-app="myApp">
	<hello></hello>
	<div hello></div>
	<div class="maybe"></div>
</div>
<script>
	angular.module("myApp",[]).directive("hello",function(){
		return {
			rstrict:"AE",
			template:"<h1>自定义AE</h1>"
		}
	}).directive("maybe",function(){
		return{
			restrict:"C",
			template:"<h1>自定义C</h1>"
		}
	})
</script>

<!-- 单向&双向绑定 -->
<div ng-app="myApp" ng-controller="myCtrl">
	单向：<input ng-model="name">
	双向: <input ng-model="say">
	{{say}}
</div>

<script>
	angular.module('myApp',[]).controller('myCtrl',function($scope){
		$scope.name="lily"
		$scope.say="say something"
	})
</script>

验证邮箱

invalid 、valid 是否有效 error 是否正确

dirty 是否改动 touched 是否通过触屏点击

<meta charset="utf-8">
	<title></title>
	<script src="angular.min.js"></script>
	<style>
		input.ng-empty{
			background: #ccc;
		}
		input.ng-not-empty{
			background: yellow;
		}
		input.ng-valid{
			background: orange;
		}
		input.ng-invalid{
			background: pink;
		}
	</style>
</head>
<body>
<form ng-app="" name="myForm" ng-init="myText='luoluo0999@foxmail.com'">
	Email:
	<input type="email" name="myAddress" ng-model="myText">
	<p ng-show="myForm.myAddress.$error.email">这不是个正确的邮箱</p>
	<p>Touched: {{myForm.myAddress.$touched}} （点击后为true，颜色为green）</p>
	<p>Dirty: {{myForm.myAddress.$dirty}} (改动后ture)</p>
	<p>Valid: {{myForm.myAddress.$valid}} (合法为true，合法颜色为orange,不合法为pink)</p>
</form>