[angularjs] angularjs系列笔记(一)简介
Angularjs通过新的属性和表达式扩展了html
Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications)
Angularjs通过指令扩展了html,通过表达式绑定数据到html
ng-app指令定义Angularjs的应用程序
ng-model指令绑定元素值到应用程序
ng-bind指令把应用程序数据绑定到html视图
<div ng-app="">
<input type="text" ng-model="name">
<p ng-bind="name"></p>
</div>
AngularJs的指令是以ng作为前缀的html属性
ng-init指令初始化AngularJs应用程序的变量
AngularJs的表达式写在双大括号内:{{表达式}}
AngularJs的表达式把数据绑定到html,这与ng-bind指令有异曲同工之妙
AngularJs将在表达式输出的定义的位置输出数据
<div ng-app="" ng-init="myName='taoshihan'">
<input type="text" ng-model="name">
<p ng-bind="name"></p>
<p ng-bind="myName"></p>
<p>{{5+5}}</p>
</div>
AngularJs模块(Module)定义了AngularJs应用
AngularJs控制器(Controller)用于控制AngularJs应用
ng-app指令定义了应用,ng-controller指令定义了控制器
<body>
<div ng-app="Home" ng-controller="index">
<p>{{myName}}</p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
//实例化应用对象,参数:模块名,空数组
var app=angular.module("Home",[]);
//调用应用对象的controller()方法,参数:控制器名,回调函数
app.controller("index",function($scope){
$scope.myName="taoshihan";
})
</script>
[angularjs] angularjs系列笔记(一)简介的更多相关文章
- angularjs自动化测试系列之jasmine
angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...
- angularjs自动化测试系列之karma
angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- Vim 系列笔记一
Vim 系列笔记一 Vim 简介 什么是VIM ? Vim 是从 Vi 发展出来的一个编辑器,是 Vi 的升级版.而 vi 则是 Unix .类Unix(Linux)系统中自带的编辑器. Vim/Vi ...
随机推荐
- gii配置
下载完成后不要设置urlManager http://zjm.testyii.com/index.php?r=gii 即可进入gii页面 或者是 将'urlManager'=> [ 'enabl ...
- 安装kylin的艰难历程
前言:暑假里老师布置的任务没有完成,来到学校后马不停蹄的安装kylin,结果一路艰难险阻,搞了快两个星期都没有弄好....现在止步于hive阶段卡死...仅将之前的步骤记录下来以便重新安装时更加顺利. ...
- HashMap内部结构及实现原理
简单介绍 在研究HashMap之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 数组:采用一段连续的存储单元来存储数据.对于指定下标的查找,时间复杂度为O(1):通过给定值进行查找,需 ...
- [转]linux VLAN配置(vconfig)
1.安装vlan(vconfig)和加载8021q模块 #aptitude install vlan #modprobe 8021q 2.使用linux vconfig命令配置vlan #vconfi ...
- Nginx+tomcat集群使用redis共享session
一 :nginx负载均衡 当Tomcat当做独立的Servlet容器来运行时,可看做是能运行Java Servlet的独立Web服务器. 此外 Tomcat还可以作为其他Web服务器进程内或者进程外的 ...
- 多条SQL语句对查询结果集的垂直合并,以及表设计时如何冗余字段
需求引入 你有一个销售单表A 和一个销售单详情表B 和一个收付款记录表C A---->B 一对多 A---->C一对多 如果一个销售单有两个详情,三条收款记录 对一个销售单 我们想查询 ...
- a标签一个有利于SEO的属性rel="nofollow"
最近想了解学些一下SEO,然后看了一些基础的视频,视频里提到了a标签的rel="nofollow"属性. 说来惭愧,第一次看到这个属性,都不知道这个属性是干嘛的 nofollow是 ...
- 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org
RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...
- JavaScript之Promise学习笔记
一直想知道Promise到底是怎么实现的,网上一搜几十篇文章,看的一脸蒙蔽.最后算是找到几个讲的真心很详细明了的.看了一份源码看了很久很久……最后找大佬问了几处看不懂的地方,大佬只看了十几分钟就看懂了 ...
- ionic2 基于ngx-translate实现多语言切换,翻译
介绍 ngx-translate 是Angular 2+的国际化(i18n)库,在github的地址是箭头 https://github.com/ngx-translate/core 将ngx-tra ...