elephant

赫本之后 再无女神

Angularjs浅尝1

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

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

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

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

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html ng-app="index">
  <head>
    <title>angularjs test</title>
    <script src = "/javascripts/angular-1.0.1.min.js"></script>
    <script src = "/javascripts/controller.js"></script>
  </head>
  <body ng-controller="IndexCtrl" >
    <ul>
      <li ng-repeat="contact in contacts">
        name:,age:,hometown:,
      </li>
    </ul>
    name:<input type="text" ng-model="new_contact.name" />
    age:<input type="text" ng-model ="new_contact.age" />
    hometown:<input type="text" ng-model = "new_contact.hometown" />
    <button ng-click="add_contact()">新增</button>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5
6

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 #更新

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