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更改相应配置
1. app.js是程序的入口,读代码的时候从这个文件下手
app.js 做了这些事情:
* 声明了命名空间,以及需要加载的各个其他模块
* 定义了路由表,而路由表又是链接controller和view的桥梁
2. services 和 controller
* controller 和以前其他mvc里面controller相同,处理业务逻辑,
而angularjs由于为了让controller处理的事情更少,而且不同的
页面对应的业务也不同,controller主要处理数据,view里面也会
有一些和数据显示有关的业务处理(directive),这样controller就
更容易测试
* services 则是真正想服务器请求资源的组建,还暴露对象的名字
# phonecatServices.factory('Phone', ['$resource', ....])
例如factory暴露出的名字就可以供controller来引用
3. filter
* filter类似linux的管道符,对后台传来的原生数据做一步处理,
使得view里面显示的时候可以更加的人性化(而不是显示true,null
或者其他不符和自己心意的数据)
4. animate
* angularjs提供的动画
问题: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 例子)
from ng-book
$scope绑定的时候将数据绑定到model的属性上 $scope.clock --> $scope.clock.now
controller命名使用XXController而不是XXCtrl
'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()
])