angular(一)核心概念

其实,就是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>

推荐阅读更多精彩内容