JavaScript 框架------------AngularJS（上）
一、简单了解一下AngularJS
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="Js/angular.js" type="text/javascript" charset="utf-8"></script>
二、AngularJS中的一些指令
1、指令与表达式
（1）原生JS绑定input与div
html部分
<input type="text" name="" id="input" value="" />
<div id="div"></div>
script部分
<script type="text/javascript">
var inputs = document.getElementById("input")
var div = document.getElementById("div")
input.onchange = function(){
div.innerHTML = inputs.value;
}
</script>
（2）AngularJS绑定input与div
<input type="text" ng-model="name"/>
<div ng-bind="name"></div>
<div >{{name + "123"}}</div>
（3）表达式
AngularJS 用双大括号绑定表达式：{{ expression }}。
用于将表达式的内容输出到页面中
表达式可以是文字，运算符，变量等，也可以在表达式中进行运算输出结果
<p>{{ 5+5 +"Angular"}}</p>
如果Angular.Js文件放在页面的下方，在页面刷新的瞬间会看到{{}}表达式的原样。所以可以使用ng-bind指令代替表达式
<p ng-bind="5+5 +'Angular‘"></p>
2、ng-app
声明AngularJS所管辖的区域，一般写在body或者html标签上，原则上一个页面上只能有一个。
<body ng-app=""></body>
3、ng-model
指令把元素值（比如输入域的值）绑定到应用程序。
<input type="text" ng-model="name"/>
4、 ng-bind
把应用程序变量中的值，输出到页面HTML视图中。可以与表达式{{}}互相替换。
<div ng-bind="name"></div>
5、 ng-init
初始化AngularJS应用中的变量值
<body ng-app="" ng-init="name='jredu'">
应用程序初始化时，name变量就赋有初值
6、MVC三层架构
（1）model（模型层）：应用程序中，应用处理数据的部分。（包括将数据保存或修改到数据库、变量、文件中 ）。
在AngularJS中，Model特指的是：应用程序中的各种数据。
View（视图层）：用户可以看到的用户显示数据的页面
Controller（控制器）：控制器是链接View与Model的桥梁。负责从View读取数据，接受用户的操作输入；并将数据发送给Model层。Model层对数据处理完毕之后，将结果返回给Controller，Controller再将结果返回给View显示
↗ ↘用户 Model（处理数据）
↖ ↙View ← （数据） ← Controller ← （数据）
创建一个AngularJS的模块，即ng-app=""所需要绑定的部分
①模块名称，即ng-app双引号中需要绑定的名字。<body ng-app="myApp">
②数组：表示需要注入的模块名称，不需要注入其他模块可用空数组代替
>>>Angular将常用的功能封装到angular.js中，创建主模块是直接可以使用，无需注入
>>>而一些应用较少的功能，需要导入对用的Js文件，并且在[]中注入进这个模块，才能够使用
这是AngularJS中的【模块化开发】与【依赖注入】！
在AngularJS的模块上，创建一个控制器，需要传递两个参数
①控制器名称，即ng-controller需要绑定的 名称
<div ng-controller="myCtrl">
②控制器的构造函数，构造函数可以传入多个参数
>>>如果要在函数中使用系统的内置对象，贼必须通过函数的参数传入，否则不能使用
>>AngularJS中的内置对象，都用$开头，例如$scope,$rootScope
7、AngularJS的作用域
①$scope： 局部作用域，声明在$scope上的属性和方法。只能在当前Controller使用
②$rootScope：根作用域。声明在$rootScope上的属性和方法，可以在整个ng-app所包含的范围使用
>>>如果没有$scope声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
a、如果使用ng-model写在某个Controller中，则这个变量会默认绑定到当前Controller的$scope上；
b、如果使用ng-model没有写在任何一个某个Controller中，则这个变量会默认绑定到$rootScope上；
>>>AngularJS中的父子作用域
a、ANgularJS中，子作用域 只能访问父作用域中的变量，而不能修改父作用域的变量
b、为了解决上述问题可以将父作用域中的变量声明为引用数据类型，例如对象等，这样可以在子作用域中，直接修改对象的属性，而不需要修改对象本身保存的地址
这是HTML部分
<div ng-controller="myCtrl1">
<div ng-bind="name +'————myCtrl的name'"></div>
<div ng-bind="age +'————myCtrl的age'"></div> <input type="text" ng-model="text"/>
<input type="text" ng-model="obj.text"/>
<mark ng-bind="text+'————myctrl的text'"></mark>
</div> <div ng-bind="name + '这是myctrl外的div'"></div>
<mark ng-bind="text+'————全局的text'"></mark>
<mark ng-bind="obj.text+'————全局的的text'"></mark>
这是AngularJS
var app = angular.module("myApp",[]);
app.controller("myCtrl1",function($rootScope){
$rootScope.text = "aa";
$rootScope.obj ={
text:'bb',
}
});
第一input之后跟myctrl时时改变，全局的两个都不会跟着改变
第二input之后跟第二个全局的text时时改变，第一个全局的text不会跟着改变，myctrl也不会跟着改变
8、AngularJS中的过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
>>>系统内置的过滤器，
currency 将数字格式化给货币格式
<p>{{123456|currency}}</p>
lowercase 格式化字符串为小写。
<p>{{"aBcDeF"|lowercase}}</p>
uppercase 格式化字符串为大写。
<p>{{"aBcDeF"|uppercase}}</p>
orderBy 根据某个表达式排列数组。
html部分的代码
<table border="1" width="400px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr ng-repeat="item in classes | orderBy : 'score' ">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.score}}</td>
</tr>
</table>
这是AngularJS
angular.module("app",[]).controller("ctrl",function($scope){
$scope.classes = [
{name:"张三",age:12,score:44},
{name:"张诶",age:15,score:80},
{name:"刘青",age:11,score:23},
{name:"55",age:15,score:99},
{name:"小刘",age:13,score:54},
]
})
filter 从数组项中选择一个子集。
自定义过滤器
html部分的代码
<p>{{"我显示不出来了"|shouHello}}</p>
angular.module("app",[])
.controller("ctrl",function($scope){})
.filter("shouHello",function(){
return function(text){
return "Hello Angular";
}
})
这是AngularJS ↑
只能定义过滤器，同时需要传递过滤参数
调用实例
html部分的代码
<p>{{17862890990|hideTel:5}}</p>
传入的参数5，将被过滤函数的num形参所接受
这是AngularJS
.filter("hideTel",function(){
return function(text,num){
num = num>0&&num<11?num:3;
text = text+"";
var newText = text.substring(0,11-num)+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})
自定义过滤器，实现根据姓名筛选数据功能
调例演示
html部分的代码
请输入姓名：<input type="name" ng-model="search"/>
<table border="1" width="400px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr ng-repeat="item in classes | orderBy : 'score' |filterByName:name ">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.score}}</td>
</tr>
</table>
这是AngularJS
angular.module("app",[])
.controller("ctrl",function($scope){})
.filter("filterByName",function(){
return function(item,search){
if(!search)return item;
var arr = [];
for(var i=0;i<item.length;i++){
var index = item[i].name.indexOf(search);
if(index>1){
arr.push(item[i]);
}
}
return arr;
}
})
这次51就先写到这里了，剩下的等下次在接着写。
JavaScript 框架------------AngularJS（上）的更多相关文章
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
- Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择
2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK 译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...
- 三大JavaScript框架对比——AngularJS、BackboneJS和EmberJS
<三大JavaScript框架对比——AngularJS.BackboneJS和EmberJS> 本文转载自 作者:chszs,博客主页:http://blog.csdn.net/chs ...
- 顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
- 20 个值得一试的JavaScript 框架
投递人 itwriter 发布于 2011-09-26 17:46 评论(3) 有1956人阅读 原文链接 [收藏] « » 本文介绍 20 个值得一试的 JavaScript 框架,如果你认为答 ...
- 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取
点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论 Pr ...
- 从零开始定义自己的JavaScript框架(一)
来自:http://www.ituring.com.cn/article/48461 1.1 模块的定义 一个框架想要能支撑较大的应用,首先要考虑怎么做模块化.有了内核和模块加载系统,外围的模块就可以 ...
- 怎样克服 JavaScript 框架疲劳？
[编者按]Tero Parviainen 著有 Build Your Own AngularJS,曾两次组织 Clojure CUP 竞赛,在 Twitter 上有近两千名关注者. 在本文中.Tero ...
随机推荐
- js字符串 数组处理
/*字符串处理*/ var a="Hello world!" console.log(a.indexOf(& ...
- 监听 window.open 打开的窗口关闭并回调
第三方的登录的解决方案通常有两种方式,一是打开一个新的标签页,然后登录回调回来: 二是通过父窗口打开一个子窗体去第三方登录,登陆成功时关掉子窗体回到父窗口. 问题来了 我的父窗体怎么样才知道子窗体被关 ...
- DeepLearning.ai学习笔记（一）神经网络和深度学习--Week3浅层神经网络
介绍 DeepLearning课程总共五大章节,该系列笔记将按照课程安排进行记录. 另外第一章的前两周的课程在之前的Andrew Ng机器学习课程笔记(博客园)&Andrew Ng机器学习课程 ...
- 记一次帮客户做SEO诊断：新站收录后优化一个月了，排名一直没上去
一.网站问题 新网站建设有一个多月了,一直在优化,但是网站一直没有排名,不知道什么原因.接下来针对这个网站分析一下原因. 二.诊断分析 看一下网站的基础数据,如图: < 可以看出来网站只有一个多 ...
- Capacitor电容
capacitor无正负极性. cap electrolit有极性,实际中不能接反,否则电容会烧毁或爆炸. MULTISIM仿真中接反会有漏阻存在,但不会烧毁. 电容的分类 按结构可分为:固定电容,可 ...
- JavaPOI处理Excel
java处理excel,心得分享如下,如有不妥或者需要补充的地方,敬请指出,欢迎随时交流 1.加载excel,获得workbook对象 fileTemp = new File(pathOfMExce ...
- windows环境下配置zookeeper
环境: windows10 zookeeper版本:3.4.9 1.从官网 http://mirror.bit.edu.cn/apache/zookeeper/下载对应的版本 2.将下载的文件解压到任 ...
- docker 添加国内源
docker for mac 获取地址:dao镜像地址  # 163的地址 https://hub-mirror.c.163.com docker for mac的设置操作:   点击Apply ...
- Keepalive之nginx调度架构
author:JevonWei 版权声明:原创作品 单主模式Keepalive之Nginx调度 实验目的:实现Nginx调度的高可用,当一台Nginx调度器故障时,启用备用的Nginx调度,在架构中, ...
- 浅谈java中==与equals的区别
今天做了一个业务模块,需要简单的遍历比较值,所以习惯性的用了 "==" ,但是结果没有达到预想的结果是什么鬼? 看到这里,有人一定会指出这俩货不是基本变量! "关系操作符 ...