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

angular.js学习笔记相关推荐

3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...

angular.js学习笔记

angular.js学习笔记相关推荐

最新文章

热门文章