Angular JS (一)
AngularJS是一个js框架,以js编写的库。跟knockoutJS类似。
- AngularJS扩展了html
通过ng-directives扩展了html;ng-app定义一个angularJS应用程序;ng-model吧元素值绑定到应用程序;ng-bind把应用程序数据绑定到html视图。angularJS指令是以ng作为前缀的html属性。HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
如:
<script type="text/javascript">
angular.module("testModule",[])
.controller("testCtr",function($scope){
})
.directive("testDire",function(){
return {
restrict:"A",
require:"ngModel",
link:function(scope,elem,attr,ngModelCtr){ }
}
})
</script>
</head> <body ng-app="testModule" ng-controller="testCtr">
<input type="text" test-dire ng-model="say"/> <h1>
{{say}}
</h1> </body>
- AngularJS 对象和绑定
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p> <!--这是大括号绑定-->
<p>名为 <span ng-bind="person.firstName"></span></p> <!--这是ng-bind 绑定-->
</div>
- AngularJS的一些指令
- ng-app 初始化一个AngularJS应用程序
- ng-init 初始化应用程序数据
- ng-model 把元素值绑定到应用程序
- ng-controller
- ng-repeat 重复一个html元素,有点像在html中使用foreach 如:<li ng-repeat="x in names"> {{x}}</li>
- .directive 创建自定义指令
- ng-disabled 相当于html的disabled属性 ng-show显示或者隐藏html元素 ng-hide隐藏或者显示html元素
- ng-options 选择框
- ng-click 点击事件
- AngularJS 过滤器
- currency 格式化庶子为货币格式
- filter 从数据组中选择一个子集
- lowercase 格式化字符串为小写
- orderBy根据某个表达式排列数组
- uppercase格式化字符串为大写
过滤器通过一个管道字符(|)用起来。
<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | lowercase }}</p> </div>
第一篇先写到这里。第二篇写一些高级的。待续...
Angular JS (一)的更多相关文章
- 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 的目的是 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular.js 的初步认识
MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...
随机推荐
- Gen类的字符串操作
public void t(String d){ final String str = "b"; String s = "a"+"c"+st ...
- 二:理解ASP.NET的运行机制(例:基于HttpHandler的URL重写)
url重写就是把一些类似article.aspx?id=28的路径重写成 article/28/这样的路径 当用户访问article/28/的时候我们通过asp.net把这个请求重定向到article ...
- Linux信号和trap命令的使用
目录 信号介绍 信号列表 控制信号 Ctrl+c显示指定内容 使Ctrl+c无任何操作 处理多个信号 处理所有信号 恢复信号 实现跳板机(实例) 信号介绍 运行Shell脚本时,如果按下快捷键Ctrl ...
- Centos7 开启端口
CentOS7默认没有使用iptables,所以通过编辑iptables的配置文件来开启80端口是不可以的. CentOS 7 采用了 firewalld 防火墙. 如要查询是否开启80端口: [ro ...
- JDK8简化if-else
简化if-else 1234567891011 User user = ...if (user != null) { String userName = user.getUserName(); if ...
- springboot-30-security(三)使用注解实现权限控制
上个博客: http://www.cnblogs.com/wenbronk/p/7381252.html中, 实现了经典5表对用户进行权限的控制, 但太过于繁琐了, 官方推荐的方式是将用户和角色存储数 ...
- Spring IOC 源码之ResourceLoader
转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...
- ruby中字符串转换为类
最近有个需求,需要根据一个字符串当作一个类来使用,例如: 有一个字符串 “ChinaMag”,根据这个字符串调用 类 ChinaMag下的方法. 解决办法: 1. rails可以使用 constant ...
- vuex数据管理-数据共享
应用场景 提供一个地址省市区地址联动操作的应用场景:在地址管理的地址修改.地址添加.选择送货区域等逻辑中,会用到该联动picker.在地址picker操作中,需要请求省份列表,下面以省份列表的操作为例 ...
- 计算文章作品发布时间的php代码
/* 计算发布时间据当前时间 如1秒前 1分钟前 1小时 1天 1个星期 1个人月 1年 */ function format_dates($time) { if($time <= 0) ret ...