I would like to migrate my app to Onsen2 .
Currently my app us in onsen UI1.
What is the best way / process to migrate the app?
Taken from here: https://onsen.io/2/index.html
Migration from Onsen UI 1.x
Although Onsen UI 2.0 is no longer AngularJS dependent, we provide AngularJS binding to supplement AnuglarJS cool features. To include ng-* bindings, please include “angular-onsenui.js" after loading onsenui.js.
<script src="onsenui.js"></script>
<script src="angular.js"></script>
<script src="angular-onsenui.js"></script>
Related
I want to crawl my SPA built by the Vue framework (Relatively same as React framework). However, I see that the content is not rendered while crawling. The result is:
<!doctype html>
<HTML>
<body>
<div id=app>
</div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.60c471696de493d48a1c.js></script>
<script type=text/javascript src=/static/js/app.335a9e9866cb7dc6a517.js></script>
</body>
</html>
Are the component-based javascript frameworks anti crawling? How can I make the component to be rendered by the crawler?
I'm using Abot framework for crawling propose
All Abot does is send a request to the target website, parse the data, and pass it back to you. As you probably know, frameworks like React or Vue are 100% JavaScript based, meaning no data will be rendered unless you run the JavaScript. So the solution here is to launch a headless browser or another DOM engine and scrape the data.
Several engines you could use are Selenium (browser automation framework available in Python and some other languages), Puppeteer (Chromium-based web-scraper in NodeJS), or a DOM engine like JSDOM.
Moral of the story is: if you want to see result rendered by JavaScript you must execute the JavaScript inside a DOM.
i am just using an angular component library called gridster in my large angularjs application. for that i made my app hybrid, as in future we are planning to upgrade our application to be on completely on angular. i am using 1.4.3 angularjs and 6.0 angular version.
after making my application it has become very slow.
Any suggestion please.
most of the module and directives is angularjs, i have followed standard approach of upgrade provided in angular documentation. downgraded angular gridster component.
I'm a bit confused what the difference is between AngularJS Material (https://material.angularjs.org) versus Angular Material (https://material.angular.io/)?
AngularJS Material is made for Angular JS 1.x
whereas Angular Material is made for Angular v2+
according to https://material.angularjs.org/ , that say:
AngularJS Material is an implementation of Google's Material Design Specification (2014-2017). This project provides a set of reusable, well-tested, and accessible UI components for AngularJS developers.
and
The latest update to Material Design (video playlist) was announced at Google I/O in May, 2018 (recap blog post). For an implementation of this new Material Design Specification, please see the Angular Material project which is built for Angular developers.
#dave Hi,
for AngularJS Material, There is an third party library available called "md-steppers". We are using this one for FORM filling and Submission. Please have a look in below JSFIDDLE demo link and GITHUB link.
Visit: https://jsfiddle.net/ipiz/vcdbuyru/2/
Visit: https://github.com/ipiz/md-steppers
I have currently started trying my hand at client side development with bootstrap and angularjs. I've been given a task to make a more or less isolated feature of our website (an angularjs application) and have been working on it but noticed that the bootstrap functions I learned were not working.
Upon inspection I found that our app is using bootstrap 2.3.x and I want to use features of bootstrap 3.0
Because bootstrap has made quite a huge change in its new version, the main web app coders do not want to switch over so that is not an option. (at least not yet).
My question: is there a way I could have my isolated view use bootstrap 3 while the rest of the app uses bootstrap 2? I really don't want to take the time to learn deprecated technology so any advice would be greatly appreciated.
If you are creating an isolated feature on your site, will it be embed in one of the pages or is it a section in its own right? Your app pages can use bootstrap 3.x without it causing problems on other pages if the script links are only in the header of your app pages and not added to other pages in the site. The link will not leak bootstrap 3.x to previous code that does not have these script tags in the header. If that is the case, you can go ahead and use bootstrap 3.x and angular.js and should have no issues.
I would stick your app in a separate folder on the website and design away with the more up-to-date tools.
I'll use some buzzwords here:
Shadow DOM
Web Components
Polymer
Scoped styling is one of the many features of Shadow DOM. Styles defined inside the shadow tree don’t leak out and page styles don’t bleed in.
https://www.polymer-project.org/articles/styling-elements.html
http://plnkr.co/edit/hypZyjc4yFxIubfOn31N?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
<link rel="import" href="your-component.html">
</head>
<body>
<h1>Bootstrap 3.3.1</h1>
<your-component></your-component>
</body>
</html>
your-component.html
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="your-component">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<template>
<h1>Bootstrap 2.3.2</h1>
</template>
<script>
Polymer({});
</script>
</polymer-element>
I am looking for some guidance with creating an AngularJs multi-page app served by a Laravel Backend. All web app tutorials on the net point to creating SPAs and I am just getting started with Angular - so please go easy on me.
ProductPage example - http://example.com/products/widget
<html data-ng-app='ExampleApp'>
<head>
</head>
<body data-ng-controller='ProductController'>
// ProductPage Content Served by laravel with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/ProductController.js"></script>
</body>
</html>
CartPage Example - http://example.com/cart
<html>
<head>
</head>
<body data-ng-controller='CartController'>
// CartPage Content Served by web-server with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/CartController.js"></script>
</body>
</html>
So in the above examples, I have created two pages, which are served by the web server with pretty much all static content. But the pages have been marked up with angular tags. On each static page, I have referenced a different AngularJS controller.
Is this the right way of tackling the problem or should I be allowing app.js to load up the controllers / inject the dependencies?
Also, any guidance on sharing data between controllers in this multi-page app and links to decent resources / examples would be really helpful. e.g Would I need to pass e.g. Items added to shopping cart to an api from the product page, then query this api again to retrieve the cart contents?
You should include the ngRoute module and let AngularJS load the controllers for you. Please refer to AngularJS docs to find out how to work with routings.
As for sharing data between controllers, services are what you're looking for. Creating a service is as easy as this:
app.factory("ServiceName", [function() {
return {
somevar: "foo"
};
}]);
Then, in your controllers, you inject the service like this:
app.controller("ContactCtrl", ["$scope", "ServiceName", function($scope, svc) {
$scope.somevar = svc.somevar;
}]);
The service's state is retained for as long as you don't cause a physical page reload (which is why you should use ngRoute to load your controllers).
Here you can use ngroute directive with assigning controller name dynamically.
If we use ngroute , then ngroute $scope is parent scope for both pages(html views).
Form this scope you can easily pass data from one controller to other controller.
Probably the best boilerplate/template system that I have found is Yeoman. It has a large number of great Angular templates that you can use as a starting point, and also supports automatically creating models, views, etc. from subtemplates of the main template that you choose.
Take a look at the Yeoman Angular generator, it's one of the more well-maintained angular templates that will give you a good feel for the capabilities of using a Yeoman generator.
I've worked with ngSeed for the past two years now. When it got updated to use $state it felt like a decent way to do larger apps with Angular.
Things to remember:
modularize around functionals (not layers like most tutorials do),
keep your modules small and clean,
never use $rootScope,
encapsulate shared state in a service,
don't broadcast events, but watch state,
…
Check out fountainjs. They have good boilerplates for different UI technologies.
I put a basic angular multipage boilerplate on github. It covers a working example of ngRoute and the loading of html partials and images. There's also an angular button in one of the partials that logs a message to the console. Hope it helps
https://github.com/PrimeLens/angular-multipage-boilerplate
edit: there is a controller that encompasses all pages to hold data that you might want to pass from page to page.