Angular.js学习笔记 (二)

用A链接对象解析url的组成
var url = ‘https://www.baidu.com:8080/aaa/1.html?id=10#name‘;
var aLink = document.createElement(‘a‘);
aLink.href = url;
console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a>
console.log(aLink.search);//?id=10
console.log(aLink.hash);//#name
...
// protocol: https
// host: www.baidu.com:8080
// hostname: www.baidu.com
// port: 8080
// pathname: /aaa/1.html
// search: ?id=10
// hash: #name
JSON就是用字符串描述对象的方式

angular.js常用指令:
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

ng-app:ng-app指令用来标明一个AngularJS应用程序,
标记在一个AngularJS的作用范围的根对象上,
系统执行时会自动的执行根对象范围内的其他指令
,可以在同一个页面创建多个ng-app节点,但不推荐。
创建多个ng-app时,默认只能执行第一个,后面的需要手动引导:angular.bootstrap(document.querySelector(‘[ng-app="myApp2"]‘),[‘myApp2‘]);但一般不用这种方式引导;正确方式为:angular.module(‘myApp‘, [‘myApp1‘, ‘myApp2‘]);
ng-bind:用法示例:
<!-- <strong>{{username}}</strong> -->
<strong ng-bind="username"></strong>
<!-- ng-bind指令在绑定的值包含HTML时会转义,为了安全(跨站脚本攻击) -->
如果确实需要将HTML正确输入,使用的是ng-bind-html,同时需要引进angular-sanitize.js包,并创建一个依赖于此包的模块:angular.module(‘myApp‘,[‘ngSanitize‘]);最后确保一定要使用自己定义的模块才有效果。
ng-repeat:ng-repeat指令用来编译一个数组重复创建当前元素,如 <li ng-repeat="item in app">
<strong>{{item.name}}</strong>
<span>{{item.age}}</span>
</li>
当app中有重复值时会报错,此时应该这样写:name in app track by $index;
(补充:name.startsWith(lastname):以lastname为开头的name的值为true----这是H5新增元素)
ng-class:ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名
:ng-class="{red:$even,green:$odd}" ;ng-class也可以像普通class一样使用
ng-show/ng-hide:会根据属性值去确定是否展示当前元素,例如ng-show=false则不会展示该元素
;
ng-if是指是否存在DOM元素
;
ng-href/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG
ng-switch 指令根据表达式显示或隐藏对应的部分。对应的子元素使用 ng-switch-when 指令,如果匹配选中选择显示,其他为匹配的则移除。你可以通过使用 ng-switch-default 指令设置默认选项,如果都没有匹配的情况,默认选项会显示。
ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中。
ng-selected 指令用于设置 <select> 列表中的 <option> 元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。
常用事件指令与原生js基本相同,差别就是前面加上ng-;例如ng-click;
自定义指令(重要但不常用,个人觉得很难):
目的:封装一些常用而且公用的东西,angular仍然还有一些DOM操作的可能,所有的dom操作都应该集中在自定义指令中。
以下demo默认引用bootstrap和angular
demo1:
script:
var demoApp = angular.module(‘demoApp‘, []);
// 第一个参数是指令的名字,第二个参数任然应该使用一个数组,数组的最后一个元素是一个函数
// 定义指令的名字,应该使用驼峰命名法
demoApp.directive(‘itcastButton‘, [function() {
// 该函数应该返回一个指令对象
return {
template:‘<input type="button" value="itcast" class="btn btn-lg btn-primary btn- block" />‘
};
}]);
html:
<itcast-button></itcast-button>//代替了template中的内容
demo2:
script:
demoApp.directive(‘btn‘, [function() {
return{
scope:{
primary:‘@‘,
lg:‘@‘,
block:‘@‘,
},
template:‘<button class="btn {{primary==\‘true\‘?\‘btn-primary\‘:\‘\‘}}">button</button>‘
}
}]);
html:
<btn primary="false"></btn>
demo3:
script:
demoApp.directive(‘btn‘, [function() {
return {
// transclude字面意思就是嵌入,也就是说你需不需要将你的指令内部的元素(注意不是指令的模板)嵌入到你的模板中去,默认是false
// 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令
transclude: true,
replace: true, // 替换指令在HTML中绑定的元素
template: ‘<button class="btn btn-primary btn-lg" ng-transclude></button>‘
};
}]);
html:
<btn>itcast</btn>
demo4:(了解一些属性意义即可)
script:
demoApp.directive(‘breadcrumb‘, [function() {
return {
// 指定当前指令的类型什么样的,默认情况下全部支持
restrict: ‘A‘,
//E = Element, A = Attribute, C = Class, M = Comment
// template: ‘‘, // 模版字符串
templateUrl: ‘tmpls/breadcrumb.html‘,//引入模板
replace: true,
// transclude: true,
};
}]);

时间: 2024-10-19 14:23:34

Angular.js学习笔记 (二)的相关文章

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Angular JS学习笔记

之前的学习方法有点盲目,建议以后只看与工作有关的内容,并且多问那些是只和工作有关联的. 遇到问题的时候,项目不急的话,自己研究,项目急的话,马上问. 方法不对,再努力也没有用. Angular JS学习网站:http://www.zouyesheng.com/angular.html#toc7 [  项目有关的内容 ] ng-model ng-click ng-options ng-repeat ng-if ng-show ng-hide ng-controller ng-href(有印象) {

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

Angular.js学习笔记(三)

一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n

Angular JS 学习笔记(一)

1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net/

angular.js学习笔记--概念总结

好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $rootScope 和 $scope: $rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层! $scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理

【转】require.js学习笔记(二)

require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <script src="js/require.js" data-main="js/main"></script> MAIN.JS require.config({ baseUrl: "js/lib", paths: { "jquer

[转]node.js学习笔记(二)

二.express 1.安装 express4 npm --registry=http://registry.npmjs.org install -g express-generator (全局) 2.新建express项目 express -t ejs newsproject cd newsproject npm --registry=http://registry.npmjs.org install 3.启动项目 A 修改app.js增加 其中,通过app.use('/',routes)访问