Recommandé
Contenu connexe
En vedette
En vedette (14)
Similaire à Angular-meteor with ionic
Similaire à Angular-meteor with ionic (20)
Plus de LearningTech
Plus de LearningTech (20)
Dernier
Dernier (20)
Angular-meteor with ionic
- 2. Add Packages meteor add urigo:angular meteor add urigo:ionic meteor add angularui:angular-ui-router
- 3. client/lib/app.js Angular初始設定 angular.module('starter', ['angular-meteor','ionic']); or var app = angular.module('starter', ['angular-meteor','ionic']); //之後如果使用可用app.run()執行 //我是分隔線 Meteor.startup(function (){ //Use this function to manually start up angular application. angular.bootstrap(document, ['starter']); });
- 4. client/routes.js ionic加入與設定routes angular.module("starter").run(['$ionicPlatform',function($ionicPlatform) { $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); } if(window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); }]);
- 5. angular.module("starter").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){ $locationProvider.html5Mode(true);//處理 "/parties/:partyId" $stateProvider .state('index', { url: '/', templateUrl: 'client/template/mainview/mainview.ng.html', controller: 'MenuCtrl' }) .state('partyDetails', { url: '/parties/:partyId', templateUrl: 'client/parties/views/party-details.ng.html', controller: 'PartyDetailsCtrl', }); $urlRouterProvider.otherwise("/"); }]); http://ionicframework.com/docs/api/
- 7. Template meteor index.html {{> temp}} index.html or temp.html <template name="temp"> <!--write something--> <template> angular-meteor index.html <ng-include src="'client/template/view/test.ng.html'"> </ng-include> test.ng.html <div ng-controller="testControl"> <!--write something--> </div>
- 8. ionic list 與 ng-repeat <ion-list ng-controller="ListCtrl" class="listAllFav"> <ion-item ng-repeat="listItem in myFavorites" href=""> {{listItem.item}} <ion-option-button class="button-assertive" ng-click="delete(listItem)"> Delete </ion-option-button> </ion-item> </ion-list>
- 9. Buttons 與 ng-click Controller Html <div ng-controller="Ctrl"> <div class="buttons"> <button ng-click="delete(item)" class="button button-icon icon ion-trash-b"></button> </div> </div> Js angular.module("starter").controller("Ctrl", ['$scope', $scope.delete = function(item) { $scope.myFavorites.splice($scope.myFavorites.indexOf(item), 1); }; }]);
- 10. ng-bind & ng-model ng-bind <div> Hello, <span ng-bind="user.name"></span> </div> or <div> Hello, {{user.name}} </div> js $scope.name = 123; ng-model <input type="text" ng-model="user.name" />
- 11. Currentuser 與 ng-hide, ng-show meteor {{#if currentUser}} Wellcome, {{name}} {{else}} Wellcome {{/if}} angular-meteor <div ng-hide="$root.currentUser">Wellcome</div> <div ng-show="$root.currentUser">Wellcome, {{name}}</div> Angular ng-click with ng-show, two buttons http://codepen.io/SusanneLundblad/pen/dabcw