i've used and loved ionic in many mobile apps, but now as i'm building a web client for my app, i understand that ionic was not meant for desktop apps but my question is can i use its component in a regular angularjs - bootstrap 3 website ?
components i'm after are mostly the
pull to refresh and infinite scroll.
swipe list to show option buttons.
modals
i tried to start a new ionic project and add my custom css and js and just copy out www content
ionic start blank
but faced a problem as ionic keep changing my dom, and applying its own css that override mine. so i only want to extract the components and use regular angularjs.
is it possible ?
It is possible, as ionic is just AngularJS directives, optimized for mobile.
It had an easy way to add cordova items (ngCordova) but if you don't need those components and whish to build only a Browser project, just don't had that js file.
Even more, by doing ionic serve, you are indeed running your project into your browser.
Concerning your CSS issue, better paste your code into a codepen or jsfiddle to let us understand your issue.
Related
Can one use the Ionic framework with plain Javascript (aka. without the recommended frameworks like react, angular or vue)?
If yes, how?
yes, you can build Ionic apps using VanillaJS or take advantage of Vue, React or Angular or Stencil
all components documentation available for JavaScript
it's recommended to use React or Vue,... for large scale application but if you want use plain JS it's available.
From Ionic framework documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag
In short: Yes, in the same as way you can use wordpress.
According to the official documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress.
My application was in IBM WebSphere portal, where we have a centralized theme for all the portlets. We build individual portlets with the specific features which are then installed from a page into the portal like as shown below.
So altogether we build a portal with lots of portlets (individual web application). In the portal we creates pages and drag and drop each of these portlets as per the requirements.
Now the requirement was that we are moving everything to Micro service Architecture with Angular4 as the front-end. Currently I am having an angular4 application having many UI components and features. I am posting this question to get some ideas or possibility whether it is possible to create a portal like IBM WebSphere/ Liferay in Angular 4 with having the following basic features:
User/Team can create separate individual angular4 application, build and will be able to install/uninstall within the main application like porltets in portal (IBM WebSphere).
User will be able to view all the installed Angular4 application and can create pages, drag and drop those application within a newly created page.
Each separate Angular4 application (like portlets) installed will be using the main application theme.
Can anyone tell me whether this is doable. Do we have any framework setup in Angular4
One of the possible ways I can think of is using webpack(or any other module bundler) to handle the various angular application.
You can check out my answer here to get a brief overview of how you can configure webpack.
In the end, Angular compile to javascript only. So, It will be possible. But the effort needed to maintain and test the overall application might be huge.
When re-designing a system, it is best to think about the problem you are trying to solve and solve for that use case. It feels like you're trying to recreate the same bad interface with Angular. The code may be new, but the user interface problems will still be there.
I would recommend ditching the portlet idea and creating 1 app with many modules. Angular was designed to be very modular so different teams can work on separate modules. You could then have some sort of settings page where you can turn the modules on and off.
We would like to upgrade the web application built with Java script and Jquery to Angular 2. The application is huge and we cannot convert it at one shot, so we would like to convert it in a step by step basis. I have a couple of questions
What are options to convert a small part of web application to Angular 2.
From the current web application(built with simple java script / jquery) we would like to have a link that would open a modal window built in Angular 2. The modal window will have a series of screens to capture user input. We just want to create this part alone in Angular 2 as a first step. Is this possible?
There is a big difference between jQuery and Angular2. jQuery is a library to mainly manipulate the DOM. Whereas Angular2 is a complete framework. When I say complete framework, it has features like routing. So it is easy to build single page application with Angular2 without much external dependency.
To move to Angular2 you might need changes in the server-side also, like exposing APIs, the build system to support Angular2.
So instead of moving a modal window to angular2, a better option might to go with a microframework based approach, were you identify a small independent set of functionalities(module) and move it to Angular2
AngularJS can be used in small parts of your main application. No problems there. You can write your modal logic using angular and you will be fine. You can always add new features in your app using angular, going forward.
However when you say you want to upgrade your existing code, more factors will come into play and a lot will depend on the existing architecture of your app.
The most significant difference is that most jQuery apps works around DOM manipulation. The code you write for jQuery is always trying to manipulate your DOM.
But in angular this process works differently. If you code correctly you will rarely need to manipulate DOM in your angular project.
So I would not recommend to go for a partial upgrade where you have to mess with your application's architecture. But certainly you can build new features using Angular.
I would love to be able to use Ionic's collect-repeat directive, however the entire Ionic bundle is not suitable for the solution I am developing.
I am trying to strip the code I need to implement it in a web app, however it's looking like an awful lot of code to get one directive working.
Has anyone come across a similar solution without using Ionic or has successfully implemented collect-repeat from Ionic without using the entire bundle?
Any advice would be great!
Thanks
I am using a certain Bootstrap Theme purchased from ThemeForest for building a Web Application Project.
To be specific the theme referred to is - http://themeforest.net/item/modern-responsive-admin-dashboard-template/11004840
I have already completed the Frontend using that theme. Now when I start adding in the backend and integrating, I feel it might be more effective to use AngularJS than use Jquery to manipulate the DOM and the objects.
Can I just start using AngularJS for the dom manipulations in the same project? Or will I be facing any problems? I would like to check if there will be any conflicts arising out of me using both together ?
If there are any tutorials, please refer that to me. Thanks
Angular and bootstrap are 100% compatible. Just add the script tag for angular into your bootstrap project and you have a hybrid angular bootstrap project.
You will have no problems at all. If you're looking for examples of open source AngularJS projects which used Bootstrap, there are multitudes. Here's one of my own over on Github: https://github.com/JohnMunsch/PaperQuik
Note: In addition to being able to just use the two together, there's also projects like Angular Strap which provide Angular directives to wrap the various components (both JavaScript and not) provided by Bootstrap and make it easier to integrate them into your AngularJS code.