ionic-framework interview questions
Top ionic-framework frequently asked interview questions
I am wondering if you can pass a controller to the $ionicModal service. Something like.
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
controller: 'MyModalCotroller'
})
A little context: I would like to have a modal that is distributed across the app and I dont want to repeat all the methods (hide, show, buttons inside the modal) in every controller and I would like to remove the methods from the 'Main Controller' to keep things clean. This would encapsulate the functionality of the modal.
Is there a way to do this.?
Thanks
Source: (StackOverflow)
I'm very new to the ionic framework :)
>npm install -g cordova
>npm install -g ionic
>ionic start test blank
>cd test
>ionic platform add android
When I use '>ionic build android' start download gradle, but can't download and get an Error
What caused this error and how can I fix it?!
I download gradle and install in pc but Wants to download again.
can add gradle to project offline?
C:\Users\LENOVO2014\test>ionic build android
running cordova build android
Running command: "C:\Program Files\nodejs\node.exe" C:\Users\LENOVO2014\myApp\ho
oks\after_prepare\010_add_platform_class.js C:\Users\LENOVO2014\myApp
add to body class: platform-android
Running command: C:\Users\LENOVO2014\myApp\platforms\android\cordova\build.bat
ANDROID_HOME=D:\program\Programing\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_31
Running: C:\Users\LENOVO2014\myApp\platforms\android\gradlew cdvBuildDebug -b C:
\Users\LENOVO2014\myApp\platforms\android\build.gradle -Dorg.gradle.daemon=true
Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip
................................................................................
................................................................................
................................................................................
............................................
Exception in thread "main" java.lang.RuntimeException: java.net.SocketException:
Connection reset
at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAcc
essManager.java:78)
at org.gradle.wrapper.Install.createDist(Install.java:47)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:129)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:48)
Caused by: java.net.SocketException: Connection reset
at java.net.SocketInputStream.read(SocketInputStream.java:189)
at java.net.SocketInputStream.read(SocketInputStream.java:121)
at java.io.BufferedInputStream.read1(BufferedInputStream.java:284)
at java.io.BufferedInputStream.read(BufferedInputStream.java:345)
at sun.net.www.MeteredStream.read(MeteredStream.java:134)
at java.io.FilterInputStream.read(FilterInputStream.java:133)
at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(Http
URLConnection.java:3335)
at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(Http
URLConnection.java:3328)
at org.gradle.wrapper.Download.downloadInternal(Download.java:63)
at org.gradle.wrapper.Download.download(Download.java:45)
at org.gradle.wrapper.Install$1.call(Install.java:60)
at org.gradle.wrapper.Install$1.call(Install.java:47)
at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAcc
essManager.java:65)
... 3 more
C:\Users\LENOVO2014\myApp\platforms\android\cordova\node_modules\q\q.js:126
throw e;
^
Error code 1 for command: cmd with args: /s /c "C:\Users\LENOVO2014\myApp\platfo
rms\android\gradlew cdvBuildDebug -b C:\Users\LENOVO2014\myApp\platforms\android
\build.gradle -Dorg.gradle.daemon=true"
ERROR building one of the platforms: Error: C:\Users\LENOVO2014\myApp\platforms\
android\cordova\build.bat: Command failed with exit code 1
You may not have the required environment or OS to build this project
Error: C:\Users\LENOVO2014\myApp\platforms\android\cordova\build.bat: Command fa
iled with exit code 1
at ChildProcess.whenDone (C:\Users\LENOVO2014\AppData\Roaming\npm\node_modul
es\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:131:23)
at ChildProcess.emit (events.js:110:17)
at maybeClose (child_process.js:1015:16)
at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
Source: (StackOverflow)
I'm developing an app on Ionic Framework/cordova, and when I try "cordova run android" I get this:
"Error: No resource found that matches the given name (at value with
value @integer/google_play_services_version)"
I don't really know what is happening, I tried to set the value with a fixed value (I know is not the best solution), and the problem continues.
Thanks in advance!
Source: (StackOverflow)
I am new to mobile application development with ionic and wanted to know
I have a scenario where the login / logout buttons are located in the menu and a simple
On login and logout I need reload the page, inorder to refresh the data, however
$state.go('mainPage') takes the user back to the view without reload. the controller behind it is never invoked.
Is there a way to do clear history and reload the state in ionic ?
Source: (StackOverflow)
I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
Source: (StackOverflow)
Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
Source: (StackOverflow)
I want to use ionic with material design. I am stuck between using ionic directives with custom css and angular-material
I have read that using ionic directives we get lot of efficient features like
App data is remembered with UI-router, even after navigating to other view and coming back to the page
Ionic list items are rendered only upto display height and reused when scrolling down or up
and a lot of performance improvements.
But, if i use ionic directives they don't have material design.
If i use angular-material i will not have these performance improvements, and extra features needed for a mobile application.
Angular-material directives are like
<md-list>
<md-item ng-repeat="item in items">
Hello, {{item}}!
</md-item>
</md-list>
Ionic directives are like
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
Looks like Ionic is funding angular-material project development, then why is angular-material not compatible to use with ionic?
How can i use angular-material components without loosing the performance improvements and features of ionic?
OR
is there a better idea for using material design with ionic?
Source: (StackOverflow)
First off, I'm no pro.
In my quest to become a better developer I am trying to understand what is needed and how to accomplish creating a sign-up/login for an Ionic-Framework app.
Most of the single-page-applications (SPAs) handle authentication on a node server that is also serving up the HTML for the client. In my case the phone itself will be serving up the HTML so I am guessing I may be going up against some CORs issues.
I understand that the Ionic-Framework uses states and based angular-client-side-auth repo I should be authenticating whenever I am changing states in my app.
I have an initial app setup but now I am kind of confused where to go from here.
The tools I have at my disposal:
- Node.JS Server -Thanks DigitalOcean (Should I be using this as a proxy to my DB?)
- CouchDB server (Full stack here we come)
Questions of mine:
- What is the standard approach for authenticating when using hybrid apps?
- Should I be using Node.JS as a proxy to the database?
- Should I skip node.js and authenticate directly with the CouchDB server? (I've heard of this)
- Am I going about this all the wrong way?
- What are my potential road-blocks?
- How does CORS work with hybrid applications?
- Anything I'm missing?
Thanks for helping me become a better developer.
Source: (StackOverflow)
Has anyone integrated meteor with mobile front-end frameworks?
In making mobile html5 apps look "more native" there are a number of CSS/front-end frameworks. eg:
and more. In comparison to plain Bootstrap, the main benefits are:
- preloading content
- smooth full-screen page navigation
- mobile widgets with "native look" for ios/android
But these frameworks often have use their own MVC model, for example pre-loading content into offscreen DIVs and doing full-screen transitions. they often use an internal router or Pushstate which would conflict with Meteor/IronRouter. And ionic for example depends on angular...
Has anyone had success with this type of integration? Any leads appreciated.
Source: (StackOverflow)
I just updated cordova + ionic in my app, after that i installed successfully Android-SDK v22 via Android SDK manager.
But after the running command:
cordova build android
I always get the following message:
Running command: /Users/peter/workspace/myapp/platforms/android/cordova/build
[Error: Please install Android target: "android-21".
Hint: Open the SDK manager by running: /Users/peter/adt-bundle-mac/sdk/tools/android
You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
ERROR building one of the platforms: Error: /Users/peter/workspace/myapp/platforms/android/cordova/build: Command failed with exit code 2
You may not have the required environment or OS to build this project
Error: /Users/peter/workspace/myapp/platforms/android/cordova/build: Command failed with exit code 2
at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:131:23)
at ChildProcess.emit (events.js:110:17)
at maybeClose (child_process.js:1008:16)
at Process.ChildProcess._handle.onexit (child_process.js:1080:5)
I tried also
cordova platform rm android
cordova platform add android
But with the same result:
I tried to find a few hours any working solution, but with luck.
Thanks for any advice.
System information:
OS: Mac OS X Yosemite
Node Version: v0.12.0
Cordova CLI: 4.3.0
Ionic Version: 0.9.27
Ionic CLI Version: 1.3.18
Xcode version: Xcode 6.2 Build version 6C131e
ios-sim version: 3.1.1
ios-deploy version: 1.4.0
Source: (StackOverflow)
I am using ionic framework. I'm trying to set up a way to receive a url from another app. Like, you are in browser, click share, and send the link to another app (my app). I found this cordova plugin, and have integrated it in my app. But this is pulgin for Android. I need same functionality in IOS.
Any idea which plugin i need to use for ios
Steps taken by me for Android
1) cordova plugin add git://github.com/Initsogar/cordova-webintent.git
2) Checked config.xml file and found code for webintent
<intent-filter>
<action android:name="android.intent.action.SEND" />
<category android:name="android.intent.category.DEFAULT" />
<data android:mimeType="text/plain" />
</intent-filter>
And app.js code
if (window.plugins && window.plugins.webintent) {
window.plugins.webintent.getUri(function(url) {
alert("getUri url:"+url);
});
}
Any suggestions for the same functionally in ios ?
Thank you
Source: (StackOverflow)
I'm building an app with angular+ionic that uses a classic three-button menu at the bottom with three ion-tabs in it. When a user clicks a tab, that template opens through ui-router.
I have states like this:
$stateProvider
.state('other', {
url: "/other",
abstract: true,
templateUrl: "templates/other/other.html"
})
In the template I do something like:
<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>
I'm aware that I can write the doSomething() function in my controller and just call it manually there. That gives me the same problem though. I can't seem to figure out how to call the doSomething() function more than once, whenever somebody opens that view.
Right now, the doSomething() function gets called just fine, but only the first time that view/tab gets opened by the user. I'd like to call a function (to update geolocation) whenever a user opens that view or tab.
What would be a correct way to implement that?
Thanks for helping out !
Source: (StackOverflow)
Ideally, when I click on the button (which is in the Ionic navbar at the top), it should bring me to another page. However its not working. Upon click, the nav bar buttons all disappears.
When I used dummy codes, it works; the alert appears.
But when I swap it to the actual code, it fails to work.
I've got a feeling somethings wrong with the controller codes and how the URL or view is referred to. But testing with href and ui-sref also fails to yield anything. Google Devt Tools (JS console) and Batarang also shows nothing.
Could someone show me the way please?
dummy html code
<button class="button button-icon ion-compose" ng-click="create()"></button>
dummy controller code in js file
$scope.create = function() {
alert("working");
};
actual html code (I tried all 4 versions)
<button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
<button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
<button class="button button-icon ion-compose" rel='nofollow' href="/tab/newpost"></button>
<button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button>
The controller file (the Post and Auth dependencies work ok). When I try to put the URL in both the .go() and function(), the app fails.
app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
$scope.post = {url: 'http://', title: ''};
$scope.create = function() {
/* $location.path('/tab/newpost'); */ /* this variant doesnt work */
$state.go("/tab/newpost");
};
});
Extracts of the state js file
.state('tab.newpost', {
url: '/newpost',
views: {
'tab-newpost':{
templateUrl: 'templates/tab-newpost.html',
controller: 'NewCtrl'
}
}
});
$urlRouterProvider.otherwise('/auth/login');
Source: (StackOverflow)
The Ionic framework is pretty great stuff. I was able to successfully build an app with some Angular code I have been working on, but I can't find an answer to the simple question of how to rename the app that gets generated. The output app is always called HelloCordova and there doesn't seem to be any documentation on how to change the name of the app. If I start manually digging through the project directory replacing HelloCordova, I end up with an app that won't run. Surely, people have solved this before.
Source: (StackOverflow)
I want to start developing a mobile hybrid app using angularjs, css3 and html5. Was searching for a framework and found these two. Both are looking very nice however I was not able to get a good comparison between both of them. Can anyone please list down pros and cons for both.
A comparison between them in terms of scalable, out of the box components, speed and compatibility with Angular and devices targeted will be very helpful
Source: (StackOverflow)