一.表达式和语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app>
<!-- ng-app指令： 表示告诉angular它管理当前标签所包含的整个区域，并且会自动创建$rootScope跟作用域对象-->
<!-- ng-model:表示当前输入框的值与谁关联（属性名：属性值） ，username表示属性名，{{username表示属性值}}他是表达式，获取属性值-->
<input type="text" ng-model="username">
<p>您输入的内容是：<span>{{username}}</span></p>
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>
双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app ng-init="username='tom'">
<!-- ng-init:用来初始化当前作用域变量 -->
<!-- ng-model双向数据绑定 -->
<input type="text" ng-model="username">
<p>姓名1：<span>{{username}}</span></p><br/>
<input type="text" ng-model="username">
<p>姓名2:<span>{{username}}</span></p>
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>
作用域对象和控制器对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app>
<!-- 控制器对象
用来控制Angular应用数据的实例对象
ng-controller：用来指定控制器构造函数，Angular会自动new此函数创建控制器对象
同时还会创建一个新的作用域对象$scope,他是$rootScope的子对象
在控制器函数中声明$scope形参，Angular会自动将$scope传入
-->
<div ng-controller="MyController">
<input type="text" placeholder="姓" ng-model="firstname">
<input type="text" placeholder="名" ng-model="lastname">
<p>输入的姓名为：{{firstname + '-' + lastname}}</p>
<p>输入的姓名2为：{{getName()}}</p>
</div>
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
<script>
function MyController($scope){
console.log($scope);
$scope.firstname = 'kobe';
$scope.lastname = "tom";
$scope.getName = function(){
return $scope.firstname + '' + $scope.lastname;
}
}
</script>
</body>
</html>
