MVC是一种软件架构设计模式，它将表现从用户交互中分离出来。通常来讲，模型中包含应用的数据和与数据进行交互的方法，视图将数据呈献给用户，而控制器则是二者之间的桥梁。这种表现分离能将应用中的对象很好地隔离开来， 因此视图不需要知道如何保存对象，只要知道如何显示它即可。这也意味着数据模型不需要同视图进行交互，只需要包含数据和操作视图的方法。控制器用来存放将二者绑定在一起的业务逻辑。
- angular数据绑定
Hello {{ name }}
觉得神奇的地方就是，数据可以自动更新，且同步到js对象
数据模型对象（model object）是指 $scope 对象。 $scope 对象是一个简单的
JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。ng-controller 声明所有被它包含的元素都属于某个控制器
直接定义控制器函数不生效。模块声明
在angular1.3以后，要声明模块，控制器绑在模块上。[]里面是依赖列表，也就是可以被注入到模块中的对象列表
angular.module('app', []).controller("MyController", MyController)
出现了类似 Argument 'MyController' is not a function, got undefined 问题
1.ng-app=“app”没有写在html上
2.controller没有注册到app上将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中,这是非常完美的架构
AngularJS不会对不包含AngularJS特殊声明的元素进行任何处理。
-
$scope对象的生命周期处理有四个不同阶段
- 创建
- 链接
- 更新
- 销毁
将控制器命名为 [Name]Controller 而不是 [Name]Ctrl 是一个最佳实践
制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作
除了孤立作用域 （在指令内部创建的作用域被称作孤立作用域）外，所有的作用域都通过原型继承而来
设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式：
表达式
用 {{ }} 符号将一个变量绑定到 $scope 上的写法本质上是一个表达式： {{ expression }}$parse 这个内部服务用来进行表达式的运算
$interpolate 服务是一个可以接受三个参数的函数，其中第一个参数是必需的。(api文档http://docs.angularjs.cn/api/ng/service/$interpolate)
text （字符串） ：一个包含字符插值标记的字符串。
mustHaveExpression （布尔型） ：如果将这个参数设为 true ，当传入的字符串中不含有表达式时会返回 null 。
trustedContext （字符串） ：AngularJS会对已经进行过字符插值操作的字符串通过$sec.getTrusted() 方法进行严格的上下文转义。
演示
http://jsbin.com/oDeFuCAW/1/edit?html,js,output
$interpolate将textarea的{{to}}转换为input框的输入值，并在previewText预览。
设置监听（$watch）emailBody后，previewText实时更新其内容。
问题
1.不给$scope.to赋值，直接输入为什么不能实时更新在previewText中
2.为什么textarea值会在previewText中预览
- startSymbol() endSymbol() 接受一个参数 value //符号的值
修改表达式的格式
http://jsbin.com/ivuJEXI/1/edit
- 过滤器
html内使用方法
{{ 表达式| 过滤器}}
例
{{ 123.456789 | number:2 }}
js内使用方法
例
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);
附：过滤器的多种使用方式
http://www.cnblogs.com/lvdabao/p/3475426.html
- isCapitalized 函数的功能是根据首字母是否为大写返回 true 或 false
- 自定义过滤器
- 表单验证
首先保证表单（form）有一个name 属性 - 想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加 novalidate 标记
- 在input上使用的表单验证
- 在表单上控制变量，格式
$scope.formName.inputFieldName.property - 未修改的表单
这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为 true如果修改过值为 false
formName.inputFieldName.$pristine - 修改过的表单只要用户修改过表单，无论输入是否通过验证，该值都返回 true
formName.inputFieldName.$dirty - 合法的表单
这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的值就是 true ：
formName.inputFieldName.$valid - 不合法的表单
formName.inputFieldName.$invalid - 错误
这是一个非常有用的属性： $error 对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。用下面的语法访问这个属性：
formName.inputfieldName.$error - 在失焦后验证
.directive('ngFocus', [function() {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focusd = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {
ctrl.$focused = true;
});
})
element.bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {
ctrl.$focused = false;
})
})
}
}
}])
- 1.3引入了ngMessages，简化了表单验证
- $bower install -save angular-messages
2.引入主html文件中
3.作为应用模块的依赖模块引入
angular.module('模块名'，['ng-Messages'])
- $bower install -save angular-messages
- 指令
指令模板
moduleName.directive('directiveName',function(){
return{
restrict:'';//EACM 指定什么方式调用指令 使用属性方式最好，兼容性
template:'';//自定义标签
replace：''//移开自定义标签
}
})
指令名字是驼峰风格myDirective的，在html里面使用my-directive
- scope 指令内部新的子作用域 不能直接在作用域里赋值
scope:{
some-property:'needs to be set'
}```
-
在指令scope内部和另一个指令进行绑定的数据，无法双向绑定。
* templateUrl 引入一个html外部模板
>本地开发的时候，要运行一个本地服务器，用以文件系统加载html模板。否则会导致cors[通信技术](http://baike.baidu.com/item/CORS/16411212#viewPageContent)错误
指令内部
template:'
'//此时的input框输入，some-attr的表达式myurl不会同步，a的myurl可以同步
内置指令ng-model在它自身内部的隔离作用域和dom的作用域之间创建了一个双向数据绑定
* [代码演示]("http://jsbin.com/IteNita/1/edit?html,output")
theirurl 通过some-attr和指令内部scope的myurl绑定
* 内部指令
布尔属性
* ng-disabled