sillycat
- 浏览: 2486536 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
nation：
你好，在部署Mesos+Spark的运行环境时，出现一个现象， ...
Spark(4)Deal with Mesos -
sillycat：
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat：
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat：
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat：
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
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
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
分享到：
发表评论
-
Stop Update Here
2020-04-28 09:00 260I will stop update here, and mo ... -
NodeJS12 and Zlib
2020-04-01 07:44 430NodeJS12 and Zlib It works as ... -
Docker Swarm 2020(2)Docker Swarm and Portainer
2020-03-31 23:18 310Docker Swarm 2020(2)Docker Swar ... -
Docker Swarm 2020(1)Simply Install and Use Swarm
2020-03-31 07:58 321Docker Swarm 2020(1)Simply Inst ... -
Traefik 2020(1)Introduction and Installation
2020-03-29 13:52 291Traefik 2020(1)Introduction and ... -
Portainer 2020(4)Deploy Nginx and Others
2020-03-20 12:06 378Portainer 2020(4)Deploy Nginx a ... -
Private Registry 2020(1)No auth in registry Nginx AUTH for UI
2020-03-18 00:56 373Private Registry 2020(1)No auth ... -
Docker Compose 2020(1)Installation and Basic
2020-03-15 08:10 326Docker Compose 2020(1)Installat ... -
VPN Server 2020(2)Docker on CentOS in Ubuntu
2020-03-02 08:04 397VPN Server 2020(2)Docker on Cen ... -
Buffer in NodeJS 12 and NodeJS 8
2020-02-25 06:43 334Buffer in NodeJS 12 and NodeJS ... -
NodeJS ENV Similar to JENV and PyENV
2020-02-25 05:14 415NodeJS ENV Similar to JENV and ... -
Prometheus HA 2020(3)AlertManager Cluster
2020-02-24 01:47 359Prometheus HA 2020(3)AlertManag ... -
Serverless with NodeJS and TencentCloud 2020(5)CRON and Settings
2020-02-24 01:46 291Serverless with NodeJS and Tenc ... -
GraphQL 2019(3)Connect to MySQL
2020-02-24 01:48 207GraphQL 2019(3)Connect to MySQL ... -
GraphQL 2019(2)GraphQL and Deploy to Tencent Cloud
2020-02-24 01:48 390GraphQL 2019(2)GraphQL and Depl ... -
GraphQL 2019(1)Apollo Basic
2020-02-19 01:36 274GraphQL 2019(1)Apollo Basic Cl ... -
Serverless with NodeJS and TencentCloud 2020(4)Multiple Handlers and Running wit
2020-02-19 01:19 263Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(3)Build Tree and Traverse Tree
2020-02-19 01:19 259Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(2)Trigger SCF in SCF
2020-02-19 01:18 251Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(1)Running with Component
2020-02-19 01:17 235Serverless with NodeJS and Tenc ...
相关推荐
https://packages.meteor.com/bootstrap-link?arch=os.windows.x86_64
Meteor-Bootstrap-组件 Meteor 的 Bootstrap 组件助手 用于呈现演示的样板应用程序
提供AngularJS和angular2两种版本的JS框架支持。主题内置了引导页模板和各个版本的seed模板。 该模板提供了整套的前端解决方案，并使用了npmbower等一系列工具进行了对前添加自定义属性段代码的管理，实现了代码热...
脚步： $ meteor # won't work# While Building the application:# meteor-bootstrap-sass-bug.sass: Scss compiler error: undefined# /tmp/meteor-bootstrap-sass-bug/meteor-bootstrap-sass-bug.sass:1: error: ...
#Meteor Angular Material TODO 应用程序 这是通过和制作的简单 TODO MVC 应用程序的示例你可以看到现场演示
T00rk / bootstrap-material-datepicker的流星包 用于自举材料设计的日期时间选择器。 致谢 TOOrk / bootstrap-material-datepicker（ ） fezvrasta / bootstrap-material-design（ ） 先决条件 下划线 momentjs：...
Bootstrap Material Design 现在与 Meteor 本地集成。 请用 （全包） 或者 （无 Glyphicons - 如果您想使用其他图标集，例如 Font Awesome，则很有用）。
包含backend-meteor-angular 和 backend-meteor-angular-seed
Meteor AngularJS-带 （用于 Bootstrap 3 的 AngularJS 1.2+ 原生指令。）为meteorjs 重新打包 起源文档。
Angular-angular-meteor.zip,角度和流星-完美的堆栈角度流星编译器,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用...
可以在Angular-Meteor网站上找到。 安装 meteor add shmck:angular2 安装启用了Angular2注释的TypeScript编译器。 meteor add netanelgilad:angular2-typescript 在index.html中，设置system.js并提供自举应用程序...
Meteor Bootstrap-iOS7 为打包的 。 几乎所有不是来自 bootstrap-ios7 的东西都来自 。 安装 使用 Meteor 1.0 及更高版本，安装使用： $ meteor add pandark:bootstrap-ios7 建造 目前无法轻松构建该包。 ...
为包装 CDN。 依赖于现有的 Bootstrap。 见在 。
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动...
社会角度Meteor和AngularJS应用程序
meteor add twbs:bootstrap 2. 安装 meteor add voidale:bootstrap-alerts 3.添加模板以保持警报 {{> bootstrapAlerts}} 选项 // Show Halflings or Font Awesome (Soon) showIcons: true, // Position 'top-...
用于流星的Bootstrap智能软件包收集用法您可以使用meteor add从Bootstrap中精确添加所需的组件。 如果使用全包方法进行开发，则任何需要非常特殊的引导程序功能的包都可以api.use它们。例子meteor add matb33:...
Meteor 的 Bootstrap 样式通知 版本 0.1.1 安装 meteor add vladbalan:notifications 用 创建通知 通过将通知添加到 Notifications 集合来触发通知 Notifications.upsert({ // For example, if you want to alert...