angularJS 基础回顾

文章作者：松阳

本文出自阿修罗道，禁止用于商业用途，转载请注明出处。

原文链接：http://blog.csdn.net/fansongy/article/details/44106207

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=2080045857&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Fandroid-game%2F1521.html&dpc=1" style="font-size: 14px; font-weight: bold; border-width: 0px; margin: 0px; padding: 0px; font-family: arial, helvetica, clean, sans-serif; line-height: 16px;">

数据

“I'm string”
123
{A:"I'm",B:"Dictory"}
{"I","am","array"}

基本数据使用 ng-init,ng-bind 关联。

 <div ng-init="firstName='Json'"><p><span ng-bind="firstName"></span></p></div>

表达式

可以写在文本区域的内容，表达方式为：{{expression}}它其实定价于ng-bind。

 <p>My express:{{"check Now~"+firstName}}</p>

指令

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

    <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>循环对象：</p><ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li></ul></div>

控制器

注意脚本加载要放在使用前例如在head中：

<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="bower_components/angular/angular.min.js"></script>  <script type="text/javascript">var myModel = angular.module("myModel",[]);myModel.controller("myController",function($scope) {$scope.persion = {firstName:"Dan",lastName:"Jao"};});</script>
</head>

使用控制器要先声明一个对应的module。如上面的代码，使用angular.module('appName',['dependcyModuleNmae'])来实现，并调用controller方法添加对应的controller。使用时直接使用对应的$scope即可

 <div ng-app="myModel" ng-controller="myController">FirstName:<input type="text" ng-model="persion.firstName"><br>LastName:<input type="text" ng-model="persion.lastName"><br>Whole: {{persion.firstName+" "+persion.lastName}}</div>

一个页面控制器只能加载一个ng-app，它相当于main()。

过滤器

使用管道符可开启过滤功能

currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

例如：

{{ (x.name |uppercase)+","+x.others }}
<p>总价 = {{ (quantity * price) | currency }}</p>
<li ng-repeat="x in names | orderBy:'country'">

事件

向上传播事件$emit('myEvent')，同层传播时间$broadcast('myEvent') 收事件使用：

$scope.$on('myEvent'),function() {$scope.count++;
}

$scope

$scope是angularjs的基础。它是树形结构，根节点为`$rootScope。可以使用angular.element($0).scope()`进行调试。

如果你觉得这篇文章对你有帮助，可以顺手点个顶，不但不会喜当爹，还能让更多人能看到它...

angularJS 基础回顾相关推荐

AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
四、Android学习第四天——JAVA基础回顾（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 四.Android学习第四天--JAVA基础回顾这才学习Android的 ...
第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
第二讲 html5框架+Crosswalk 打包 app 以及 Angularjs 基础(初步认识了解 Angularjs) 学习要点: 1. html5 框架+Crosswalk 打包 a ...
AngularJs 基础教程 —— 依赖注入
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...
php大牛额城战笔记,PHP语言大牛开发笔记（8）——MySQL数据库基础回顾[2]
本文主要向大家介绍了PHP语言大牛开发笔记(8)--MySQL数据库基础回顾[2],通过具体的实例向大家展示,希望对大家学习php语言有所帮助. 一.数据表为了确保数据的完整性和一致性,在创建表时指 ...
Javascript基础回顾之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
【数理统计】概率论基础回顾
零.概率论基础回顾 1. 求离散型的期望
AngularJs 基础教程 —— 控制器
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- 控制器 AngularJS 控制器A ...
c语言基础回顾 —— 其他知识点
参考:c语言基础回顾 -- 其他知识点作者:丶PURSUING 发布时间: 2021-03-11 14:48:59 网址:https://blog.csdn.net/weixin_44742824/ ...

angularJS 基础回顾

数据

表达式

指令

控制器

过滤器

事件

$scope

angularJS 基础回顾相关推荐

最新文章

热门文章