最近比较流行MVC前端框架开发，最近研究了一个框架AngularJS框架

不说那么多，先上例子，我是个代码控

	
     		
     	
     			
     
		
      
{
    {todo.user}}'s To Do List			{
    {todo.items.length}}		
	
     
	
     
		
      
			
       			
       				Add					
      
		
      
			       
				        
					         
Description
					         
Done
					         
 
				        
			       
			       
				        
					         
{
    {item.action}}
					         
					         
{
    {item.done}}
				        
			       
		      
	
     

　看到几个比较特殊的点

  1.html标签中多一个ng-app="myApp"

  2.body标签中多一个ng-controller="MyCtrl"

  3.tr标签中多了ng-repeat="item in todo.items"

  4.{

{}}是取值表达式

  5.script里面多了一些angular.module 以及myApp.controller等方法

 

1.根据AngularJS的解释是,一个文档中只有一个ng-app的属性，可以说是文档的唯一标识，当angular发现这个标识的时候，下面的文档树都要经过angular编译

2.ng-controller的指令就是作为前端处理业务的controller层

3.作为一个前端或者后端，看到这个就会想到是一个for遍历集合

4.不用说了，就是取元素的值

5.这个两个方法数据绑定和处理的业务逻辑。

 

这里还提一点，$scope是一个全局变量，还有就是数据双向绑定，里面用到了一个ng-model指令，这个自己也在学习中，希望以后学习中能够知道他们的原理。

下面可以看到$scope是全局，在对象上增加一个方法，可以在html元素上 直接使用这个方法,看标题栏，还有几个事情没有做的计数

	
     		
     	
     			
     
		
      
{
    {todo.user}}'s To Do List			{
    {incompleteCount()}}		
	
     
	
     
		
      
			
       			
       				Add					
      
		
      
			       
				        
					         
Description
					         
Done
					         
 
				        
			       
			       
				        
					         
{
    {item.action}}
					         
					         
{
    {item.done}}
				        
			       
		      
	
     

 

自定义过滤器和发送ajax请求,写了一下代码，感觉使用挺简单，过滤器接受一个参数，list是angularJS提供的集合数据

	
     		
     	
     			
     
		
      
{
    {todo.user}}'s To Do List			{
    {incompleteCount()}}		
	
     
	
     
		
      
			
       			
       				Add					
      
		
      
			       
				        
					         
Description
					         
Done
					         
 
				        
			       
			       
				        				        				        				        
					         
{
    {item.action}}
					         
					         
{
    {item.done}}
				        
			       
		      
		
      
       Show Complete
      
	
     

 

 

 

再来一个好玩一点的，就是点击按钮可以天添加数据到列表中

	
     		
     	
     			
     
		
      
{
    {todo.user}}'s To Do List			{
    {incompleteCount()}}		
	
     
	
     
		
      
			
       			
       				Add					
      
		
      
			       
				        
					         
Description
					         
Done
					         
 
				        
			       
			       
				        
					         
{
    {item.action}}
					         
					         
{
    {item.done}}
				        
			       
		      
		
      
       Show Complete