首页 > 其他分享 >Angularjs 初识

Angularjs 初识

时间:2023-03-01 12:32:54浏览次数:74  
标签:类库 name Angularjs price 初识 AngularJS World desc


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


标签:类库,name,Angularjs,price,初识,AngularJS,World,desc
From: https://blog.51cto.com/yxkong/6093426

相关文章

  • AngularJs简单使用
    官方的中文文档地址https://angular.cn/start<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>angular测试</title></head>......
  • BIOS初识
    就像人的肉体和思想的关系一样,计算机硬件是软件的躯体,软件是硬件的灵魂。没有硬件,软件无从谈起;没有软件,硬件就是一堆垃圾,毫无用处。众所周知,操作系统是系统软件,对硬件的......
  • UEFI初识
    概念UEFI(UnifiedExtensibleFirmwareInterface),统一可扩展固件接口,是一种个人电脑系统规格,用来定义操作系统与系统固件之间的软件界面,作为BIOS的替代方案。可扩展固件接......
  • webgl 系列 —— 初识 WebGL
    初识WebGL什么是WebGLwebgl在支持canvas的浏览器中进行2d或3d渲染。webgl程序除了有Html、javascript,还需要加入着色器语言(GLSLES)。WebGL使得网页在支持......
  • 1.【go-kit教程】go-kit初识
    go-kit简介go-kit本身不是一个框架,而是一套微服务工具集,是框架的底层,可以用go-kit做适应自己平台的框架。它的设计目标是帮助开发者构建健壮、可维护、可测试的分布式......
  • 【学无止境】初识 ChatGPT
    最近ChatGPT很火,那么今天就来试一下。ChatGPI注册首先,用梯子“合理上网”。墙内ChatGPT不提供服务。其次,租一个可以接受国外短信的号码,常用的网站是这个:https://sms-......
  • jmeter运行环境及界面初识
    1、安装jdk2、下载jmeter并启动jmeter.bat3、工具本身日志,java代码日志  4、添加线程组:线程数、循环次数5、取样器:不同协议不同取样器http、soap、jdbc、websocket......
  • Pytest初识
    一、单元测试框架简介1.什么是单元测试单元测试是指在软件开发过程中,针对软件的最小单位(函数,方法)进行正确性的检查测试。2.常用单元测试框架2.1Java类别junit......
  • <<运维监控系统实战笔记>> 小记随笔 —— Prometheus 初识
    Prometheus简介Prometheusserver包含时序库、告警引擎、数据展示三大块,体系中最核心的组件Exporters采集数据的客户端,负载采集数据存在内存中,提供http接口,让......
  • JAVAWEB-NOTE01-初识mysql
    目录JAVAWEB介绍数据库相关概念数据库数据库管理系统SQL常见的关系型数据库管理系统MySQL数据库安装配置登录、退出卸载数据模型JAVAWEB介绍数据库相关概念数据库数......