学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别
data-ng-app是为了h5不报错
2.ng-class
不多说就来拿例子说吧
html代码
<div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}">
</div>
js代码：
$scope.colorChanger=false;
此时的变量colorChanger=false,那么！colorChanger=true,所以：‘color-changer-hiden':true;这时的div就addClass这个color- changer-hiden,当‘color-changer-hiden':false是removeClass这个color- changer-hiden累;
再比如说
$scope.lala = true;
<div ng-class="{‘selectClass‘:select,‘choiceClass‘:choice,‘haha‘:lala}"></div>
因为lala=true，所以div的class='haha'；
哈哈 你懂了吗？反正我懂了哈
3.$rootScope：
首先,$scope是连接html跟javascript的纽带
我们都知道angular.js有个$scope，哈哈，那么$rootScope的意思呢，$rootScope可作用于整个应用中，是各个controller中scope的桥梁。用于rootscope定义的值，可以在各个controller中应用，$rootScope是所有$scope的最上层
$rootscope可以作用于整个应用中，是各个controller中scope的桥梁，是贯穿各个controller的
4.数据绑定
angular的数据绑定是{{}}双大括号，
html代码：
<link rel="stylesheet" type="text/css" data-ng-href="{{colors}}" href='/'>
js代码：
$rootScope.colors='static/css/blue.css'
就给页面上的这个colors赋值了。
5.ng-transclude
（1）ng-transclude指明的是一个插入的位置，
（2）指令中标签里的元素先删除然后被嵌入所包含的内容所替代
好的上代码
html代码
<div ng-controller="Ctrl">
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div> js代码
app.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray"> {{title}}</div>' +
'<div ng-transclude></div>' +
'</div>'
};
}); 最后的效果 <div style="border: 1px solid black;">
<div style="background-color: gray">我是标题</div>
我是内容
</div>
这样看应该理解的差不多了哈
6.path
path在我用到的时候的功能差不多相当于a标签的href属性
7.restrict:以my-menu为例
| 字母 | 声明风格 | 实例 |
| E | 元素 | <my-menu></my-menu> |
| A | 属性 | <div my-menu='product'></div> |
| C | 样式表 | <div class='my-menu'></div> |
| M | 注释 | <!-- directive:my-menu --> |
E：element;A:attribute;C:class;M:注释的单词是啥啊，不知道为什么是M
8.directive：指令机制，上代码
<html ng-app='app'>
<body>
<hello></hello>
</body> <script src="../angular-1.0.3/angular.min.js"></script>
<script src="HelloDirect.js"></script>
</html>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};
});
结合7来看，就知道这个directive的指令是声明元素
9.transclude:上代码
<html ng-app='app'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<hello>
<br/>
<span>原始的内容，</span><br/>
<span>还会在这里。</span>
</hello>
<hello>
</hello>
</body> <script src="../angular-1.0.3/angular.min.js"></script>
<script src="Transclude.js"></script>
</html>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there <span ng-transclude></span></div>',
transclude: true
};
});
实现的效果为
Hi there
原始的内容，
还会在这里。
Hi there
总结就是：transclude: true，js代码里面的template会在<hello>内部出现是<hello></hello>的子标签。
10.当<div class='hello-js'></div>
js代码需要以下写法：
app.directive('helloJs', function() {
return {
restrict:'C',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
就是class里面的-线不要，js的写法是驼峰式，template是随便写的哈。
11.$location.hash():得到或者设置url里的锚点部分
URL http://example.com/#/some/path?foo=bar&baz=xoxo#hashValue
var hash = $location.hash();
// => "hashValue"
$location.hash([id]):这条语句是快速定位页面为[id]的元素
12.
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// 将location.hash的值设置为
// 你想要滚动到的元素的id
$location.hash('bottom');
// 调用 $anchorScroll()
$anchorScroll();
};
}]);
页面滚动到id='bottom'的位置。$anchorScroll();
13.angular.element(element):angular获得页面元素，上代码
var leftSide=angular.element(document.querySelector('.left-side'));
这个代码就是把class='left-side'的dom元素拿出来咯
14.
app.config(['$locationProvider',function($locationProvider){
$locationProvider.html5Mode(true);
}]);
这段代码我一开始不知道什么意思，然后就去问问小伙伴，然后就得到了很好的解决，我就不多解释了，一个链接就能解决的问题啦，上链接http://www.cnblogs.com/wolf-sun/p/4656216.html
14：ng-include用于包含外部的文件
<div ng-include="'myFile.htm'"></div>
就是这个div里面是用于展示myFile.html的这个文件内容
15.当html上有{{person}},然后js是$scope.person.name='wenwen'
那么页面上得到的效果就是：{'name':'wenwen'}一个json对象，哈哈
16.$watch:是一个scope函数，用于监听模型变化，当你的模型部分变化时它会通知你
$watch(watchExpression, listener, objectEquality);
每个参数的说明如下：
watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它
上代码
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset='UTF-8'>
<title>表达式</title>
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
</head>
<body>
<div ng-controller='mycontroller'>
<input ng-model='expr' type='text' placeholder='enter an expression'/>
<div>{{parseExpr}}</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('mycontroller',['$scope','$parse',function($scope,$parse){
$scope.person={
name:'wenen'
};
$scope.$watch('expr',function(newVal,oldVal,scope){
if(newVal != oldVal){
var parseFun=$parse(newVal);
scope.parseExpr=parseFun(scope);
}
})
}])
</script>
</html>
用了$watch监听input：ng-model='expr'的变化，然后parseExpr随着变化呗
17.数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name | uppercase}}</h1>
</div> </body>
</html>
名字 : sssss Hello SSSSS
18.过滤器，简单的页面上的过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name | uppercase}}</h1>
<input type='number' ng-model='numbers'>
<h1>{{numbers | number:}}</h1>
<input type='number' ng-model='n1'>
<h1>{{n1 | currency}}</h1>
</div> </body>
</html>
效果为：
再稍微复杂一点的就是要用到js的啦，首先来说一下orderBy:字面意思就是排序呗，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul> </div> <script>
var app=angular.module('myApp',[]);
app.controller('namesCtrl',function($scope){
$scope.names=[
{"name":"wenwen","country":"china"},
{"name":"hello","country":"aweden"},
{"name":"world","country":"denmark"}
]
})
</script>
</body>
</html>
效果就是：
循环对象: hello, aweden
wenwen, china
world, denmark
看到没，是按country的首字母排序的，是的，就是这样过滤
现在再深入一点就是搜索啦，也是还可以啦，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>输入过滤:</p> <p><input type="text" ng-model="test"></p> <ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul> </div> <script>
var app=angular.module('myApp',[]);
app.controller('namesCtrl',function($scope){
$scope.names=[
{"name":"wenwen","country":"china"},
{"name":"hello","country":"aweden"},
{"name":"world","country":"denmark"}
]
})
</script> </body>
</html>
效果为
一个简单的搜索框就出来了，不得不说很强大啊，加了filter|test咯，这个test就是绑定了输入框啦，so~~~你懂的
学习angular.js的一些笔记想法(上)的更多相关文章
- 新手入门学习angular.js的心得体会
看了一天的angular.js,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知 ...
- 学习node.js的一些笔记
最近看了几眼node.js,以前曾听说它用途很大. 在菜鸟教程上,已看了过半的内容:http://www.runoob.com/nodejs/nodejs-web-module.html,如今看到了这 ...
- 关于Angular.js Routing 的学习笔记(实现单页应用)
最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...
- angular js 上传插件 ng-file-upload 使用时注意事项
项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下.在这里简单回顾一下自己使用的插 ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular.js vs Ember.js
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- 【转】Angular.js VS. Ember.js：谁将成为Web开发的新宠？
本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注 ...
随机推荐
- hibernate（二）annotation第一个示例
一.在数据库中创建teacher表(数据库hibernate) create table teache( id int auto_increment primary key, name ), titl ...
- javascript类型系统——包装对象
× 目录 [1]定义 [2]生存期 [3]显式创建[4]转型函数[5]比较运算 前面的话 javascript对象是一种复合值,它是属性或已命名值的集合.通过'.'符号来引用属性值.当属性值是一个函数 ...
- MySQL数据库工具类之——DataTable批量加入MySQL数据库(Net版)
MySQL数据库工具类之——DataTable批量加入数据库(Net版),MySqlDbHelper通用类希望能对大家有用,代码如下: using MySql.Data.MySqlClient; us ...
- Sparse Filtering 学习笔记（一）网络结构与特征矩阵
Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...
- 【转】图文详解YUV420数据格式
YUV格式有两大类:planar和packed. 对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y, ...
- Windows Azure Web Site (16) Azure Web Site HTTPS
<Windows Azure Platform 系列文章目录> 我们在使用微软云Azure Web App的时候,会使用微软的二级域名:http://xxx.chinacloudsites ...
- [New Portal]Windows Azure Virtual Machine (13) 在本地使用Hyper-V制作虚拟机模板，并上传至Azure (3)
<Windows Azure Platform 系列文章目录> 本章介绍的内容是将本地Hyper-V的VHD,上传到Azure数据中心,作为自定义的虚拟机模板. 注意:因为在制作VHD的最 ...
- 笔记：Html.Partial和Html.Action
1.带有Render的方法返回值是void,在方法内部进行输出:不带的返回值类型为MvcHtmlString,所以只能这样使用:@Html.Partial 对应 @{Html.RenderPartia ...
- 前端构建：Less入了个门
一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可 ...
- AndroidStudio 多层级 Module 对 aar 引用问题
最近碰到这么个恶心的问题 问题:有个arr文件被放到Module A中引用,现在Module B又依赖了Module A,则在编译过程中会发生错误,Module B找不到aar文件.(同时如果又有Mo ...