Angular框架入门
今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例!
首先,我们要知道什么是AngularJS?
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
然后,AngularJS怎么用?为什么我们要使用AngularJS?
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面,通过指令拓展了HTML
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中
我认为AngularJS 的优势在于减轻前端js代码量，增加js的复用 也可以通过学习AngularJS学习到更多的前端页面框架 而且最重要的是AngularJS具有四大特性 分别是:
1.采用MVC设计模式
说起MVC设计模式就不得不提一下设计模式这个关键词了，常见的设计模式有23+1种，这个+1就是指MVC了，其他的可以自行百度了解，学过软件工程的可能会了解的多一点，虽然很繁琐，但确实是很有用的东西。
在angularJS中MVC分别代表模型（model）,视图（view）,控制器（controller）
Model：模型，就是业务数据，前端项目中就是JS变量；
View：业务数据向用户展示的地方，前端项目中就是HTML；
Controller：负责业务数据的增删改查，前端项目中相当于函数。
2.双向数据绑定
数据绑定有两个方向，意识从Model到View，二是从View到Model。
1.从Model到View，只要Model中数据发生改变，View中的数据会自动同步更新。许多方法都可以实现此种方向的绑定，例如：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked，其他的指令没有手动尝试，如果大家有兴趣可以自己敲一敲尝试一下。
2.从View到Model，这种方向的绑定实现方法只有一种，就是ngModel
单行文本输入域，ngMode可以把value属性值绑定到Model变量
复选框，ngModel可以把true/false值绑定到Model变量
单选框，ngModel可以把当前选中的单选框的value值绑定到Model变量
下拉框，ngModel可以把当前选中的option的value值绑定到Model变量
3.依赖注入
学过spring的同学可能知道这个概念，对于angular JS来说如果需要那些对象可以在参数中直接写出来，然后就可以在函数的使用了，这些对象不需要你自己创建，它本身已经被angular创建好了，你就可以直接使用了。
module.controller('控制器', function($scope, $interval){})
Angular中的ngController指令在实例化控制器对象时，会根据指定的形参名，创建出控制器所依赖的对象，并注入给控制器对象——依赖注入（Dependency Injection，DI）现象。
注意：
(1)Angular在创建控制器对象时，会根据形参列表中的每个形参的名称来创建依赖的对象，故控制器声明函数不能声明Angular无法识别的形参名——Angular只提供了这一种依赖注入方式——根据形参名来注入依赖的对象！
(2)若项目JS文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败！解决办法：
4.模块化开发
顾名思义就是通过定义模块 把各个部分分开 采用了高内聚低耦合的原则 从而使代码的依赖降低
我们应该如何使用AngularJS呢
首先我们需要导入所要用到的script 标签 使用方法和Jquery一样
<script type="text/javascript" src="js/angular.min.js" ></script>
接下来要认识几个比较常用的指令
ng-model 可以将输入域的值与 AngularJS 创建的变量绑定。 与jsp中的name属性类似
ng-app=myApp 用于告诉 AngularJS 应用当前这个元素是根元素。一般写在<body>标签中 一个HTML只有一个ng-app
ng-controller 用于为你的应用添加控制器。一般写在<body>标签中
ng-repeat 用于遍历循环 哪里需要用到就添加在对应的标签上
ng-init 初始化
$scoper 作用域是当前页面
表达式 页面 如果需要展示数据 需要用{{表达式或者变量}} 比如:
<script>
var app=angular.module('myApp',[])// 定义了一个模块 叫myApp
// 定义控制器
app.controller('mycontroller',function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app=myApp ng-controller="mycontroller">
x：<input type="text" ng-model="x" />
y：<input type="text" ng-model="y" /> <br />
运算结果：{{add()}}
</body>
结果:
循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app = angular.module("myApp",[])
app.controller("mycontroller",function($scope){
$scope.list = [
{name:"zhangsan",age:18,sex:"man"},
{name:"lisi",age:17,sex:"woman"},
{name:"wangwu",age:16,sex:"boy"}
];
})
</script>
</head>
<body ng-app="myApp" ng-controller="mycontroller">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr ng-repeat="p in list">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
</tr>
</table>
</body>
</html>
结果:
一些其他的补充
$scope是angular.js内置对象
$scope有请求数据 也有响应数据
ng-init angular.js 中 只要页面一执行 页面加载首先执行的ng-init 中操作
var app=angular.module('app',[]) // 定义了一个模块叫app 定义以后一定要在body 标签上声明使用的模块名称
ng-click 鼠标点击事件
<tr ng-repeat="q in list">
$http 也是angular.js的内置对象 主要作用发送http 请求 并且是发送ajax
$http.get 发送get请求
$event 可以获取当前操作的事件是什么 复选框 ----》复选框哪个被勾选
Angular框架入门的更多相关文章
- Angular 快速入门
Angular 快速入门 AngularJS 官方网址 Angular:https://www.angular.cn/ Angular官网:https://angularjs.org/ Angular ...
- (转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- AG-Admin微服务框架入门
AG-Admin微服务框架入门 @qq群:一群: 837736451 二群 169824183 一 概要介绍 AG-Admin后台地址:https://gitee.com/minull/ace-s ...
- Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- CI框架入门1
CI框架入门: 1.url的特点 2.目录结构/布局 3.MVC分别在哪里,如何依葫芦画瓢 4.安全性 ...
- 初始angular框架（1）
作为一个从来没有使用过的angular框架的小白 第一步肯定是 看文档! 没错就是看文档了!
- 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战
概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...
- 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战
前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...
- 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示
前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...
随机推荐
- A.Math Problem
题意:这里有n个区间,你需要添加一个区间,使得每个区间都至少有一个共同的点在这个区间,且长度最小,输出最小的长度. 分析:找出所有区间右端点的最小值,和所有区间左端点的最大值,然后答案就是max(0, ...
- 史上最全的linuxvi命令的总结
第8章 linux编辑文件内容命令 8.1 vi命令 8.1.1 快速移动光标技巧 ID 快捷键 快捷键说明 1 G 将光标快速移动到最后一行 2 gg 将光标快速移动到行首 3 nG 将光标快速移动 ...
- 最全的linux基础命令
第1章 linux命令 1.1 线上查询及帮助命令 help命令*** help前面接你要查询的命令:例如ls [root@server02 ~]# ls --help 用法:ls [选项]... [ ...
- 【转】Nginx + CGI/FastCGI + C/Cpp
接着上篇<Nginx安装与使用>,本篇介绍CGI/FASTCGI的原理.及如何使用C/C++编写简单的CGI/FastCGI,最后将CGI/FASTCGI部署到nginx.内容大纲如下: ...
- 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 轻松构建基于 Serverless 架构的弹性高可用音视频处理系统
前言 随着计算机技术和 Internet 的日新月异,视频点播技术因其良好的人机交互性和流媒体传输技术倍受教育.娱乐等行业青睐,而在当前, 云计算平台厂商的产品线不断成熟完善, 如果想要搭建视频点播类 ...
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...
- Java堆的结构是什么样子的？什么是堆中的永久代(Perm Gen space)?
JVM的堆是运行时数据区,所有类的实例和数组都是在堆上分配内存.它在JVM启动的时候被创建.对象所占的堆内存是由自动内存管理系统也就是垃圾收集器回收. 堆内存是由存活和死亡的对象组成的.存活的对象是应 ...
- django基础之day08，分页器从无到有，动态思路解析全过程
*********分页器从无到有的全过程,动态思路解析如下:******** 1.通过book_queryset = models.Book.objects.all()[start_num:end_n ...
- PyTorch-网络的创建，预训练模型的加载
本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...