初步认识Angulajs
Angulajs是一个MVC前段框架,项目中使用Angulajs必须按照框架的写法编写代码,可以统一代码规范易于后期代码的维护。
M Model 模型-数据,V View 视图-表现层 HTML/CSS,C Controller 控制器-业务逻辑,M和V耦合性高,C特别臃肿编写大段的代码
Angular的核心是数据,一切问题从数据本身考虑。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="img/angular.js" charset="UTF-8"></script>
</head>
<body>
<div ng-app="">
<input type="text" name="" value="" ng-model="a" >
<div class="" ng-bind="a"></div>
<select ng-model="a">
<option value="1">北京市</option>
<option value="2">洛阳市</option>
<option value="3">商丘市</option>
</section>
</div>
</body>
</html>
双向绑定 ng-model
数据变了<->视图变化(V <-> M)
自动同步数据和视图ng-model 双向绑定
ng-bind 输出数据
ng-app 被angularjs管理(将angularjs代码包在里面才管用)
angularjs的表达式 {{}}
ng-bind 和 {{}}一样也是用来绑定数据的,比ng-bind方便。
ng-init 用来初始化数据的
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<title></title>
<script src="img/angular.js" charset="utf-8"></script>
</head>
<body ng-init="a=0;b=0;">
<input type="text" ng-model="a">
<input type="text" ng-model="b">
<span>{{a*b}}</span>
</body>
</html>
Angularjs遍历数组和·json对象
数组:
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<title></title>
<script src="img/angular.js" charset="utf-8"></script>
</head>
<body ng-init="arr=[12,5,8,9,10,12,12]">
<ul>
<li ng-repeat="item in arr track by $index">{{item}}</li>
// <li ng-repeat="item in arr>{{item}}</li>
</ul> </html>
解决:track by $index 它是吧数组的下标当成key了解决了问题效率不好, 因为只要插入或者添加一个元素数组的下标就会改变。
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<title></title>
<script src="angular.js" charset="utf-8"></script>
</head>
<body ng-init="arr=[{user: '王五', age: 18}, {user: '张三', age: 23}, {user: '李四', age: 25}, {user: 'blue', age: 18}]">
<ul>
<li ng-repeat="json in arr">姓名:{{json.user}},年龄:{{json.age}}</li>
</ul>
</body>
</html>
json对象遍历不存在用ng-repeat的问题
json对象用ng-repeat遍历的方式
- <li ng-repeat="(k,v) in json">{{k}}, {{v}}</li> 取出key的值
- <li ng-repeat="val in arr">{{$index}}, {{val}}</li>
留言板实例
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<title></title>
<script src="img/angular.js" charset="utf-8"></script>
</head>
<body ng-init="arr=[{name: '咸鱼', content: '大家好啊'}, {name: '张三', content: '挺好呀'}]">
名字:<input type="text" name="" value="" ng-model="name"><br>
内容:<input type="text" name="" value="" ng-model="content"><br>
<input type="button" value="提交" ng-click="arr.unshift({name: name, content: content})">
<ul>
<li ng-repeat="json in arr">
<h4>{{json.name}}</h4>
<p>{{json.content}}</p>
</li>
</ul>
</body>
</html>
初步认识Angulajs的更多相关文章
- 移动端之Android开发的几种方式的初步体验
目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...
- CSharpGL(29)初步封装Texture和Framebuffer
+BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...
- Android自定义View初步
经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...
- 初步认识Node 之Node为何物
很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了. Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- 基于C/S架构的3D对战网络游戏C++框架_05搭建系统开发环境与Boost智能指针、内存池初步了解
本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...
- 基于ionic+angulajs的混合开发实现地铁APP
基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...
- Azure底层架构的初步分析
之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...
- CozyRSS开发记录14-RSS源管理初步完工
CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...
随机推荐
- Windows系统下MySQL数据库出现Access denied for user 'root'@'localhost' (using password:YES) 错误
Windows系统下MySQL数据库出现Access denied for user 'root'@'localhost' (using password:YES) 错误,(root密码错误) 处理方 ...
- DynArrayToVariant DynArrayFromVariant复制动态数
type intArr=array of Integer; procedure TfrmMainDA.Button2Click(Sender: TObject);var aa:intArr;bb:in ...
- Xshell存在后门
Xshell 它是一款终端模拟软件,由NetSarang公司出品,支持SSH1.SSH2和Windows系统中Telnet协议. 简介 卡巴斯基实验室在8月7日发现Xshell软件中的nssock2. ...
- Jenkins job 之间实现带参数触发
1 背景 开发打包的 jenkins job A 是在 local 的一台 windows 上,同时在这台 local 的 windows 上还有一 另一个 jenkins job B 是用来上传 j ...
- 使用copydata实现进程之间数据传递
Winform to Winfrom==> 发送端==> using System; using System.Runtime.InteropServices; namespace Cop ...
- 黄聪:清理微信浏览网站的缓存,Cookie
微信官方说明是取消关注,但是开发中发现取消关注缓存还是存在! 解决方法如下: 方法一: 用微信内置浏览器打开这个网页debugx5.qq.com ,就会有清除缓存的选项,如下图 方法二: 如果你用An ...
- sysroot和prefix
--with-sysroot用来指定系统的root.该选项主要用于新系统(比如LFS)构建或交叉编译.比如你的LFS的root在/mnt/lfs,那么configure时指定--with-sysroo ...
- Elasticsearch Internals: Networking Introduction An Overview of the Network Topology
This article introduces the networking part of Elasticsearch. We look at the network topology of an ...
- 【IIS错误】IIS各种错误
IIS简介 当用户试图通过HTTP或文件传输协议(FTP)访问一台正在运行Internet信息服务 (IIS)的服务器上的内容时,IIS返回一个表示该请求的状态的数字代码.该状态代码 记录在IIS日志 ...
- 数据库SQL语言学习--上机练习3(插入 更新 删除)
上机练习3 . 将一个新学生记录(学号::姓名:陈冬:性别:男:所在系:信息系:年龄:20岁)插入到Student表中: ALTER TABLE Student ,); UPDATE Student ...