Angularjs 初识

最新推荐文章于 2024-11-09 21:24:41 发布

5ycode

最新推荐文章于 2024-11-09 21:24:41 发布

阅读量84

点赞数

文章标签： html java javascript web vue

本文链接：https://blog.csdn.net/f80407515/article/details/107654882

版权

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文本框的模型赋初始值
}