angularjs浅尝1

AngularJS是为了克服HTML在构建应用上的不足而设计的。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：

• 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
• 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

• 使用双大括号{{}}语法进行数据绑定；
• 使用DOM控制结构来实现迭代或者隐藏DOM片段；
• 支持表单和表单的验证；
• 能将逻辑代码关联到相关的DOM元素上；
• 能将HTML分组成可重用的组件。

Demo

  
    
        
    
  
  
    

      

        name:{{contact.name}},age:{{contact.age}},hometown:{{contact.hometown}},{{"sb"}}
      
    
    name:
    age:
    hometown:
    新增
  

angular.module('index',[]).controller('IndexCtrl',function($scope){
  $scope.contacts = [{
      name:'陈冠希,
      age:20,
      hometown:'hk
    },{
      name:'张柏芝,
      age:22,
      hometown:'hk'}];
  $scope.reset_contact = function(){
    $scope.new_contact = {
      name:'',
      age:'',
      hometown:''
    };};
  $scope.add_contact = function(){
    $scope.contacts.push($scope.new_contact);
    $scope.reset_contact();
  };});

ng-app表明angularjs将对其标签声明内的dom进行处理,index名字是作用域名，表明属于index作用域。angular.module('index',[]).controller表明在index作用域内定义controller，同理ng-controller表明其内的变量属于IndexCtrl。
ng-model声明此标检绑定在new_contact变量，angularjs控制其值随变量而改变。ng-click声明由add_contact处理点击。在li标签里面的ng-repeat="contact in contacts"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个li标签作为模板为列表中的每一个联系人创建一个li元素。由此当点击新增按钮时将输入框内所代表的model添加到contacts内，并将add_contact变量置空，而页面的显示由angularjs自动完成。
angularjs只对ng-app内的dom起作用，因此可以在任何页面使用angularjs而不破坏ng-app外的所有dom，js。
angularjs与restful后端交互非常方便，使用ngResource组件，声明好CRUD的路径、http veb，就可方便调用save,update与后端交互。
Demo

app=angular.module("index",["ngResource"])
app.factory "Contact",($resource) ->
$resource("/contacts/:id.json",{id:"@id"},{update:{method:"put"}})
$scope.contacts = Contact.query # /contacts
Contact.save $scope.new_contact #create
contact.$update #更新

转载请注明出处:http://me.angry-arthas.com/blog/2015/09/06/angularjsqian-chang-1/