angular.js学习笔记

     第一章

一、基础性引入。

正常引入angular.js后,要在html页面上,加上ng-app="",将html的页面提交给angular管理。

(建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。)

1.{{}}可以直接传字符串

例如:Hello {{'帅哥'}};

2.简单的运用

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

例如:

输入可显示在下面: <input type="text" ng-model="yourname" placeholder="输入">
显示上面内容 {{yourname || '输入'}}!
这样ng-model绑定数据的变量名然后在下面输出变量名即可节省了js中的监听事件
其实简单的说就是数据一个获取,可以直接获取到数据的值。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

    输入可显示在下面: <input type="text" ng-model="yourname" placeholder="输入">

    显示上面内容<h4 ng-bind="yourname"></h4>

同样的结果,使用不同的方法而已。

 

3.ng-init作为不常出现的东西,建议不使用。

 

4.ng-controller用于函数声明所用的,简单的说就是我们在jquery中所用的function的一个声明一样,ng-controller="方法名";

其中有一个重要的地方就是,在ng-controller中要注意,$scope这个东西一般都是在做数据模型的功能,它贯穿了整个angular,也是controller的数据存放中心,

 (1)Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

 (2)Scope 是一个对象,有可用的方法和属性。

 (3)Scope 可应用在视图和控制器上。

 

5.利用以上的一些简单原理,可以做一个简单的计算器。

<div ng-controller="costCtrl">
<input type="text" ng-model="shuzi1" placeholder="1">
<input type="text" ng-model="shuzi2" placeholder="2">
<p>结果 = {{(shuzi1* shuzi2) | currency }}</p>//可以使用四则运算符
</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.shuzi1= 1;
$scope.shuzi2= 2;
});

6.数据的简单遍历(ng-repeat="hyp in hyps"),

实例:

     <ul  ng-controller="www">
<li ng-repeat="hyp in hyps">
<p>{{hyp.name}}</p>
<p>{{hyp.snippet}}</p>
</li>
</ul>
<script>
function www($scope) {
$scope.hyps = [
{"name": "1",
"snippet": "111111111111111111"},
{"name": "2",
"snippet": "2222222222222222222222222"},
{"name": "3",
"snippet": "3333333333333333333333333"}
];
}
</script>

 

这个只是简单遍历一个自己声明好的数组,如果是要遍历一个json的数据,还是要考虑一下。

也可以直接本生来遍历

//第一种

 

<table>
<tr><th>表单</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>

</table>
//第二种
<p >
<a ng-repeat="i in ['dhashd','daasdasd']">{{i}}</a>
</p>

 

如果遍历数据为字符串需要加上' '或者""。在angular中遍历数据十分的简单。

第二章

angular.js无非是一个js库,原理上很多地方上还是通用的。

而在使用angular.js我们大多是在解决前后端交互问题,作为现在流行的js库,他拥有自己本身的优势,我们接下来一起看看。

实例1:

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--栏的内容 -->
搜索内容: <input ng-model="query">
</div>
<div class="span10" >
<!--主体内容-->
<ul ng-controller="PhoneListCtrl">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>

</div>
</div>
</div>
<script>
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "何远鹏",
"snippet": "Fast just got faster with Nexus S."},
{"name": "张静",
"snippet": "The Next, Next Generation tablet."},
{"name": "周复航",
"snippet": "The Next, Next Generation tablet."},
{"name": "陈健",
"snippet": "The Next, Next Generation tablet."}
];
}
</script>

filter在这个里面他充当了过滤器的作用,在之前我们也使用到了过滤器currency(用来将变量转换成货币表现形式)


 

 

 

 

 

 

原文地址:https://www.cnblogs.com/Victory-peng/p/5663467.html