Angular简单总结
AngularJS
AngularJS四大特征
- MVC模式
- 双向绑定
- 依赖注入
- 模块化设计
AngularJS 表达式
AngularJS 表达式写在双大括号内{{expression }},可以包含文字、运算符和变量
AngularJS 指令
最常用的指令有
- ng-app定义应用程序的根元素
- ng-click定义元素被点击时的行为
- ng-controller定义应用的控制器对象
- ng-if如果条件为false移除HTML元素
- ng-init定义应用的初始化值
- ng-model绑定HTML控制器的值到应用数据
- ng-repeat定义集合中每项数据的模板
ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.name="张三";
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
我叫:<input ng-model="name" />
</body>
</html>
双向绑定,在修改输入域的值时,AngularJS表达式中 属性的值也将改变
<body ng-app="myApp" ng-controller="myController">
我叫:<input ng-model="name" />
<h1>你叫:{{name}}</h1>
</body>
AngularJS Scope(作用域)
AngularJS MVC模式中scope是模型
- Model(模型):数据,其实就是 angular 变量($scope.XX);
- View(视图): 数据的呈现,Html+Directive(指令);
- Controller(控制器):操作数据,就是 function,数据的增删改查;
scope是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递。scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
AngularJS 过滤器
过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写 |
自定义过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.msg = "好好休息天天向上"
});
app.filter('reverse',function(){
return function(text){
return text.split("").reverse().join("");
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<input ng-model="msg" />
反转: {{msg | reverse}}
</body>
</html>
AngularJS 服务(Service)
$location 服务
- 获取当前完整的url路径 $location.absUrl()
- 获取当前url的参数的序列化json对象 $location.search()
- 获取当前url路径(当前url#后面的全部内容) $location.url()
- 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) $location.path()
$http 服务
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS</title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php").then(function(response) {
$scope.names = response.data.sites;
});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
</body>
</html>
AngularJS Select(选择框)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS</title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.names = ["百度", "腾讯", "阿里巴巴", "网易" ,"京东"];
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
超级品牌:<select ng-model="selectedName" ng-options="x for x in names"></select>
</div>
</body>
</html>
AngularJS 表格
<body ng-app="myApp" ng-controller="myController">
<table border="1">
<tr ng-repeat="x in names">
<td>{{ x}}</td>
</tr>
</table>
</body>
显示序号 ($index)
<body ng-app="myApp" ng-controller="myController">
<table border="1">
<tr ng-repeat="x in names">
<td>{{$index}}</td>
<td>{{x}}</td>
</tr>
</table>
</body>
AngularJS 模块
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
//base.js
var app = angular.module('myApp', []);
//myController.js
app.controller('myController', function($scope) {
$scope.names = ["百度", "腾讯", "阿里", "网易" ,"京东"];
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS</title>
<script src="js/angular.min.js"></script>
<script src="js/base.js"></script>
<script src="js/myController.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table border="1">
<tr ng-repeat="x in names">
<td>{{$index}}</td>
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
Angular简单总结的更多相关文章
- Angular简单应用剖析
这一篇我们将一起感受学习一个小型的.活生生的应用,而不是继续深入分析哪些单个的特性.我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的.可以运行的应用. GutHub ...
- Angular 简单的Get
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- Angular 简单的Post
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- Angular.的简单运用
从script引用angular文件.开始编写angular事件: 在angular文件中添加属性: ag-xxxx;初始化使用: ng-app="name"; 没有这个属性就不会 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- vue和angular的区别:
相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...
- vue,react,angular
一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...
- vue,angular,react框架对比
转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...
- vue.js和angular.js的区别
关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态 ...
随机推荐
- Internet Of Things
- 文件上传fileupload文件接收
form表单提交数据到servlet后,使用fileupload进行接收. fileupload 是由 apache 的 commons 组件提供的上传组件.它最主要的工作就是帮我们解析 reques ...
- 多线程(七)~join方法的使用
作用:join()方法的作用是等待线程对象销毁. join()方法具有能使线程排队运行的作用,有点类似于同步的效果. join与synchronize的区别: jo ...
- SourceTree Win10 安装不成功解决过程记录
简介 SourceTree 是一款拥有可视化界面的项目版本控制软件,适用于git项目管理,同时它集成了 git flow 工作流程,对于不熟悉 git 命令的初学者来说,可以通过 SourceTree ...
- 猿创|有赞的zan framework安装与使用[2]
下载并安装comoser curl -sS https://getcomposer.org/installer | php 结果各种超时 不能忍,打开迅雷下载installer:https://get ...
- Win10提示“您未连接到nvidia gpu的显示器”的解决方法
显卡有Nvidia 和 ATI两个芯片,我们经常称他们为N卡和A卡,N卡更加注重于性能,而A卡则为颜色艳丽,画面更好.不过,最近一些windows10系统用户在使用N卡过程中,遇到了提示“您当前未使用 ...
- 科技巨头之微软-Microsoft
提起微软Microsoft,我想应该是无人不知无人不晓.Windows操作系统,Office办公软件,是我们日常经常用到的工具.而微软的创始人正是前世界首富比尔盖茨. 1997年,我刚上初中.当时学校 ...
- 插上翅膀,让Excel飞起来——xlwings(一)
python操作Excel的模块,网上提到的模块大致有:xlwings.xlrd.xlwt.openpyxl.pyxll等,他们提供的功能归纳起来有两种:一.用python读写Excel文件,实际上就 ...
- 简单的PHP算法题
简单的PHP算法题 目录 1.只根据n值打印n个0 2.根据n值打印一行 0101010101010101010101…… 3.根据n值实现1 00 111 0000 11111…… 4.根据n值实现 ...
- windows网络模型之重叠IO(完成例程)的使用
#include <WINSOCK2.H> #include <stdio.h> #define PORT 5150 #define MSGSIZE 1024 #pragma ...