brunch里面可以方便的管理需要用到的各种库
brunch n gh:scotch/angular-brunch-seed
包含coffeescript,angularjs,bootstrap
新建完成后可以阅读readme里面有详细的说明
注意:默认brunch新建的项目使用jade模板,如果想用html
在scripts中可以发现有compile-html.sh(请阅读README,非常详细的说明)
./scripts/compile-html.sh
ps:现在我用的这个版本angular 是1.2.5 有点老了,把bower.js angular
相关的部分都改成*就会下载最新版本
使用官网那个关于手机的app tutorial,结合brunch新建的
项目,节省自己的时间(我用coffee)。
problems
1. 在controller那一关,brunch demo的controller
代码如下,开始我已为可以直接在后面接
`.controller('xxxCtrl',[...])`,结果页面报错,原来应该这样
angular.module('app.controllers', [])
.controller('AppCtrl', [
'$scope'
'$location'
'$resource'
'$rootScope'
($scope, $location, $resource, $rootScope) ->
# Uses the url to determine if the selected
# menu item should have the class active.
$scope.$location = $location
$scope.$watch('$location.path()', (path) ->
$scope.activeNavId = path || '/'
)
# getClass compares the current url with the id.
# If the current url starts with the id it returns 'active'
# otherwise it will return '' an empty string. E.g.
#
# # current url = '/products/1'
# getClass('/products') # returns 'active'
# getClass('/orders') # returns ''
#
$scope.getClass = (id) ->
if $scope.activeNavId.substring(0, id.length) == id
return 'active'
else
return ''
])
.controller('MyCtrl1', [
'$scope'
($scope) ->
$scope.onePlusOne = 2
])
.controller('MyCtrl2', [
'$scope'
($scope) ->
$scope
])
正确的做法,由于官网demo中新建了一个命名空间,而brunch
的命名空间是另一个,所以应该如下,之后的controller在接着写,
注意在html页面里的ng-app选中这个命名空间`<html
ng-app="phonecatApp">`
angular.module('phonecatApp', [])
.controller('PhoneListCtrl', [
'$scope'
($scope) ->
$scope.phones = [
'name': 'Nexus S'
'snippet': 'Fast just got faster with Nexus S.'
,
'name': 'Motorola XOOM™ with Wi-Fi'
'snippet': 'The Next, Next Generation tablet.'
,
'name': 'MOTOROLA XOOM™'
'snippet': 'The Next, Next Generation tablet.'
]
])
2. 在step-12需要用动画,jquery需要用1.10.X,angular > 1.2.10
在bower.js更改相应配置
问题:oauth跨域
angularjs jsonp只能是get方式,而http.post和resouce oauth时都会引发跨域问题
解决办法,让跨域变成非跨域
跨域是前端问题,javascript访问非本域的东西的时候会有这个问题,因此后端实现
oauth然后让前端访问本域内的地址就可以解决这个问题。
方法有下面:
1.后端服务器做个代理(公司牛人给的解决方案,具体怎么样实现没有深入研究)
2.使用新浪的sdk,后端解决oauth, <a href="/oauth2/sina/authorize">
http://open.weibo.com/wiki/SDK(新浪)
http://michaelliao.github.io/sinaweibopy/(python sdk)
https://github.com/tianyu0915/django-sina-login(python sdk 例子)
service and controller Demo
'use strict'
angular.module('authServices', [])
.service('authService',['$resource',
($resource) ->
{
'login': (user) ->
$resource('/api/auth/login', null, {
'login': {
method: 'POST'
}
})
'logout': ->
$resource('/api/auth/logout', null, {
'logout': {
method: 'GET'
}
})
}
])
angular.module('authControllers', [])
.controller('loginController', [
'$scope'
'$resource'
'authService'
($scope, $resource, loginService) ->
$scope.login = (user) ->
loginService.login(user).login({'username':user.name, 'password':user.password})
$scope.logout = ->
loginService.logout().logout()
])