Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xiaowenxia/angular-music
使用angular编写的音乐播放器，基于网易音乐API
https://github.com/xiaowenxia/angular-music
angular angular-cli music-player
Last synced: about 1 month ago
JSON representation
使用angular编写的音乐播放器，基于网易音乐API
- Host: GitHub
- URL: https://github.com/xiaowenxia/angular-music
- Owner: xiaowenxia
- License: mit
- Created: 2017-05-06T10:13:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-27T10:42:14.000Z (over 7 years ago)
- Last Synced: 2024-11-09T01:20:45.351Z (3 months ago)
- Topics: angular, angular-cli, music-player
- Language: TypeScript
- Size: 273 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angularJS 要点
### ng-app
指令定义一个AngularJS应用程序
### ng-model
指令把元素（比如输入域的值）绑定到应用程序
### ng-bind
指令把应用程序数据绑定到HTML视图
### ng-repeat
重复一个html元素，类似于for循环,用在数组上
```html
{{x}}
```
### ng-show
当表达式是true的时候会显示标签
```html
```
### ng-click
绑定点击后的js函数
```html
点击
```
### ng-option
使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
```html
```
### ng-disable
该指令可以直接绑定html的disable属性
### ng-hide
该指令可以隐藏/显示标签
### ng-controller
定义控制Angularjs应用
### ng-include
指令用来包含HTML内容，而且还可以包含AngularJS代码
### {{表达式}}
表达式写到双大括号中
### 模块(module)
定义Angularjs应用
```js
var app = angular.module('myApp', []);
```
### 控制器(Controller)
控制Angularjs应用
```js
app.controller('myCtrl', function($scope){$scope.myAppName = 'Angular Music'});
```
### AngularJS动画
AngularJS 使用动画需要引入 angular-animate.min.js 库
```html
```
还需要摘应用中使用模型ngAnimate：
```html
```
也可以通过module添加：
```js
var app = angular.module('myApp', ['ngAnimate']);
```
### 创建制自定义的指令
通过.directive函数添加自定义指令名
(必须使用驼峰法命名指令名称，比如myTag，但是使用的时候需要用-分割，my-tag)
```html
var app = angular.module('myApp', []);
app.directive('myTag', function(){
return {
template : '<h1>自定义标签</h1>'
};
});
```
### $rootScope(根scope)
所有的应用都有一个 $rootScope，它可以作用于ng-app 指令包含的所有 HTML 元素中。
用 rootscope 定义的值，可以在各个 controller 中使用
### Angularjs过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
### Angularjs表格
通过ng-repeat来进行循环标签，
$index可以获取循环中的序号
$even 奇数序号的时候为true
$odd 偶数序号的时候为true
```html
{{ $index + 1 }}
{{ x.Name }}
{{ x.Country }}
```
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。
### AngularJS 服务(Service)
AngularJS 内建了30 多个服务。
$location 服务，它可以返回当前页面的URL地址。
```js
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
```
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
服务
描述
$location
类似 window.location 对象，可以获取当前的URL地址
$http
http服务，最常用的服务
$timeout
类似 window.setTimeout函数
$interval
类似 window.setInterval函数
可以创建自定义服务
```js
/* 创建service */
app.service('myService', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
/* 然后通过函数参数添加到控制器中，就可以使用了 */
app.controller('myCtrl', function($scope, myService) {
$scope.hex = myService.myFunc(255);
});
```
### AngularJS http服务
* 注：v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。 *
```js
/* 简单的 GET 请求，可以改为 POST */
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
/* 简写方法 */
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
```
简写方法列表：
* $http.get
* $http.head
* $http.post
* $http.put
* $http.delete
* $http.jsonp
* $http.patch
### AngularJS选择框(select)
### Angularjs路由
需要包含js：angular-router.js
然后加入到依赖模块：
```js
angular.module('myApp', ['ngRoute']);
```
使用ngView来表示为路由页面
```html
```
配置$routeProvider来定义路由规则
```js
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
```
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：
```
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object
});
```
* template 需要插入的HTML内容
* templateUrl 插入HTML模板文件
* controller 在但其模板上执行新的controller
* controllerAs 为controller指定别名
* redirectTo 重定向的地址
* resolve 指定当前controller所依赖的其他模块
### Angularjs指令列表
指令
描述
ng-app
定义应用程序的根元素。
ng-bind
绑定 HTML 元素到应用程序数据
ng-bind-html
绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template
规定要使用模板替换的文本内容
ng-blur
规定 blur 事件的行为
ng-change
规定在内容改变时要执行的表达式
ng-checked
规定元素是否被选中
ng-class
指定 HTML 元素使用的 CSS 类
ng-class-even
类似 ng-class，但只在偶数行起作用
ng-class-odd
类似 ng-class，但只在奇数行起作用
ng-click
定义元素被点击时的行为
ng-cloak
在应用正要加载时防止其闪烁
ng-controller
定义应用的控制器对象
ng-copy
规定拷贝事件的行为
ng-csp
修改内容的安全策略
ng-cut
规定剪切事件的行为
ng-dblclick
规定双击事件的行为
ng-disabled
规定一个元素是否被禁用
ng-focus
规定聚焦事件的行为
ng-form
指定 HTML 表单继承控制器表单
ng-hide
隐藏或显示 HTML 元素
ng-href
为 the <a> 元素指定链接
ng-if
如果条件为 false 移除 HTML 元素
ng-include
在应用中包含 HTML 文件
ng-init
定义应用的初始化值
ng-jq
定义应用必须使用到的库，如：jQuery
ng-keydown
规定按下按键事件的行为
ng-keypress
规定按下按键事件的行为
ng-keyup
规定松开按键事件的行为
ng-list
将文本转换为列表 (数组)
ng-model
绑定 HTML 控制器的值到应用数据
ng-model-options
规定如何更新模型
ng-mousedown
规定按下鼠标按键时的行为
ng-mouseenter
规定鼠标指针穿过元素时的行为
ng-mouseleave
规定鼠标指针离开元素时的行为
ng-mousemove
规定鼠标指针在指定的元素中移动时的行为
ng-mouseover
规定鼠标指针位于元素上方时的行为
ng-mouseup
规定当在元素上松开鼠标按钮时的行为
ng-non-bindable
规定元素或子元素不能绑定数据
ng-open
指定元素的 open 属性
ng-options
在 <select> 列表中指定 <options>
ng-paste
规定粘贴事件的行为
ng-pluralize
根据本地化规则显示信息
ng-readonly
指定元素的 readonly 属性
ng-repeat
定义集合中每项数据的模板
ng-selected
指定元素的 selected 属性
ng-show
显示或隐藏 HTML 元素
ng-src
指定 <img> 元素的 src 属性
ng-srcset
指定 <img> 元素的 srcset 属性
ng-style
指定元素的 style 属性
ng-submit
规定 onsubmit 事件发生时执行的表达式
ng-switch
规定显示或隐藏子元素的条件
ng-transclude
规定填充的目标位置
ng-value
规定 input 元素的值
### AngularJS 事件列表
* ng-click
* ng-dbl-click
* ng-mousedown
* ng-mouseenter
* ng-mouseleave
* ng-mousemove
* ng-keydown
* ng-keyup
* ng-keypress
* ng-change
### AngularJS 验证属性
属性
描述
$dirty
表单有填写记录
$invalid
字段内容合法的
$invalid
字段内容是非法的
$pristine
表单没有填写记录
$error
错误信息
### AngularJS 全局API
#### 转换
API
描述
angular.lowercase()
将字符串转换为小写
angular.uppercase()
将字符串转换为大写
angular.copy()
数组或对象深度拷贝
angular.forEach()
对象或数组的迭代函数
#### 比较
API
描述
angular.isArray()
如果引用的是数组返回 true
angular.isDate()
如果引用的是日期返回 true
angular.isDefined()
如果引用的已定义返回 true
angular.isElement()
如果引用的是 DOM 元素返回 true
angular.isFunction()
如果引用的是函数返回 true
angular.isNumber()
如果引用的是数字返回 true
angular.isObject()
如果引用的是对象返回 true
angular.isString()
如果引用的是字符串返回 true
angular.isUndefined()
如果引用的未定义返回 true
angular.equals()
如果两个对象相等返回 true
#### JSON
API
描述
angular.fromJson()
反序列化 JSON 字符串
angular.toJson()
序列化 JSON 字符串
#### 基础
API
描述
angular.bootstrap()
手动启动 AngularJS
angular.element()
包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module()
创建，注册或检索 AngularJS 模块