其实，就是angular通过ng-model为我们绑定了一个keydown事件，它会通过$watch 指令监视变量name值变化
控制器
主要工作，就是把模型和回调方法发送到视图，因此
1：控制器不要包含任何渲染代码(dom引用或片段)
2：视图不要包含任何行为
3、由于视图和控制器没有任何关系，所以一个视图可以对应多个控制器
<!DOCTYPE html><html ng-app="app"><head > <meta charset="UTF-8"> <title></title> <script src="lib/angular.js"></script></head><body > <div ng-controller="myCtrl">hello {{name}}<button ng-click="click()">Click</button> </div></body></html><script>var appModule = angular.module("app",[]);appModule.controller("myCtrl",function($scope){$scope.click=function(){$scope.name="ok";}$scope.name="world";});</script>
默认初始显示：hello world 点击“click”按钮后变成 hello ok
稍后，会介绍模块
filters 过滤器
主要用在数据需要格式化为本地格式的时候,实现了“|”管道语法
<div ng-init="list=['chrome','firefox','ie']">number formatting {{123112|number}}
array filtering <input ng-model="predicate"/>{{list|filter:predicate}}</div>
[图片上传中。。。（1）]
number：数字格式化计算分数，默认3AngularJS的主要组成部分：
启动(startup) – 展示“ hello world!”
执行期(runtime) – AngularJS 执行期概览
作用域(scope) – 视图和控制器的集合区
控制器(controller) – 应用的行为
模型(model) – 应用的数据
视图(view) – 用户能看到的
指令(directives) – 扩展HTML语法
过滤器(filters) – 数据本地化
注入器(injector) – 聚合你的应用
模块(module) – 配置注入器
$ – AngularJS的命名空间(namespace)
首先，伟大的“hello world”开始
<!DOCTYPE html>
<html ng-app>
<head >
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.js"></script>
</head>
<body >
<p ng-init="name='World'">Hello {{name}}!</p>
</body>
</html>
运行效果：Hello World!
注意：ng-app 一定不要放在head标签上，否则没有效果不会执行
用户输入绑定到视图上
<!DOCTYPE html>
<html ng-app>
<head >
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.js"></script>
</head>
<body >
<input type="text" ng-model="name"/>
<p>{{name}}</p>
</body>
</html>
网友评论