Angular ui-select breaks after minifying - angularjs

I currently need to maintain an angular.js 1.5 application which uses angular-ui-select 0.19.8.
The problem I'm having is, that the ui-select somehow breaks when packaging the app.
When running with grunt serve, this part:
<ui-select mandatory-field-marker
multiple ng-required="true"
ng-model="some.periods">
<ui-select-match placeholder="Select some periods...">
{{$item | period}}
</ui-select-match>
<ui-select-choices
repeat="period in formCtrl.periods">
<div ng-bind-html="period | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
results in this output:
When running the packaged app, it looks like this:
It's not just a style problem, the broken input field doesn't allow more than 10 elements before it becomes unclickable due to shifting into the next component.
The packaging is done with grunt and as far as I can see, those are the steps used to minify the code:
useminPrepare
concat
ngAnnotate
imagemin
autoprefixer
cssmin
usemin
htmlmin
I've found some workarounds, like downgrading ui-select and adding matching classes to <ui-select> and <ui-select-choices> but none of them worked.
The ui-select dependency pulled by bower seems to be minified already:
Update: This seems to be a problem with grunt and/or bower.
After reconfiguring the Apache hosting the website, I've reached the error, that the vendor.min.css is missing.
I've found the part in the (generated by bower) index.html head where it says:
<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
however, only the bootstrap.min.css and main.min.css are packaged into my dist:
Still don't know the reason.

I've fixed it but not very elegantly.
The problem was, that the select.css and ng-tags-input.css where not packaged into a vendor.min.css, so they where missing after deployment.
I could not identify which grunt-task should build the vendor.min.css, but at least I know that whoever should do it, didnt'.
So in the index.html I've changed the part
<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
to
<!-- build:css(.) styles/select.min.css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<!-- endbuild -->
<!-- build:css(.) styles/ng-tags-input.min.css -->
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
which now works.
This will be a problem, if there are any more css-files from bower_components in the future, but the application I'm talking about is going to be put out of service next year, so it doesn't matter.

Related

AngularJS app initializes but doesn't work

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>

Why CakePHP Bootstrap files in 'app/webroot' is not loaded from add.ctp file?

In my CakePHP project I've put all my css and js files in 'app/webroot' folder and index.ctp is loaded with all designs. But add.ctp and edit.ctp files are load without css/js files in '../webroot'.
$this->layout = 'newlayout';
I put this code in my andex(), add() and edit() action in 'controller' file.
My newlayout.ctp file code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title_for_layout; ?></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.4 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>POS</b> App</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
<?php echo $this->Session->flash(); ?>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<?php echo $this->fetch('content'); ?>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2015 .</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<div class='control-sidebar-bg'></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js" type="text/javascript"></script>
</body>
</html>
I've checked the request response for 'add' pageload and i got this response -
The action bootstrap is not defined in controller
and each request for css and js file got this kind of error response!
I've no clue!
You should use CakePHP Helper to include assets file(css, js etc). Let's see how to use include css files?
<head>
<?php echo $this->Html->css(array('forms', 'tables', 'menu')); ?>
// forms, tables, menu are the css file thoese are locate under app/webroot/css directory
</head>
Look HtmlHelper::css on CakePHP 2.x
The error you have described,
The action bootstrap is not defined in controller
...is telling you that the action/route you are attempting to load, bootstrap(), is not a function found in that controller.
The above issue is likely unrelated to loading bootstrap. Double-check the route/URL you are attempting to access. If it is http://example.com/controller/bootstrap then the function (action) bootstrap() must be defined in that controller.
Once that is dealt with, you can find a working example of using Twitter Bootstrap with CakePHP in the source of this app on GitHub, which powers stats.chrisvogt.me.
In this example I am using a hosted version of Bootstrap, but in the line below it you'll find an extension called Jasny Bootstrap that is located in ./app/webroot/components/jasny-bootstrap/[...]jasny-bootstrap.min.css.
Also, in case you don't want to repeatedly define $this->layout in each of those actions: you can define a default custom layout for all actions using beforeFilter() in the AppController like so, or you can do this in individual controllers if you wish.
While not required, I'm a fan of using Bower to manage my front-end components (such as Bootstrap). Should you feel like looking into this, make sure to define a custom install directory somewhere under ./webroot.

yeoman based angular app integration with laravel API in one domain

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>

Mixed-Mode x-compile and microload markup is currently unsupported (EXTJS 4.1.1, sencha cmd 4.0)

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.

Ext.ux.grid.GridSummary() is not a constructor

I found several examples how to use Ext.ux.grid.GridSummary() in GridPanel, main problem here is if I try to summary plugin on this way:
plugins: new Ext.ux.grid.GridSummary(),
I get JS error that Ext.ux.grid.GridSummary() is not a constructor?!
Any idea about this or hint?
Did you include the correct JavaScript file? The ux-namespace is not part of the standard ExtJS distribution and must be included manually. You must include
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/path/to/resources/css/ext-all.css" />
<!-- extensions -->
<link rel="stylesheet" type="text/css" href="/path/to/GroupSummary.css" />
...
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/path/to/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/path/to/ext-all.js"></script>
<!-- extensions -->
<script type="text/javascript" src="/path/to/GroupSummary.js"></script>
EDIT:
Just noticed: shouldn't it be Ext.ux.grid.GroupSummary?

Resources