[AngularJS] 入门
什么是AngularJS
AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，
- 其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
- 通过表达式绑定数据到 HTML
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。
AngularJS指令
AngularJS可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。 通过 ng-directives 扩展了 HTML 属性，带有前缀 ng-。主要的有：
- ng-app 指令定义一个 AngularJS 应用程序。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令把应用程序数据绑定到 HTML 视图。与表达式{{ expression}}有相同的效果
AngularJS表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。
简单AngularJS示例
<!DOCTYPE html>
<html>
<body> <div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div> <script src="//www.w3c/try/angularjs/1.2.5/angular.min.js"></script> </body>
</html>
AngularJS控制器
AngularJS 控制器控制 AngularJS 应用程序的数据，是常规的 JavaScript 对象。
- ng-controller 指令用来生成应用程序控制器，并且同时创建了一个新的作用域关联到相应的DOM元素上。
- 控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
- 控制器的 $scope 是把一个DOM元素连结到控制器上的JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
控制器不仅声明属性，也有方法
<div ng-app="" ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click="sayHello()">打招呼</button>
<hr>
{{greeting}}
</div> <script>
function MyController($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting= 'Hello ' + $scope.username + '!';
};
}
</script>
参考
- 汇智网 3w.hubwiz.com/course/?type=database
[AngularJS] 入门的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- （一）Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
随机推荐
- lua中的table、stack和registery
ok,前面准备给一个dll写wrapper,写了篇日志,看似写的比较明白了,但是其实有很多米有弄明白的.比如PIL中使用的element,key,tname,field这些,还是比较容易混淆的.今天正 ...
- iptables实现正向代理
拓扑图 实现目标 内网用户通过Firewall服务器(iptables实现)访问外网http服务 配置 #iptables iptables -t nat -A POSTROUTING -i eth0 ...
- django入门记录 2
1. 创建一个app, python manage.py startapp appname 2. 设计model,在appname/目录下编辑好model 3. 检测model的修改,python ...
- Alpha版本十天冲刺——Day 7
站立式会议 祝曹鑫杰和常松童鞋生日快乐!短短几天冲刺,就迎来了三位队员的生日,希望也给我们的Alpha版本带来好运,加油! 会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 上传图片接口 无 ...
- React Native 开发之 (07) 常用组件-View
掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的 ...
- React Native 开发之 (05) flexbox布局
一 flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...
- eclipse配置gradle
1.Grandle官网下载Gradle 2.解压文件,配置到环境变量 3.测试安装成功,$ gradle -v 4.打开eclipse,Help-->Install new software,输 ...
- java编程思想-接口总结
"确定接口是理想选择,因而应该总是选择接口而不是具体的类."这其实是一种诱饵.当然,对于创建类,几乎在任何时刻,都可以替代为创建一个接口和一个工厂. 许多人都掉进了这种诱惑的陷阱, ...
- Yocto开发笔记之《Makefile编写》（QQ交流群：519230208）
开了一个交流群,欢迎爱好者和开发者一起交流,转载请注明出处. QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...
- IOS OC 计算器算法(不考虑优先级)
个人见解:为还在计算器算法方面迷惑的同学一个数据处理解决方案:定义一个可变数组array,一个可变字符串str,使字符通过[array addObject:str];方法添加到可变数组,每当触发运算符 ...