Angularjs 初识

2013/10/21 2358点热度 0人点赞 0条评论

AngularJS简介

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

  通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:

    类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

    框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

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

    1)使用双大括号{{}}语法进行数据绑定;

    2)使用DOM控制结构来实现迭代或者隐藏DOM片段;

    3)支持表单和表单的验证;

    4)能将逻辑代码关联到相关的DOM元素上;

    5)能将HTML分组成可重用的组件。

以上摘自百度百科。

了解了下AngularJS对IE8+,google,firefox等浏览器支持的比较好,对IE8需要引入专门的包去解决。

AngularJS版Hello World!

<!doctype html>
<html ng-app>
<!--  ng-app标记告诉AngularJs处理整个HTML页并引导应用
      并且标记了AngularJs脚本的作用域,是这个html
      可以将ng-app添加到任何标签上,作用域就是该标签之间运行
-->
  <head>
    <meta charset="UTF-8"/>
    <title>AngularJs 版 HelloWord</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  </head>
  <body>
     Hello{{'World'}}!<br/>
     以上World的作为一个常量值来显示
     <input type="text" ng-model="yxkong" placeholder="yxkong"></br>
     <!--
        ng-model="yxkong" 绑定一个叫yxkong的模型变量上
        placeholder="World"  文本框显示默认值
        {{}}标记将模型变量添加到目的地  
           || 相当于判断语句,或者说是默认值,如果{{}}绑定的变量没有值的话,目标地默认显示||后面的值yxk,如:刚开始显示 Hello 鱼翔空!
        在输入的时候输入框的任何更改会立即反映到模型变量上
        模型变量上的任何更改都会立即反映到目的地上
     -->
     Hello {{yxkong||'鱼翔空'}}!<br> 
  </body>
</html>

ng案例

演示效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
  <head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
    <script src="http://yxkong.com/demo/myController.js"></script>
  </head>
  <body ng-controller="BookController">
    我有{{bookList.length}}本书<input type="search" ng-model='s' placeholder="要找的关键词"/>
    <ul ng-repeat="book in bookList | filter:s">
       <li >
       <!--
          ngRepeat 指令 是一个迭代指令  类似于foreach 和struts2中的迭代器差不多
           每次从集合中拿到一个item实例,在各自的作用域中,每个实例都有一个独立的内存空间
             $index 是索引

          filter 过滤器 s 是ng-model定义的filter模型,使用filter必须使用type="search"的文本框
           
       -->
          [{{$index+1}}]  {{book.name}} {{book.price}} {{book.desc}} {{book}}
       </li>
    </ul>
    <table>
       <tr><th>行</th></tr>
       <tr ng-repeat="i in [0,1,3,4,5,6,7,8]"><td>{{$i+i}}</td></tr>
    </table>
  </body>
</html>

myController.js

BookController=function($scope){
  $scope.bookList=[{"name":"深入浅出Ext Js ","price":"44元","desc":"一本介绍ExtJs的书"},
      {"name":"数据结构与算法分析","desc":"买来就没怎么看过,感觉好深奥","price":"55元"},
      {"name":"mongoDB 权威指南","desc":"觉的要学下nosql数据库了,就买来了","price":"22元"},
      {"name":"深入学习mongoDB","desc":"和mongoDb配套买的","price":"21元"},
      {"name":"spring 技术内幕","desc":"这个也没怎么看过,没有达到预期值","price":"50元"}];
  $scope.s="mongo";//给search文本框的模型赋初始值
}

yxkong

这个人很懒,什么都没留下

文章评论