angular.js入门基础(一)
AngularJS 简介
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。
AngularJS 四大特征
- MVC 模式
Angular 遵循软件工程的 MVC 模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular 为客户端的 Web 应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的 Web 应用。
- 双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。
- 依赖注入
依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;
- 模块化设计
高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])
常用语法:
- 表达式
<html>
<head>
<title>入门小 Demo-1</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序
{{表达式 }} 输出表达式 表达式可以是变量或是运算式
- 双向绑定
<html>
<head>
<title>入门小 Demo-1 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名:<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
ng-model 指令用于绑定变量,将元素的值绑定到变量上
- 初始化指令
<body ng-app ng-init="myname='陈大海'">
- 控制器
<html>
<head>
<title>入门小 Demo-3 初始化</title>
<script src="angular.min.js"></script><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 ng-model="x" >y:<input ng-model="y" >运算结果:{{add()}}
</body>
</html>
ng-controller 用于指定所使用的控制器。
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控 制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图
- 事件指令
<button ng-click="add()">运算</button>
- 循环数组
<html>
<head>
<title>入门小 Demo-6 循环数据</title>
<script src="angular.min.js"></script><script>var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块//定义控制器app.controller('myController',function($scope){$scope.list= [100,192,203,434 ];//定义数组});</script>
</head>
<body ng-app="myApp" ng-controller="myController"><table><tr ng-repeat="x in list"><td>{{x}}</td></tr></table>
</body>
</html>
- 循环对象数组
$scope.list= [{name:'张三',shuxue:100,yuwen:93},{name:'李四',shuxue:88,yuwen:87},{name:'王五',shuxue:77,yuwen:56}
];//定义对象数组<tr ng-repeat="entity in list"><td>{{entity.name}}</td><td>{{entity.shuxue}}</td><td>{{entity.yuwen}}</td>
</tr>
阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=1frag12g
新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。 代金券自领取之日起,有效期是30天,请及时使用,过30天后还可以重新领取。
angular.js入门基础(一)相关推荐
- D3.js入门基础教程
什么是"框架" 什么是"应用程序" DOM (文档对象模型(Document Object Model) D3 (1)下载 D3.js 的文件 (2)直接包含网 ...
- angular之入门基础
一.angular 1,angular 的有引入:必须在文档流之前引入(需要注意的是 angular 和原生的js 不互通) 2,angular 是由谷歌开发的框架,奇特点是对于DOM的操作变的更加的 ...
- React.js入门基础一
React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 下面是为什么在你选择之前需要再考虑一下:(摘录) 一开始 React 会极大地减慢你的开 ...
- js入门基础知识(一)
js的能力: 1.JavaScript 能够改变 HTML 内容(JavaScript 同时接受双引号和单引号:) document.getElementById("demo"). ...
- Node.js入门基础
一.命令行窗口 1.打开方式:①cmd ②开始环境中直接找图标 2.通常称呼:终端.shell.小黑屏.cmd窗口 3.常用指令:cd 文件名 (跳转到文件夹下) dir ...
- D3 js入门基础操作
学习D3之前 先了解一下你可能看过很多遍对 D3的基本解释 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一 ...
- JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言 基础背景知识 一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式 一.行内式(了解即可,项目中不使用,日常练习尽 ...
- 前端框架-Angular.js
前端的功能与单页应用 就webapp开发而言,前端实现的功能主要有: -实现UI(渲染出用户可见的视图和各种功能组件) -对用户的操作(事件)做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 ...
- Angular.js示例应用程序
目录 介绍 演示应用程序概述 发布者端 网站端 Angular.Js简介 应用程序 服务 模块 依赖注入 路由 视图 控制器 作用域 指令 发布者 Angular.js网站 Require.js用法 ...
最新文章
- 串口调试助手c语言程序,串口调试助手C语言源程序
- Object.defineProperty的理解
- 猿辅导、作业帮忙“圈钱”,跟谁学、有道、51Talk狂“烧钱”,在线教育钱途在哪?
- Java JDK11快速下载地址
- 使用t-sql语句修改表中的某些数据及数据类型。_Java面试——数据库知识点
- java抽取注释_JAVA 注解教程(五)注解的提取
- html表格td的内容修改,点击table中的td,修改td中的内容功能实现
- centos6 安装xhprof扩展
- Node.js 14 发布,改进了诊断功能
- c#等待所有子线程执行完毕方法
- 使用DB2遇到的一些错误SQLCODE=-551,SQLCODE: -204,SQLCODE:-433,SQLCODE: -104,rg.springframework.beans.factory.B
- 简述窄带调频和宽带调频的_宽带调频和窄带调频的简单区别方法
- 手机卫星定位系统_如何判断自己的手机是否支持北斗卫星定位功能,如何使用?...
- chrome 打包安装插件
- 战神引擎mud2没有mysql文件_战神引擎架设不要(MongoDB)芒果数据库配置教程
- Mardown、LaTex编辑器推荐
- 思途cms php文件说明,思途旅游CMS系统二次开发说明文档(v5.0).pdf
- 国内Cortex-M内核MCU产品性能哪家强?
- JTable深入浅出
- 【分享】常见的打印机无法共享12个问题汇总
热门文章
- fastdfs-启动服务-上传文件-连接问题
- django-登陆案例-分析篇1909
- 区块链100讲:不做码农做矿工,该怎么和爹妈解释
- 京东家电渠道赋能战略加速落地,助力家电品牌打通人、货、场间隔
- SpringMVC报错The request sent by the client was syntactically incorrect ()
- linux运维实战练习--用户和组管理各命令的使用
- 字符串的全排列JAVA实现
- Keys.js 官方使用说明
- Nginx代理连接Redis失败
- 还没使用过Web Worker? 推荐一款开源工具Workerize-Loader,让你在webpack项目中轻松使用Web Worker