I'm working on AngularJS single page app which is designed to hit API endpoint writing in laravel 5. The API developed by other team. The project run smooth until the design change (by client request). They want to put the Angular app in the same domain with Laravel. I've found many articles to help me integrate angular with laravel. The most visible solution I found is user Alias comment in laracast.
I developed the angular app with Yeoman gulp-angular generator (it does scaffolding, minify, and serve the app on browser. so I can focus on writing app instead of importing dependencies files and refreshing browser ).
Now the app already 80% complete, i have to integrate my dev folder with laravel. In other word i have to develop the rest of the app inside laravel realm. I don't want to get rid the yeoman gulp-angular generator from my workflow because it's really helpful. But in the other hand i need to make laravel serve my app when i hit a url (for example : laravelapp/my/app).
So i did the following things (based on user alias comment on laracast):
I put my dev folder inside laravel public/myapp folder
I create a laravel route to return a my app view.
I create a laravel view that should serve my app.
But how can I call my app from the laravel view? The app already have its own index.html file (provided by yeoman gulp-angular generator) and it's already contain its own angular ui-view element, and some cryptic code to inject my app dependencies out of the box. any advice guys? Thank you.
My directory structure:
LaravelAPI
|
---- Resources
| |----------views
| |--------MyApp.php // laravel view for myapp
|
|----Public
|----------index.php
|----------pos // this is my app
|------bower_components, gulp, etc // generated by yeoman
|------ ....
|------src // my src
|----- index.html // this file is what i want to be called from laravel view
|------ dist // minified/production version of my app
My Laravel view (MyApp.php)
The following is the laravel view i created by copy and paste index.html from myapp. The index html i pasted here is the after compiled version of yeoman gulp-angular generator. My application name is pos, so i prefixed all dependencies with it.
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>fortunixPos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="pos/bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="pos/src/app/index.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body><script type='text/javascript' id="__bs_script__">//<![CDATA[
// document.write("<script async src='/browser-sync/browser-sync-client.1.7.3.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
// (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
// function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
// e=o.createElement(i);r=o.getElementsByTagName(i)[0];
// e.src='//www.google-analytics.com/analytics.js';
// r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
// ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="pos/bower_components/jquery/dist/jquery.js"></script>
<script src="pos/bower_components/angular/angular.js"></script>
<script src="pos/bower_components/angular-animate/angular-animate.js"></script>
<script src="pos/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="pos/bower_components/angular-touch/angular-touch.js"></script>
<script src="pos/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="pos/bower_components/lodash/dist/lodash.compat.js"></script>
<script src="pos/bower_components/restangular/dist/restangular.js"></script>
<script src="pos/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="pos/bower_components/angular-aria/angular-aria.js"></script>
<script src="pos/bower_components/hammerjs/hammer.js"></script>
<script src="pos/bower_components/angular-material/angular-material.js"></script>
<script src="pos/bower_components/angular-utils-pagination/dirPagination.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<script src="pos/src/app/index.js"></script>
<script src="pos/src/components/navbar/navbar.controller.js"></script>
<script src="pos/src/app/pos/terminalSession.js"></script>
<script src="pos/src/app/pos/shoppingCart.js"></script>
<script src="pos/src/app/pos/pos.controller.js"></script>
<script src="pos/src/app/pos/payment.js"></script>
<script src="pos/src/app/pos/itemlist.js"></script>
<script src="pos/src/app/pos/initCash.controller.js"></script>
<script src="pos/src/app/main/main.controller.js"></script>
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
And this is the actual HTML from yeoman gulp-angular generator which is do nothing when i put it in laravel view:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>fortunixPos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automaticaly insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
// (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
// function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
// e=o.createElement(i);r=o.getElementsByTagName(i)[0];
// e.src='//www.google-analytics.com/analytics.js';
// r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
// ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp wiredep` to automaticaly populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automaticaly insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
This might be late a little bit. Put all of your resources (*.html) generated by yeoman in laravel partial views. Create the angular routes like following then put your partial in custom template. It worked for me.
myPartial.blade.php
<h1>Home</h1>
<h3>{{message}}</h3>
your angular route file:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
});
your app.blade.php :
<body>
<script type="text/ng-template" id="pages/home.html">
#include('myPartial')
</script>
Home
</body>
Related
I have created a Dynamic web project in eclipse IDE. And converted it to angular JS project. I have successfully installed and configured Apache Tomcat 9.0 and I am able to access tomcat on localhost:8080
Below shown is my project directory structure...
When I am trying to run the application on apache server,I am getting error as shown below.........
Below is my code.
controller.js:
var app = angular.module("myApp", [" "]);
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-view></div>
<h6>Sample Angular JS App</h6>
</body>
</html>
I am trying to create a progressive web app using angular 1.5 with help of gulp.
I have created a service worker(sw.js) using sw-precache module in npm.
this is my index.html
<!doctype html>
<html ng-app="ngapp">
<head>
<meta charset="utf-8">
<title>sfxInstantPay</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#CA3F39">
<link rel="manifest" type="text/css" href="app/manifest.json">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<script type="text/javascript">
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('scripts/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view="app" layout-fill></div>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
I am using UI router to make route changes . my router.js is
(function() {
'use strict';
angular
.module('ngapp')
.config(routerConfig);
/** #ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/index.html',
views:{
'app#':{
templateUrl: 'app/dashboard/xx/views/xx.html',
controller: 'xxController',
controllerAs: 'xCtrl'
}
}
});
$urlRouterProvider.otherwise('/index.html');
}
})();
and my manifest.json is
{
"name": "Hello Mobile",
"icons": [
{
"src": "assets/images/angular.png",
"sizes": "100x100",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#e0e0e0"
}
in gulp build file I am generating sw.js file by below code
gulp.task('generate-service-worker-dist', function(callback) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = path.join(conf.paths.dist,'');
swPrecache.write(path.join(rootDir+'/scripts', 'sw.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir
}, callback);
});
After I ran gulp buld application is running normal service worker is created and in Application tab developer console I can see service worker activated and running. but When I goto offline and refresh the page it is not opening
Please tell me where is my mistake.
The reason is because the sw can't fetch the request the browser is asking for.
Verify the following:
Place the sw in the same scope as the main page (index.html), probably this is the error, because the sw scope is http://localhost:3000/scripts and the main request is http://localhost:3000/index.html
Look in the cache storage (chrome) if there is an entry for your main request, e.g. http://locahost:3000/ or http://locahost:3000/index.html depending on your main entry point.
This two points should be true in order to the application can go offline.
I have started a pet project with AngularJS and Gulp. The code is available on github.
After building the project my dist folder looks like this:
js/
--vendor.js
--app.js
index.html
When I run browserSync in dist folder, everything seems to work fine: the paths are injected correctly, angular global variable is available in chrome console, and ng-app directive is on its place. However, if I try to create a controller or config an app, the scripts inside the functions don't run.
That's the first time when I actually wrote gulpfile.js entirely by myself, based on various tutorials. I suspect that the problem may be in improper gulp configuration, but I'm not sure.
in index.html change ng-app to ng-app="app" add browser-sync in dependencies. other than that everything is fine.
Firstly, you need to specify module name in ngApp directive. This will fix problem that config and run blocks are not running.
Also you have to add ngController directive somewhere. For example on body html tag.
Result:
Example of final html code:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>FinControl</title>
<!-- build:css css/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css css/main.css -->
<!-- inject:css -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body ng-controller="testCtrl" layout="column" layout-fill>
<input type="text" ng-model="textVal">
<span>{{textval}}</span>
</body>
<!-- build:js js/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- endbuild -->
</html>
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
I am currently using EXTJS 4.1.1(GPL) and sencha cmd 4.0. I am trying to build my application into production as described in guides. Unfortunately I have got an error saying 'Mixed-Mode x-compile and microload markup is currently unsupported'.
Any help how to build into production using extjs 4.1.1 is appreciated.
Thanks
Having single quotes in file references in the index.html file causes this problem. Change this:
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel='stylesheet' href='bootstrap.css'>
<script src='ext/ext-all.js'></script>
<script src='bootstrap.js'></script>
<!-- </x-bootstrap> -->
<script src='app.js'></script>
<!-- </x-compile> -->
to
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-all.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->
This fixed the problem for me.