Build Fishing Record(1)Meteor AngularJS Bootstrap Ionic Angular Material

sillycat

浏览: 2560111 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Summary

Build Fishing Record(1)Meteor AngularJS Bootstrap Ionic Angular Material

1 Fundament
Create the First UI Project, Working on Meteor
> meteor create smart-fisher

Disable Blaze and other template thing
> meteor remove blaze-html-templates

> meteor remove ecmascript

Add AngularJS
> meteor add angular

Following this documents to integrate angularJS and meteor
https://www.meteor.com/tutorials/angular/templates

<head><body><template> get parsed from all the html

Share JS between client and server
Tasks = new Mongo.Collection('tasks');

Client side codes
if (Meteor.isClient) {
// This code only runs on the client
angular.module('simple-todos',['angular-meteor']);

angular.module('simple-todos').controller('TodosListCtrl', ['$scope', '$meteor',
    function ($scope, $meteor) {

      $scope.tasks = $meteor.collection(Tasks);

}]);
}

Try to add more data in mongo to see what happened.
> meteor mongo

MongoDB shell version: 2.6.7
connecting to: 127.0.0.1:3001/meteor

> db.tasks.insert( { text: "nodejs and frontend master", createdAt: new Date() } );

> db.tasks.find();
{ "_id" : ObjectId("5679aa466ef681a112809143"), "text" : "nodejs and frontend master", "createdAt" : ISODate("2015-12-22T19:53:42.867Z") }

Add One Item
      $scope.addTask = function (newTask) {
        $scope.tasks.push( {
          text: newTask,
          createdAt: new Date() }
        );
      };

List and Remove Item
    <header>
        <h1>Todo List</h1>
        <form class="new-task" ng-submit="addTask(newTask); newTask='';">
              <input ng-model="newTask" type="text"
                 name="text" placeholder="Type to add new tasks" />
        </form>
      </header>

      <ul>
        <li ng-repeat="task in tasks" ng-class="{'checked': task.checked}">
              <button class="delete" ng-click="tasks.remove(task)">×</button>
              <input type="checkbox" ng-model="task.checked" class="toggle-checked" />
              <span class="text">{{task.text}}</span>
        </li>
      </ul>

Try to Start and Debug on iOS
> meteor install-sdk ios
Please follow the instructions here:
https://github.com/meteor/meteor/wiki/Mobile-Development-Install:-iOS-on-Mac

> meteor add-platform ios

> meteor run ios

That is only on emulator

Try to Start on Android
> meteor install-sdk android
Please follow the instructions here:
https://github.com/meteor/meteor/wiki/Mobile-Development-Install:-Android-on-Mac

Set the ANDROID_HOME, usually android studio install that in ~/Library/Android/sdk by default. And we need add
$ANDROID_HOME/tools and $ANDROID_HOME/platform-tools to my PATH.

And we need to create one emulator as well, Create a Virtual Device

We need install the API 22 manually. [Configure] —> [SDK Manager] Select the API 22
> meteor add-platform android

> meteor run android

Check device List
> adb devices
List of devices attached
192.168.56.101:5555 device

Genymotion Start and Create one Virtual Device

> meteor run android-device

Meteor thinks that is a real device.

Running on real device
https://www.meteor.com/tutorials/angular/running-on-mobile

$ne should be not equal
      $scope.$watch('hideCompleted', function() {
        if ($scope.hideCompleted){
          $scope.query = {checked: {$ne: true}};
        }
        else{
          $scope.query = {};
        }
      });

      $scope.incompleteCount = function () {
        return Tasks.find({ checked: {$ne: true} }).count();
      };

        <h1>Todo List ( {{ incompleteCount() }} )</h1>
        <label class="hide-completed">
              <input type="checkbox" ng-model="hideCompleted"/>
              Hide Completed Tasks
        </label>

user account https://www.meteor.com/tutorials/angular/adding-user-accounts

security https://www.meteor.com/tutorials/angular/security-with-methods

publish and subscribe https://www.meteor.com/tutorials/angular/publish-and-subscribe

More Example
http://www.angular-meteor.com/tutorials/socially/angular1/bootstrapping

http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping

strongest
http://meteor-ionic.meteor.com/

https://github.com/meteoric/meteor-ionic

2 Start to Try with Mobile Angular UI
http://mobileangularui.com/docs/

Install the demo codes and check
> npm install -g bower yo gulp generator-mobileangularui

https://atmospherejs.com/krysfree/mobile-angular-ui

I need to understand how to integrate mobile angular UI to meteor.

Install meteor
> curl https://install.meteor.com/ | sh

Angular Material
https://material.angularjs.org/latest/demo/content

https://github.com/Urigo/meteor-angular-socially

Install the brew
http://coolestguidesontheplanet.com/installing-homebrew-os-x-yosemite-10-10-package-manager-unix-apps/

Install the image tool
> brew install graphicsmagick

References:
https://www.meteor.com/tutorials/angular/filtering-collections
http://mobileangularui.com/
https://github.com/mcasimir/mobile-angular-ui

http://ionicframework.com/examples/

AngularJS Experience for PhoneCat
http://sillycat.iteye.com/blog/2007538
http://sillycat.iteye.com/blog/2007546
http://sillycat.iteye.com/blog/2007988

分享到：

ionic UI | NodeJS App and Docker

2015-12-24 02:02
浏览 1570
评论(0)
分类:企业架构
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论