Angular.js学习笔记 ，二

用A链接对象解析url的组成

var url = 'https://www.baidu.com:8080/aaa/1.html?;

var aLink = document.createElement('a');

aLink.href = url;

console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?></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,

};

}]);