文章目录
  1. 1. angular使用笔记
    1. 1.1. 一些库的使用
    2. 1.2. 一些规范
    3. 1.3. 一些代码的记录
  2. 2. 参考

angular使用笔记

一些库的使用

1
2
3
4
5
angular.module('XXXXX', [
'ngResource', // restful请求的封装
'ui.router', // 基于状态导航
'ui.bootstrap' // bootstrap 的 angular版
])

一些规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

app
├── components // 写一些公共用的模板,方法
│ ├── entity
│ │ └── entities-factory.js // restful 请求目录
│ │
│ └── notification // 公用方法
│ ├── notification-drtv.js (directive)
│ ├── notification.tpl.html
│ └── notification-service.js


├── home // 为每一个 state 都分割成一个文件夹
│ ├── home.html
│ ├── home-controller.js
│ └── home-routers.js


├── news
│ ├── news-list.html
│ ├── news-controller.js
│ └── news-routers.js

├── public // 此处存放不需要权限验证的页面

└── member // 此处存放所有需要权限验证的页面

一些代码的记录

entities-factory.js 存放所有的restful请求

1
2
3
4
5
6
7
8
9
angular.module('XXXX')
.factory('newsEntity', function ($resource) {
return $resource(
'api/v1/news/:id',
{id: '@id'}, // 组合url为 api/v1/news/123
{update: {method: 'PUT'}} // 增加 restful的update
);
})
// ........

news-routers.js 每个state都有一个自己的路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
angular.module('XXXXX')
.config(function($stateProvider) {
$stateProvider
.state('home.news', {
url: '/news',
template: '<div ui-view></div>', // template和abstract 联合使用,只是作为父状态存在
abstract: true
})
.state('home.news.list', {
url: '',
controller: 'NewsListCtrl', // 直接在 routers中指定 controller, 无需再 html中指定
templateUrl: 'app/news/news-list.html',
resolve: {
NewsList: function(newsEntity) { // newsEntity定义在components的entity的entities-factory.js return newsEntity.query().$promise; // 返回数组数据的promise
}
}
})
.state('home..news.add', {
url: '/add',
controller: 'SingleNewsCtrl',
templateUrl: 'app/news/news-add-edit.html',
resolve: {
News: function(newsEntity) {
return new newsEntity(); // 通过new一个对象来使用restful的$save
}
}
})
.state('home.news.edit', {
url: '/edit/:id', // 此处的 /:id 是用于 ui.router 传递 id参数
controller: 'SingleNewsCtrl',
templateUrl: 'app/news/news-add-edit.html',
resolve: {
News: function(newsEntity, $stateParams) {
console.log($stateParams.id); // 此处得到 id
return new newsEntity({id: $stateParams.id}).$get(); // 从服务器获取此id的数据
}
}
});
});

notification 公用的方法

1
2
3
// notification.tpl.html
// 此处使用了 ui.bootstrap
<alert class="center-block col-sm-6" ng-repeat="notification in notifications" type="{{types[notification.type]}}" close="close($index)">{{notification.message}}</alert>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// notification-service.js

angular.module('XXXXXXX')
.service('notificationService', function ($timeout) {
var notifications = [], svc = this;

this.getNotifications = function () {
return notifications;
};

this.removeNotification = function (notification) {
notifications.splice(notifications.indexOf(notification), 1);
};

this.error = function (message) {
var notification = { type: 'error', message: message };
notifications.push(notification);
$timeout(function () {
svc.removeNotification(notification);
}, 10000);
};

this.info = function (message) {
var notification = { type: 'info', message: message };
notifications.push(notification);
$timeout(function () {
svc.removeNotification(notification);
}, 5000);
};
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// notification-drtv.js 

angular.module('XXXXX')
.directive('notificationBar', function() {
return {
restrict: 'EA',
templateUrl: 'app/components/notification/notification-bar.tpl.html',
controller: function ($scope, notificationService) {
$scope.notifications = notificationService.getNotifications();
$scope.types = {
error: 'danger',
warn: 'warning',
info: 'info'
};
$scope.close = function (index) {
$scope.notifications.splice(index, 1);
};
}
};
});

参考

  • CRM开发

文章若有纰漏请大家补充指正,谢谢~~
http://blog.xinshangshangxin.com SHANG殇

文章目录
  1. 1. angular使用笔记
    1. 1.1. 一些库的使用
    2. 1.2. 一些规范
    3. 1.3. 一些代码的记录
  2. 2. 参考