19、AngularJs知识点总结 part-1
1、AngularJs
AngularJs是一款JavaScript开源库，由Google维护，用来协助单一页面应用程序；
AngularJs的目标是通过MVC模式增强基于浏览器的应用，使开发和测试变得更容易.
AngularJs主要考虑的是构建CRUD（create、retrieve、update、delete）应用，像游戏、图形界面编辑器这种DOM操作很频繁也很复杂的应用是不适合AngularJs来构建的，像这种情况用一些更轻量、简单的技术比如jQuery可能会更好
特点：
①数据双向绑定
Angular在呈现和数据中间，可以简单创建双向的数据绑定。
一旦创建双向绑定。
用户输入，会由Angular自动传到一个变量中，再自动读到所有绑到它的内容，更新它。效果上就是立即的数据同步。在代码中修改变量，也会直接反应到呈现的外观上。
不仅内容可以双向绑定，其他诸如类、宽度、高度等等，都可以和变量与用户的输入，绑定起来。
②依赖注入
③模块化
④语义化标签
优点是可以利用依赖注入和双向绑定，不需要写大量代码就能实现功能；可以不用操作DOM代码，改变数据模型即可
2、指令
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器,ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。ng-app 指令定义了 AngularJS 应用程序的 根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-model 指令把输入域的值绑定到应用程序变量 name。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName" 进行同步。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML
ng-init 指令初始化 AngularJS 应用程序变量,ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
<div class="container">
<div ng-app="" ng-init="scoreList=[23,33,12,45,61];
persons=[
{name:'zzl',nickname:'kunyashaw',age:28},
{name:'wss',nickname:'berryshine',age:25}
]">
<ol>
<li ng-repeat="person in persons">
{{'姓名:'+person.name + ','+'昵称为'+person.nickname}}
</li>
</ol>
</div>
</div>
自定义指令：
可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
你可以通过以下方式来调用指令：
- 元素名
- 属性
- 类名
- 注释
<body ng-app="myApp">
<kunya-shaw></kunya-shaw> <script>
var app=angular.module('myApp',[]);
app.directive("kunyaShaw",function(){
return{
template:"<h1>我的昵称是kunyaShaw </h1>"
}
}
);
</script> </body>
3、demos
3.1 实现在label显示输入框输入的东西
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body> </html> </div>
3.2 实现一个乘法计算器
<div>
<h1>Invoce:</h1>
<label>Quantity:</label>
<input type="text" ng-model="num" placeholder="Enter the num"> <label>Cost:</label>
<input type="text" ng-model="price" placeholder="Enter the price">
<hr>
<h1>Total:$ {{num*price}}!</h1>
</div>
3.3 获取初始化的值
<div class="container">
<div ng-app="" ng-init="Name='kunyashaw'">
<p>
姓名为:<span ng-bind="Name"></span>
</p>
</div>
</div>
3.4 controller
Html代码:
<div class="container">
<div ng-app="myApp" ng-controller="ctl">
名:<input type="text" ng-model="ming">
<br>
姓:<input type="text" ng-model="xing">
<br>
{{xing+ming}}
</div>
JS代码：
var app=angular.module('myApp',[]);
app.controller('ctl', function ($scope) {
$scope.xing='jiang ';
$scope.ming='meiqi';
})
4、AngularJs的表达式
AngularJs与JavaScript表达式的区别:
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器
<div class="container">
<!-- AngularJS表达式-->
<!--字符串-->
<div ng-app="" ng-init="fm='kunya';lm='shaw'">
<p>姓名为:{{fm +" "+ lm}}</p>
<b>姓名为:<span ng-bind="fm+' '+lm"></span></b>
</div>
<!-- 数字-->
<div ng-app="" ng-init="price=10;num=3">
<p> 相乘总价为:{{price*num}}</p>
<p> 相加总价为:<span ng-bind="price + num"></span></p>
</div>
<!--对象-->
<div ng-app="" ng-init="person={sex:'male',age:3}">
<p> 性别:{{person.sex}}</p>
<p> 年龄:<span ng-bind="person.age"></span></p>
</div>
<!-- 数组-->
<div ng-app="" ng-init="points=[1,2,34,555,119]">
<p>{{points[2]}} </p>
<p ng-bind="points[2]"></p>
</div>
</div>
5、验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合格的邮箱</span>
<h1>状态</h1>
{{myForm.myAddress.$valid+'(如果输入的值是合法的则为 true)'}}
{{myForm.myAddress.$dirty+'(如果值改变则为 true'}}
{{myForm.myAddress.$touched+'如果通过触屏点击则为 true'}}
</form>
6、作用域
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上
19、AngularJs知识点总结 part-1的更多相关文章
- Ionic/Angularjs 知识点解析
Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- python全栈开发 * 19 面向对象 知识点汇总 * 180701
19 面向对象初识2 一.类的名称空间1.对象的名称空间对象的名称空间中有类对象指针,对象可以通过"类对象指针"找类中的"静态变量"(静态字段),也可以用对象找 ...
- 21、AngularJs知识点总结 part-3
1.选择框select 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,也可以使用ng-repeat 指令来创建下拉列表: 区别:ng ...
- 20、AngularJs知识点总结 part-2
1.作用域 当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递: scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ...
- Part 19 AngularJS Services
What is a service in AngularJSBefore we talk about what a service is in Angular. Let's talk about a ...
- angularjs知识点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 20个angularjs开发工具
AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一.如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具…… 在Value ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第十三周
java学习第十三周 本周,进行了对前六章知识点的小测试,在测试中我也发现了许多自己学习上存在的隐患,对一些知识点理解的太过粗略,没有很好的去记忆那些重要的小细节,把注意力过多的放在了 ...
随机推荐
- 深入了解MongoDB
一.介绍: 数据库分为关系型数据库和非关系型数据库 关系型数据库是建立在关系模型上的数据库,主要的有Oracle MySQL Microsoft SQL Server NoSQL是非关系型数据存储的广 ...
- C4C和Outlook的集成
从C4C系统下载Outlook的Addin, 安装之后,会在Outlook里看见一个新的面板: 点击Log On登录: 如果需要的话,在Settings里设置proxy. 登录之后,即可立即在outl ...
- mysql全部基本数据类型
MySQL基本数据类型统计http://www.cnblogs.com/xuqiang/archive/2010/10/14/1953464.html 详细介绍http://www.cnblogs.c ...
- UVA 11983 Weird Advertisement
题意:求矩形覆盖k次以上的区域总面积. 因为k≤10,可以在线段树上维护覆盖次数为0,...,k, ≥k的长度数量. 然后就是一个离散化以后扫描线的问题了. 离散化用的是半开半闭区间,以方便表示没有被 ...
- 2017.9.15 HTML学习总结---表格table
2.7 表格<table>的属性: 属性 用途 width 表格宽度 height 表格高度 align 表格水平对齐 border ...
- python剑指offer最小的K个数
题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路: 使用快排中的partition思想. ①我们设定part ...
- ThinkPHP:create()方法有什么用呢？
1.create方法可以对POST提交的数据进行处理(通过表中的字段名称与表单提交的名称对应关系自动封装数据实例),例如user表中有一个字段名叫"username",如果表单中有 ...
- JavaScript的变量命名规则和关键字的介绍
变量的名字 就像 人的名字一样,不能乱起. 你的代码不是只有你一个人看,变量既然是名字,那就这个名字就要有特殊的意义: 举个栗子:翠花,我们能从这个名字中得到什么信息?(这个 ...
- 洛谷P1762 偶数(找规律)
题目描述 给定一个正整数n,请输出杨辉三角形前n行的偶数个数对1000003取模后的结果. 输入输出格式 输入格式: 一个数 输出格式: 结果 输入输出样例 输入样例#1: 复制 6 输出样例#1: ...
- MyEclipse的快捷键大全(超级实用，方便）
常用快捷键 1. [ALT+/] 能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2. [Ctrl+O] 显示类 ...