AngularJS入门

最新推荐文章于 2019-02-27 09:01:45 发布

ChengCode

最新推荐文章于 2019-02-27 09:01:45 发布

阅读量240

点赞数

分类专栏：前端文章标签： angular 入门

本文链接：https://blog.csdn.net/qq_31011649/article/details/82868897

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、AngularJS基本指令

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

ng-app 指令

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

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

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

ng-init 指令

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-model 指令把元素值（比如输入域的值）绑定到应用程序

ng-repeat 指令

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

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

<p>循环一个对象数组：</p> 
<ul> 
<li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>
</ul>

创建自定义的指令

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

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

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

使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive: 可以通过以下方式来调用指令：元素名、属性、类名、注释

<body ng-app="myApp">

<my-directive></my-directive>

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

</body>

验证用户输入

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

ng-invalid:未通过验证的表单

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true

ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过

ng-touched:布尔值属性，表示用户是否和控件进行过交互

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

ng-valid: 验证通过
ng-invalid: 验证失败
ng-valid-[key]: 由$setValidity添加的所有验证通过的值
ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
ng-pristine: 控件为初始状态
ng-dirty: 控件输入值已变更
ng-touched: 控件已失去焦点
ng-untouched: 控件未失去焦点
ng-pending: 任何为满足$asyncValidators的情况

Scope 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

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

根作用域

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

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

二、分层开发

接下来将要制作模拟从服务器获取用户信息并显示的demo

将AngularJS分为Service，Controller

1、在js文件夹下创建service、controller文件夹

2、创建user-app.js文件

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

3、在service文件夹下创建user-service.js

userApp.service("userService", function($http) {
	this.getUser = function() {
		return $http.get("user.json");
	}
});

4、在controller文件夹下创建user-controller.js

userApp.controller("userController", function($scope, userService) {
	$scope.show = false;
	$scope.user = userService.getUser()
		.then(function(response) {
			$scope.show = true;
			$scope.user = response.data;
		}, function(response) {
			$scope.show = false;
			$scope.status = response.status;
			$scope.err = response.statusText;
		});
});

5、在根目录下创建user.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>User Test</title>
		<script type="text/javascript" src="js/angular/angular.min.js"></script>
		<script type="text/javascript" src="js/user-app.js"></script>
		<script type="text/javascript" src="js/service/user-service.js"></script>
		<script type="text/javascript" src="js/controller/user-controller.js"></script>
	</head>

	<body ng-app="userApp">
		<div ng-controller="userController">

			<div ng-show="show">
				<table border="0" cellspacing="30" cellpadding="">
					<tr>
						<th>姓名</th>
						<th>性别</th>
						<th>国籍</th>
						<th>手机</th>
					</tr>
					<tr>
						<td>{{user.name}}</td>
						<td>{{user.sex}}</td>
						<td>{{user.country}}</td>
						<td>{{user.phone}}</td>
					</tr>
				</table>
			</div>
			<div ng-hide="show">
				<center>
					<p>{{status}}</p>
					<p>{{err}}</p>
				</center>
			</div>
		</div>
	</body>

</html>

6、创建数据源user.json

{"id":1,"name":"王富贵","sex":"男","country":"中国","phone":"13314098729"}

7、运行正确时的结果：

8、运行出错的结果：

《完》

ChengCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门

一、AngularJS基本指令AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。ng-app 指令ng-app 指令初始化一个 AngularJS 应用程序。ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。ng-init 指令ng-init 指令初始化应用程序数据。...
复制链接

扫一扫

专栏目录