AngularJS入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/siqinzgx/article/details/68944323

HTML适合声明静态的文档，对于构建动态WEB无能为力。AngularJS是为了扩展HTML的功能而设计的。

通常我们通过以下手段来解决动态应用和静态文档之间不匹配的问题：

1、类库：一些在开发WEB应用时非常有用的函数的集合。你的代码起主导作用，并且决定何时调用类库的方法，如jQuery

2、框架：框架起主导作用，你的代码填充一些具体信息，框架决定何时调用你的代码

AngularJS另辟蹊径，它尝试扩展HTML的结构来弥补以文档为中心的HTML与实际应用之间的鸿沟。AngularJS通过指令directive扩展HTML的语法，通过表达式将数据绑定到HTML

Angular具有更高的抽象层次，一定程度上牺牲了灵活性。适合CRUD应用，而对于游戏、图形编辑器等复杂的DOM操作应用更适合采用抽象层次更低的jQuery

基本指令

ng-app指令定义一个AngularJS应用程序的根元素，在网页加载完以后会自动引导、初始化应用程序

ng-model指令将元素值绑定到应用程序，

<div ng-app="">
	name:<input type="text" ng-model="name">
	<br>
	{{name}}
</div>

网页加载完以后，AngularJS自动启动，

ng-app告诉AngularJS，<div>是AngularJS应用程序的所有者

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

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

<div ng-app="" ng-init="name='123'">
	name:<input type="text" ng-model="name">
	<br>
	{{name}}
</div>

ng-init初始化Angular应用程序变量，一开始输入框内有123，但是一般不使用ng-init，而使用一个控制器或模块来代替

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

{{}}的作用和ng-bind的作用类似，不过ng-bind不能脱离html标签单独存在

<divng-app=""ng-init="quantity=1;cost=5">

<spanng-bind="quantity * cost"></span> = {{ quantity * cost }}

{{}}里是AngularJS表达式，将数据绑定到HTML，在表达式的位置输出数据，表达式可以包含文字、运算符和变量。

ng-repeat指令列出循环元素：

<div ng-app="" ng-init="names=[1,2,3,4]">
	<div ng-repeat="x in names">{{x}}</div>
</div>

这里可用于数据库的展示操作

自定义指令

directive 函数来添加自定义的指令

<runoob-directive></runoob-directive>	元素名调用

<div class="runoob-directive"></div>	类名调用
<div runoob-directive></div>	属性调用
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</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 的情况下显示

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

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

Scope 可应用在视图和控制器上。

<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 对象时，视图 (HTML) 可以获取了这些属性。

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

AngularJS的MVC：

Model模型：视图中可用的数据（Scope是模型）

View视图：HTML

Controller控制器：JS函数，用于添加、修改属性

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

用一个controller对数据进行初始化

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
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 中使用。

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

服务Service：

服务是一个函数或对象，可以在AngularJS应用中使用，内建有30多个服务，比如$location

<script>
	var app=angular.module('myApp',[]);
	app.controller("con",function($scope,$location){
		$scope.myUrl=$location.absUrl();
	});
</script>

$location作为一个参数传入controller

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

$timeout服务

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

第一个完整应用：

<html>
	<head>
		<meta charset="utf-8">
		<script src="angular.min.js"></script>
	</head>
	<body ng-app="myNoteApp" ng-controller="myNoteCtrl">
		<h2>我的笔记</h2>
		<textarea ng-model="message" cols="40" rows="10"></textarea>
		<p>
			<button ng-click="save()">Save</button>
			<button ng-click="clear()">Clear</button>
		</p>
		<p>剩余次数:<span ng-bind="left()"></span></p>
		<script src="myNoteApp.js"></script>
		<script src="myNoteCtrl.js"></script>
	</body>
</html>

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

app.controller("myNoteCtrl",function($scope){
	$scope.message="";
	$scope.left=function(){return 100-$scope.message.length;};
	$scope.clear=function(){$scope.message="";};
	$scope.save=function(){alert("save!");};
});