# angularjs

### 使用brunch来新建项目

```
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
相关的部分都改成*就会下载最新版本
```

### learning demo

```
使用官网那个关于手机的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更改相应配置
```

### angular初步感觉

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提供的动画

### 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
```

1. $scope绑定的时候将数据绑定到model的属性上 $scope.clock --> $scope.clock.now
2. controller命名使用XXController而不是XXCtrl

### 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()
])
```
