I have just started learning Ionic and Angular.
After reading basic documentation related to Angular and Ionic, I was following the tutorial from this site to develop the sample application myself.
I am able to load the application and see the data related to playlists, but after integrating 'Angular ngResource', to fetch the live data, related to sessions - by calling Rest API mentioned in the tutorial, I am not able to load the application in the browser (Blank white screen appears).
You can refer the application code with my changes here:
https://github.com/bhushanbaviskar/Angular-Ionic.git
Thanks.
You are missing at least inclusion of the ngResource and starter.services to your app in your app.js like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngResource'])
Then in your index.html you have a lot of typos, you should replace these parts with the code below:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- Angular ngReource-->
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
There was ngResource <script type=""> should be src="" and also the services.js had a typo servcies.js which should be services.js. Services.js also was declared as type and need to be changed to src.
Related
So, my client wants me to migrate his AngularJS page to the newest Angular 8 framework.
But he also wants to add some features to the current AngularJS application.
The workflows is like:
1. Migrate AngularJS to Angular 8
2. Sill maintain the old Angular JS app when there is new stuff coming in the old code.
The app has a static header navigation. So my idea was to build the header in Angular 8 and putt the old Angular JS app to the root of Angular 8 via iframe.
So when the user clicks on the nevigation in the Angular 8 app he gets router to the correct Angular JS app which will be renderd in the iframe of the Angular 8 app.
So the idea behind this is to migrate the pages page by page but still maintain the old AngularJS app if needed.
Is this possible?
I hope somebody can help me.
Best regards
At first for migration i suggest you to use This migration guide
At second, i have worked on an application where i used both Angular Js and angular8, the only problem that i have got was with rootes, i couldn't usr routes in angular.
How did i do ?
I called the angular js and the transposed angular 8 files in the same jsp via <script></script>
This is an example of my jsp with an angular 8 application called pointe, and angulars js application called employee
<%# include file="init.jsp" %>
<link rel="stylesheet" href="/angulars/pointe/styles.css"/>
<app-root></app-root>
<script src="/angulars/pointe/runtime-es2015.js" type="module"></script>
<script src="/angulars/pointe/runtime-es5.js" nomodule defer></script>
<script src="/angulars/pointe/polyfills-es5.js" nomodule defer></script>
<script src="/angulars/pointe/polyfills-es2015.js" type="module"></script>
<script src="/angulars/pointe/scripts.js" defer></script>
<script src="/angulars/pointe/main-es2015.js" type="module"></script>
<script src="/angulars/pointe/main-es5.js" nomodule defer></script>
<script src="/angulars/employee/js/angular.js"></script>
<script src="/angulars/employee/js/app.js"></script>
I think that it also works if you load your script into an iframe,
but any ways you have to wrap all this code in a container.
And finally i do really not recommand you to do it, because i had a lot of troubles with libraries that are loaded in angular js and angular 8
I am currently trying to get AngularJS working with Node, but for some reason as soon as I move the script to a separate file, I get the error "[Error: Injector Modulerr] Failed to instantiate module due to[...]".
I have done this 50 times before and have no idea why I am facing the problem now.
In my RESTful Node API I have 2 "wild card"-routes; '/' and '/admin'.
When I am rendering a index.html in my '/'-route Angular is working fine, but when I am trying to do the same within my '/admin' I seem to get the error mentioned above.
<!-- jQuery 3.1.1 -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- AngularJS 1.5.8 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!-- App -->
<script>
var app = angular.module('rs-admin', [])
</script>
I am new in Ionic app development. I installed angular google maps using bower
bower install angularjs-google-maps
then added these ref files in index.html
<script src="lib/lodash/dist/lodash.js"></script>
<!-- ionic/angularjs js -->
<script src="cordova.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB52Z0xUP6JEX9fjr1EEQvCWgo8W4DD5CY&extension=.js"></script>
<script src="lib/angularjs-google-maps/dist/angularjs-google-maps.js"></script>
Finally added the gm module as a dependency to your AngularJS app:
angular.module('taskerApp', ['ionic', 'taskerApp.controllers', 'taskerApp.services', 'pickadate', 'gm'])
It is showing a blank screen and giving this error in console.
angularjs-google-maps.js:40 Uncaught Error: Google Maps API not available, please make sure the Google Maps library is loaded before the AngularJS Google Maps library is loaded
Please help me resolve this.
As per the docs:
Make sure to load the AngularJS library and the Google Maps API:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
Then load the AngularJS Google Maps library:
<script src="bower/angularjs-google-maps/dist/angularjs-google-maps.js"></script>
Finally add the gm module as a dependency to your AngularJS app:
angular.module('yourApp', ['gm']);
That's it! You can now start adding Google Maps directives to your
markup.
My guess is you don’t include the files in the right order.
I have a Angular UI which i deployed as a Spring Boot Web WAR file on a Jboss container (By moving all html, js, css files to /resources/static folder). I used mvn package to create the WAR file and deployed it on Jboss. Now i realized that all static resources like my app.js are loaded in http://localhost/appcontext/js/app.js.
In my angular code i just have
<body>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-messages.min.js"> </script>
<script src="https://code.angularjs.org/1.5.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cdaguerre/gmaps- utility-library/4f71018696f179acabbe445f188fc2de13f60c3e/markerwithlabel/src/markerwithlabel.js"></script>
</body>
When the code is executed, it is trying to look for app.js in http://localhost/js/app.js and doesnt find it. How do i make all static resources to load from http://localhost/appcontext?
Why don't you just call the resources specifiying their location relative to where they are?
Something like <script src="appcontext/js/app.js"></script>.
It seems that's what you need, but maybe I'm missunderstanding your problem
I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.
My index.html file is:
<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>
<div ng-controller="topicsController">
<div>{{ topics }}</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file:
var app = angular.module('discussApp', ['ngResource']);
app.controller("topicsController", function($scope, $resource, $http) {
var Topics = $resource("http://api.discussorama.com/v1/topics");
$scope.topics = Topics.query();
});
And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.
The answer was in the console log all along. The error I was receiving was:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The solution was simply to add
header("Access-Control-Allow-Origin: *");
to my Slim API's index.php file. I guess my shared host isn't configured for CORS.