Ionic-Demos

Ionic-Demos

Ionic

Ionic 的介紹請(qǐng)看官網(wǎng), 還有Ionichina（一個(gè)Ionic中文論壇）

個(gè)人情況

回想七月份一個(gè)月，那真是忙成狗，一個(gè)月的時(shí)間做出了一個(gè)app：門客（2.0版本已經(jīng)提交審核啦?。?，8月份開始研究Hybrid開發(fā)，兩個(gè)月的時(shí)間用IonicFramework做了兩個(gè)應(yīng)用，詳情請(qǐng)關(guān)注微信：天天有活，里面有商家端和用工端，產(chǎn)品還比較丑陋，還會(huì)繼續(xù)維護(hù)更新。

Ionic Demos

上面近30個(gè)ionic demo是我在這兩個(gè)月的學(xué)習(xí)中接觸到得，其中Ionic-cnodejs , ioniclub , front-page需要重點(diǎn)看，入門極好的demo

以下是學(xué)習(xí)過程中得一些筆記

網(wǎng)站部署

鏈接到服務(wù)器
ssh dingsai@***.***.**.***

網(wǎng)站根目錄在/src/www/jobWeb/

如果有更新：

  1. 將文件復(fù)制到服務(wù)器上：

    scp -r jobWeb/ dingsai@***.***.**.***:

  2. 登錄服務(wù)器，以下命令在服務(wù)器上執(zhí)行

    sudo chown www-data -R ~/jobWeb

    sudo mv /srv/www/jobWeb/ /srv/www/jobWeb.bak

    sudo mv ~/jobWeb/ /srv/www/

最后確認(rèn)沒問題的話，/srv/www/jobWeb.bak就可以刪掉了

注意，他們似乎沒有做首頁(yè)，所以我配置了訪問 / 會(huì)自動(dòng)跳轉(zhuǎn)到 /listBox/list_1.html，因此必須存在這個(gè)文件。如果不存在這個(gè)文件，需要其他文件做首頁(yè)的話，修改 /etc/nginx/conf.d/default.conf ，依葫蘆畫瓢。改好配置文件，運(yùn)行 sudo nginx -t 檢查一下配置文件語(yǔ)法，沒問題的話 sudo service nginx reload 重啟一下nginx就好了

/srv/www 是 root 的，你沒有權(quán)限直接往里面拷貝

scp -r jobWeb/ dingsai@***.***.**.***:
這條命令拷上去之后，jobWeb 目錄的屬主是你，需要改成 www-data，以避免nginx讀不了

chown 是 change owner 的意思

-R 是 recursive ，對(duì)目錄以及里面的內(nèi)容全部修改

grunt

安裝依賴可以使用配置文件package.json

{
  "name": "PlanxSite",
  "version": "0.0.1",
  "description": "Site for Planx",
  "scripts": {
    "start": "node node_modules/http-server/bin/http-server -p 8000 -c-1"
  },
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-install-simple": "^0.9.3",
    "grunt-bump": "0.0.15",
    "grunt-changelog": "^0.2.2",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-less": "^1.0.1",
    "grunt-contrib-sass": "^0.9.1",
    "grunt-contrib-uglify": "^0.5.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-newer": "^1.1.1",
    "grunt-recess": "^1.0.0",
    "grunt-swig": "^0.2.1",
    "gruntfile-gtx": "^0.3.0",
    "http-server": "^0.6.1",
    "require-directory": "^2.0.0"
  }
}

使用 npm install 安裝

leancloud javascript sdk

<script src="https://leancloud.cn/scripts/lib/av-0.5.0.min.js"></script>

在run中添加id，key

angular.module('Oddjobs',['ionic', 'ngCordova','ngResource','angularMoment', 'Oddjobs.services','Oddjobs.controllers','ionic-datepicker'])

.run(function($ionicPlatform, $rootScope, $state, $ionicLoading, $log,
    My, User){

  AV.initialize('******','*******')
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

  });

發(fā)送短信驗(yàn)證碼(需要先打開leancloud應(yīng)用設(shè)置里的驗(yàn)證注冊(cè)用戶手機(jī)號(hào)碼，和啟用賬號(hào)無(wú)關(guān)短信驗(yàn)證服務(wù))

  $scope.sendCode = function(){

      AV.Cloud.requestSmsCode($scope.signupParams.username).then(function(){
          $ionicLoading.show({
            template:'驗(yàn)證碼已發(fā)送!'
          })
      }, function(err){
        //發(fā)送失敗
      });
      $timeout(function(){
        $ionicLoading.hide()
      },1000);


  }

驗(yàn)證碼驗(yàn)證登錄

      user.signUpOrlogInWithMobilePhone({
        mobilePhoneNumber:$scope.signupParams.username,
        smsCode:$scope.signupParams.verify_code,
        username:$scope.signupParams.username,
        password:$scope.signupParams.password,
        realname:$scope.signupParams.realname,
        usertype:'worker'
      },{
        success:function(user){
          $scope.LoginState = true
        },
        error:function(err){
          console.dir(err)
        }
      });

alert,類似于HUD

      $ionicLoading.show({
          template:"成功退出"
      })
      $timeout(function () {
          $ionicLoading.hide();
      }, 1000)

angularjs calendar

安裝

bower install flex-calendar --save
cd ../flex-calendar/..
bower install

Add to index.html

<link rel="stylesheet" href="bower_components/flex-calendar.css">
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js.js"></script>
<script type="text/javascript" src="bower_components/flex-calendar.js"></script>

Inject flex-calendar and pascalprecht.translate into your main module:

