Angularjs+ionic 学习(一):Angularjs常用指令
来源:互联网 发布:中信国安 大数据 编辑:程序博客网 时间:2024/05/17 02:30
ionic环境搭建请参考:PhoneGap+Angularjs+ionic 环境搭建
使用angular指令,需要angular.min.js这个文件,我们可以使用命令行来下载,下载完后考入我们的HTML5工程,引用一下就可以~如图
那么,在当前木兰就会生成一个node_modules文件夹,点击去angular,可以看到以下内容~那就下载成功了。angular.min.js就是目前我们想要的。
进入整体,先来看一段HTML代码~~
<!DOCTYPE html><html><head> <title>Ionic Template</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <script src="js/angular.min.js"></script></head><body> <div ng-app=""> input something<br> <input type="text" ng-model="my_angular1"> output:<br> {{my_angular1}} <br><br> input something<br> <input type="text" ng-model="my_angular2"> output: <div ng-bind="my_angular2"></div> </div></body></html>
运行后的效果就是我们在文本框输入的内容跟我们输出的内容是绑定的,也就是同步输出~~绑定有两种方式,一种是通过双重花括号{{}}来绑定,{{}}其实可以认为是一种表达式;另一种就是通过ng-bing指令来绑定数据。
上面这段代码就用到了Angularjs的ng-app、ng-model、ng-bind这三个指定,当然,肯定不只这三种指令,下面就来看看Angularjs的指令含义~~
定义了Angularjs的跟元素节点,通俗点说,就是包装代码块,在这个代码块外面的内容,就没办法识别这个代码块里面的某些东西。
所以,ng-app指令告诉Angularjs,当前的div块是Angularjs应用程序的所有者~
ng-model绑定HTML的元素到应用程序数据,通俗来讲,就是设一个变量来指向HTML的某个标签,实现数据绑定;
为应用程序数据提供类型验证( number、 email、 required);
为应用程序数据提供状态( invalid、 dirty、 touched、 error);
为 HTML 元素提供 CSS 类;
绑定 HTML 元素到 HTML 表单;
所以,ng-model 指令把输入域的值绑定到应用程序变量 name。
bg-bind绑定HTML元素到应用程序数据。与ng-model就可以对应起来了~所以,ng-bind对应与ng-model,把应用程序变量 name 绑定到某个段落的 innerHTML。ng-init主要用于设置变量在应用程序里面的初始值。ng_clickHTML元素的点击事件ng_controller为应用程序定义控制器对象。ng_disabled绑定应用程序数据到HTML的disabled 属性ng_repeat为控制器中的每个数据定义一个模板。ng_show显示或隐藏 HTML 元素。
ng-bind 与 {{}} 同样可以认为是数据绑定,有着异曲同工之妙,那么就来看看ng-bind 与 {{}} 绑定数据的示例
<body> <script src="angular.min.js"></script> <div ng-app=""> <p>在输入框中输入: </p> <p>姓名: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> <div ng-app=""> <p>在输入框中输入: </p> <p>姓名: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div></body>当然,{{}}不仅仅只能表示是字符串,数据拼接、数字、对象、数组,都是可以的,表达式规范跟Java语言差不多,自个儿领悟吧~~
ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。angularjs 中$scope 是连接 controllers(控制器)和 templates(模板 view/视图)的主要胶合体。我们可以把我们的 model 存放在 scope 上,来达到双向你绑定。来看段示例先~
<body> <div ng-app="" ng-controller="personController"> <!-- 输出绑定的数据 --> 名 : <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br><br> 姓名 : {{person.fullName()}} </div> <script> function personController($scope) { // personController为控制器对象名 $scope.person = { // 构造一个对象 firstName: "John", lastName: "Doe", fullName: function() { // 拼接全名 var x = $scope.person; return x.firstName + " " + x.lastName; } }; } </script> <script src="angular.min.js"></script></body>
ng-repeat指令主要是定义一个模版,提供给应用程序来使用。配合ng-controller使用,来看段示例
<div ng-app="" ng-controller="namesController"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul></div><script src="namesController.js"></script><script> function namesController($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }</script>
最后来看段简单的综合示例
<!DOCTYPE html><html><head> <title>Ionic Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <script src="js/angular.min.js"></script></head><body> <!-- 定义根节点 初始化myName变量 --> <div ng-app="myApp" ng-init="myName = 'yuyh'"> input something<br> <input type="text" ng-model="my_angular1"> <!-- 绑定 --> output:<br> {{my_angular1}} <br><br> input something<br> <input type="text" ng-model="my_angular2"> <!-- 绑定 --> output: <div ng-bind="my_angular2"></div> <br><br> My name is {{myName}} <!-- 表达式取值 --> <br><br> <div ng-controller="myControl"> <!-- 控制器 --> {{title}} <ul> <li ng-repeat="x in names"> <!-- 模版取值 --> {{ x.name + ', ' + x.country }} </li> </ul> </div> </div> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller('myControl',function($scope){ // 控制器 $scope.title = "Hello World"; $scope.names = [ {name:'James',country:'U.S.A'}, {name:'Yao',country:'CHN'}, {name:'Wade',country:'American'} ]; }); </script></body></html>run起来试试~~
3 0
- Angularjs+ionic 学习(一):Angularjs常用指令
- angularJs(一)指令
- AngularJS(一)指令
- angularjs 学习 指令学习一
- AngularJS学习笔记(3)- AngularJS 指令
- Ionic,AngularJS学习笔记
- angularJS自定义指令(一)
- angularJs(五)--指令(一)
- AngularJS系列(一)——常用指令
- AngularJS学习(一)
- AngularJS学习(一)
- AngularJS学习(一)
- angularjs学习(一)
- angularjs常用指令
- AngularJS-常用指令
- angularJS常用指令
- AngularJS常用指令
- angularJS 常用指令小结
- 绣花机花样文件总结
- QSqlDatabase 连接 cloneDatabase()
- java在windows和linux系统中通用的路径符号"//"
- jdk安装,配置
- 过滤器和拦截器的区别
- Angularjs+ionic 学习(一):Angularjs常用指令
- ios App 让自己的应用在其他应用打开列表显示
- 一行或多行文本超出区域用省略号表示
- 埃及分数题解[迭代加深搜索]
- 给一个10进制数,如何输出2进制数中1的个数?
- 使用静态函数的好处
- HDU 2433 Travel 枚举+最短路
- hibernate 常用
- struts2的值栈