angular js

 

 

最近开始接触angular sj  ui router  由于不太懂 也是踩了不少坑

在这里记录 已被后期 review 

 

首先是mac 配置 rails 时报错 

 

/Users/xiaoyu/.rvm/gems/ruby-2.2.0@baozheng/gems/json-1.8.2/lib/json/ext/parser.bundle: [BUG] Segmentation fault at 0x00000000000440

ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin14]

 

-- Crash Report log information --------------------------------------------

   See Crash Report log file under the one of following:

     * ~/Library/Logs/CrashReporter

     * /Library/Logs/CrashReporter

     * ~/Library/Logs/DiagnosticReports

<!--StartFragment--> <!--EndFragment-->

     * /Library/Logs/DiagnosticReports

 

这主要是因为  在设置电脑的时候自己没有给自己root权限导致

如果知道的情况下会很抓狂 

运行 sudo rails s

这时候会报错 请求安装miss  gems 

运行sudo bundle install

<!--StartFragment--> <!--EndFragment-->

再次运行 sudo rails s

好  环境都安装完毕以后 

我们 clone 代码  安装必须的 gem  进行数据库 文件导入 

数据库迁移  

启动服务器就看到熟悉的 界面了 

下面是正题  

 

这次我们要添加一个版本更新功能 在页面上输入版本号和连接 点击按钮 将版本信息提交到数据库中

要求 每次提交都会覆盖之前的提交

 

 

首先建立一个简单的页面 version_uodate.html.slim

 

 

.modal-header.pts.pbs
  .modal-title
    strong.mrh
      |  版本更新	 - (用于 iOS 端自动升级)



.modal-body 
	input.form-control[
		ng-model="versions" 
		placeholder="请输入版本"
		required
	]
	
	p

	input.form-control[
		ng-model="link" 
		placeholder="请输入连接"
		required
	]
	
    
.modal-footer
  	a.btn.btn-primary.btn-wide.pull-left ng-click='updateVersion()' ng-disabled='!versions || !link'
    	| 确定
  

 

 

 

ng-disabled='!versions || !link'这一句是实现了上面text没有输入的话确定按钮将不可以点击！

 上面的格式需要注意 必须对其 看得出来我们的页面代码量很少 许多功能都是约定的

在 settings.js.coffee.erb 中写入这些内容

 

app = window.app

app.config ($stateProvider, $urlRouterProvider) ->

  $stateProvider.state("versionUpdate",
    url: '/version_update'
    controller: "SettingsCtrl"
    templateUrl: "<%= asset_path("settings/version_update.html.slim") %>"
  )
  return

这里是 angular js ui router 

 

给versionUpdate 写一个路径

 

 

更新的动作在api/v1这里settings.rb 输入如下内容

 

class API::V1::Settings < Grape::API
  include API::V1::Helpers

  doorkeeper_for :all

  before do
    # authenticate!
  end

  helpers do
    # def permitted_params
    #   ActionController::Parameters.new(params[:settlement]).permit(
    #     :amount, :customer_id, :user_id, :order_id, order_ids: [], pay_records: []
    #   ).tap do |hash|
    #     hash[:pay_records] = params[:settlement][:pay_records]
    #   end
    # end
  end

  resource :settings do


    desc "Update a version."
    put '/update' do 
      # 删除全部
      

      # 创建记录
      Setting.create!(
        version_number:params[:setting][:version_name],
        link:params[:setting][:link]
      )
      
    end
  end

end

 在这我们添加了一个api 

 

文件位于controller下的settings.coffee 文件中

<!--StartFragment--> <!--EndFragment-->

首先先判断上面页面的值是否传入过来

app = window.app
app.controller 'SettingsCtrl', (
  $scope,
  $upload,
   dialogs,
   $state
) ->
  $scope.link
  $scope.versions
  #1.test invork
  #2.parameter
  #3.methed
  $scope.versionUpdate= ->
   alert($scope.link)
   alert($scope.versions) 

 刷新 页面 输入信息点击提交  

打印出了我们想要的 信息 ok 

说明跑通了

<!--StartFragment-->

接下来我们要让传递过来的参数存入js 中以备后续存入数据库中

在这里数据库表我事先已经建好了 versions 字段 version_number = string , link = strin

<!--StartFragment--> <!--EndFragment-->

接下来在controllers目录下setting.coffee 里改为这些内容

//= require_tree ./settings

app = window.app

app.controller 'SettingsCtrl', ($scope,$upload,dialogs,$state,Version,$window) ->
  $scope.link
  $scope.versions

  $scope.updateVersion = ->
    Version.$put(
        "/api/v1/versions/update", {version_name: $scope.versions, link: $scope.link,}
      ).then ((result) ->
      	$scope.alertWith("保存成功")
      	$window.location.reload()
      ), (error) ->
        console.log(error)

 然后在version.rb中写入这些内容

class API::V1::Versions < Grape::API
  include API::V1::Helpers

  doorkeeper_for :all

  before do
    # authenticate!
  end

  helpers do
    # def permitted_params
    #   ActionController::Parameters.new(params[:settlement]).permit(
    #     :amount, :customer_id, :user_id, :order_id, order_ids: [], pay_records: []
    #   ).tap do |hash|
    #     hash[:pay_records] = params[:settlement][:pay_records]
    #   end
    # end
  end

  resource :versions do

    #
    #功能
    # => 更新数据库
    #
    #逻辑
    #  
    # => 1.先删除库总所有文件
    #    2.添加新的版本
    #
    desc "Update version"
    put '/update' do  
      # 删除全部
      Version.delete_all()

      # 创建版本
      Version.create!(
        version_number:params[:version][:version_name],
        link:params[:version][:link]
      )        
    end




 #
    #功能
    # => 获取版本号
    #
    #逻辑
    # => 查询 verions 表第一条数据
    # 
    #注意
    # => /get 和 返回结果集名字要一致
    #
    desc "get version"
    get '/get'  do 
      @get = Version.last
      return @get
    end


  end

end

 大功告成 －－！

<!--EndFragment-->