angular.module('App', ['flexcalendar' , 'pascalprecht.translate'])

Add <flex-calendar options="options" events="events"></flex-calendar> directive to your html file.

<flex-calendar options="options" events="events"></flex-calendar>

Flex Calendar takes a few options:

app.controller('myController', ['$scope', function($scope) {
  "use strict";
  // With "use strict", Dates can be passed ONLY as strings (ISO format: YYYY-MM-DD)
  $scope.options = {
    defaultDate: "2015-08-06",
    minDate: "2015-01-01",
    maxDate: "2015-12-31",
    disabledDates: [
        "2015-06-22",
        "2015-07-27",
        "2015-08-13",
        "2015-08-15"
    ],
    dayNamesLength: 1, // 1 for "M", 2 for "Mo", 3 for "Mon"; 9 will show full day names. Default is 1.
    mondayIsFirstDay: true,//set monday as first day of week. Default is false
    eventClick: function(date) {
      console.log(date);
    },
    dateClick: function(date) {
      console.log(date);
    },
    changeMonth: function(month, year) {
      console.log(month, year);
    },
  };

  $scope.events = [
    {foo: 'bar', date: "2015-08-18"},
    {foo: 'bar', date: "2015-08-20"}
  ];
}]);

linux 安裝npm環(huán)境

    sudo apt-get update
    sudo apt-get install node.js
    sudo apt-get install npm
    
    將安裝好的node.js加入環(huán)境
    sudo ln -s /usr/bin/nodejs /usr/bin/node
    
    進(jìn)入ionic app文件夾
    npm install -g cordova  ionic
    npm install

gulp

gulp 用于js,css代碼的打包，ugly，等安全性措施

    sudo npm insatll -g gulp

install locally:

    sudo npm install --save-dev gulp

安裝依賴

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-watch gulp-minify-css gulp-notify gulp-filter gulp-clean  --save-dev

編輯gulpfile.js

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Now, let’s break this down and review what each part does.

Core & Plugins

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

This includes the gulp core and plugins associated with the tasks that we will be performing. Next, we setup each of our separate tasks. These tasks are lint, sass, scripts and default.

Lint Task
// Lint Task

gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Our lint task checks any JavaScript file in our js/ directory and makes sure there are no errors in our code.

Sass Task

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

The sass task compiles any of our Sass files in our scss/ directory into .css and saves the compiled .css file in our css/ directory.

Scripts Task

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

The scripts task concatenates all JavaScript files in our js/ directory and saves the ouput to our dist/ directory. Then gulp takes that concatenated file, minifies it, renames it and saves it to the dist/ directory alongside the concatenated file.

Watch Task

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

The watch task is used to run tasks as we make changes to our files. As you write code and modify your files, the gulp.watch() method will listen for changes and automatically run our tasks again so we don't have to continuously jump back to our command-line and run the gulp command each time.

Default Task

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Finally, we have our default task which is basically a wrapper to our other tasks. This will be the task that is ran upon entering gulp into the command line without any additional parameters.

Now, all we have left to do is run gulp. Switch back over to your command-line and type:

gulp

This will call gulp and run everything we have defined in our default task. So, in other words It’s the same thing as running:

gulp default

Additionally, we don’t have to run the default task. We could run any of the tasks we defined at any time. Simply call gulp and then specify the task you would like to run directly afterward. For example, we can run our sass task manually at any time like so:

gulp sass

Ionic as a web server

You gonna need send all your project files (www folder) and dependencies to an web server.

You can try.

Local

    $ cd [ionic project]
    $ ionic platform add browser
    $ cd [ionic project]/platforms/browser/

and move your www folder to your server [webapp] folder.

Server

In your server:

1.Install Node.js

Install connect and serve-static

$ cd [webapp] $ npm install connect serve-static

Create server.js file

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080)

Run serve

$ node server.js &

Browser

Now you can go to http://yourdomain:8080/index.html

Ionic Alert

AngularJs中得Alert:

```
var confirmPopup = $ionicPopup.confirm({
    title: '已招聘'+numPassing+'/'+num_required+',未招滿',
    template: '停止招聘將無(wú)法重新開啟，確定要關(guān)閉嗎？'
});
confirmPopup.then(function(res) {
    if(res) {
        object.set('status','stopped');
        object.save().then(function(){
                HUD('停止招聘！');
        })
    }else{
    
    }
});


其中

var HUD = function(template){

    $ionicLoading.show({
        template:template
    });

    $timeout(function(){
        $ionicLoading.hide();
    },1500);
};


```

nginx 的安裝和配置

Install with brew

Use brew to install the nginx with command:

$ brew install nginx

After install run:

$ sudo nginx

The default place of nginx.conf on Mac after installing with brew is:

/usr/local/etc/nginx/nginx.conf

Changing the default port

The nginx default port is 8080, we shall change it to 80. First stop the nginx server if it is running by:

$ sudo nginx -s stop

Then open nginx.conf with:

$ vim /usr/local/etc/nginx/nginx.conf

創(chuàng)建conf配置文件，指向索要托管的文件夾：


server {
    listen 8100 ;
    server_name employer.51duangong;

    root /srv/www/employer;

    index index.html;
    autoindex on;

    try_files $uri $uri/ @proxy;

    location @proxy {
    proxy_pass http://****;
    }

}


server {
    listen 8101 ;
    server_name employee.51duangong;

    root /srv/www/employee;

    index index.html;
    autoindex on;
    location @proxy {
    proxy_pass http://****;
    }

}

重啟nginx

sudo service nginx reload

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容