How to integrate AngularJS (npm, gulp, bower) into CodeIgniter - angularjs

I have an AngularJS project located here: https://github.com/M4i4/Frello2
It is a super simple project regarding the content, but it has quite a few things in it: npm, gulp and bower.
My question is:
How to insert this project into a CodeIgniter environment (that is a CodeIgniter folder with its application, system, .htaccess and index.php folders/documents).
Does it makes sense to do it?
I'm running CodeIgniter on XAMPP, but my frello2 AngularJS project is run on a different server: 48080 - How to combine the two?
In my frello2 AngularJS project the primary index.html is inside dist folder while in CodeIgniter you specify the default view by setting the default controller in the config file and then calling index function from that controller - So how to combine the two? Which index file will be the primary one?

Related

Where to put ng1 templates in an angular hybrid application built by angular-cli?

I'm trying to build an angular hybrid application out of a angular.js application. I'm following the official documentation (https://angular.io/guide/upgrade). I reached and completed this step: https://angular.io/guide/upgrade#bootstrapping-hybrid-applications.
I'm using angular ui-router 0.3.1 to handle the routing of my application. Therefore, using the config function on my main module, and the $stateProvider service, I've mapped each route to an angular.js controller and a template specified by the templateUrl parameter.
My application seems to startup correctly but the templates cannot be loaded because they cannot be found (404 error). This is normal because they are not imported in the dist folder where my application is built when I use the ng build angular-cli command line.
How can I configure my application so that my angular.js html templates get copied in the dist folder when my angluar application is built by angular-cli?
Thanks in advance!
So actually it appears my question was a duplicate of that one: Angular CLI with Hybrid app ng-build.
The idea is to use the assets array from angular-cli.json. Glob enables to select recursively all html files from the folder of your choice and to put them in a subfolder of dist:
"asssets": [{"glob": "**/*.html", "input": "../src-ng1", "output": "./src-ng1"}]

Grails 3.0 static html in run-app

similar questions have been asked before, regarding grails 2(.3, .4). I find it strange that i could not find a way to do this, as it seems a standard use-case to me.
I simply want to serve html-pages, including their linked .css and .js (angular and jquery content) when i run grails run-app.
I want to check if my http-calls are handeled correctly on both sides - without needing to deploy a .war and configuring a database.
afaik grails run-app simply starts a jetty/tomcat - both of which can obviously serve .html pages. What do i have to do to make the grails development-tooling deploy my files?
I need to make http-requests,
so using a different Server would violate JS-SOP,
while deploying the .war would greatly slow down the development process
I've so far only found clunky jsonp, proxy, .war deployment solutions, or solutions for grails 2.x
I tried placing the files literally everywhere in the projects' structure (/src/main, /src/main/resources, /src/main/public, the assets folder and its subfolders, created web-app directories in every subdirectory, the Init, domain, conf directories - you name it)
Add the index.html to src/main/resources/public
Then add this to UrlMappings.groovy:
"/"(redirect:"/index.html")
For grails >= 3.0.12
Location of static resources
In order to resolve an issue around how POST requests are treated for
REST applications on non-existent resources, static resources located
in src/main/resources/public are now resolved under the /static/** URI
by default, instead of the base URI /**. If you wish to restore the
previous behaviour add the following configuration:
grails.resources.pattern = '/**'
https://github.com/grails/grails-core/releases/tag/v3.0.12
Contrary to the accepted answer, you don't need a redirect. I have made able to make this work with the following config:
UrlMappings.groovy
"/"(uri: "/index.html")
application.yml
grails:
resources:
pattern: '/**'
Finally, you just need to have your index.html file located under src/main/webapp

How to use Laravel 4 localization methods in Angular app?

Is there a way for you to use Laravel trans() or Lang::get() method using (lang folder) in AngularJS app?
Laravel view that displays an angular view with multiple controllers.
<div ng-view></div>
I have in public_html folder all my templates for my app.
With the default structure of a Laravel app you can't access the app/lang directory. However, you could write a grunt task or a Laravel command, that process all you language files and copy the results in your public directory to make it publicly available for your Angular app.

AngularJs/Yeoman/Grunt Play Framework blank page

Today I decided to try out AngularJs with play framework, I've created a folder inside my public folder called AngularJs, in which i have generated an angular app with yeoman.
After generating the sources with grunt build, in the route folder of play, I've put:
GET / controllers.Assets.at(path="/public/javascripts/angularJs/src/dist", file="index.html")
Now the problem I am facing is that the index page is well retrieved but Angular doesn't load the templates.
Anyone have a clue?
Ok now I get it after fiddling around for a moment, the problem with angularJs and Play framework, is that play must serv all the angularJS resources, so the solution to the problem, is to create routes to the angularJs dist folder in your public play application folder.
for an angularJs application created with Yeoman and generated using "grunt build", you must define these routes :
GET /scripts/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/scripts", Asset)
GET /views/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/views", Asset)

Angular JS + Laravel 4: How to compile for production mode?

So i have watched the 5 part youtube videos by David Mosher about Angular JS (vids great by the way). In the part 2 (http://www.youtube.com/watch?v=hqAyiqUs93c), it has a practical mysql database usage which I almost wanted.
I'm going to use AngularJS along with Laravel 4, but I had no idea which files I'm going to upload for the web hosting later. I'm trying to run the web app under "/public" folder in my root on localhost (localhost/public/) but the css and js points to the wrong directory (points to the root: '/css/style.css').
Another method I have tried is by copying all the files to the root and moved all files inside "public" to root. Then I navigate to "localhost/public/". All works fine in script paths, except that it doesn't seemed to do any connection to the database (either the laravel or angular failed).
Is there any proper way to do this for practical use (without using php artisan serve or grunt run or lineman run on the server)? Which files I should upload later?
EDIT: the reason is my web hosting doesn't allow me to install nginx or run code remotely using putty, so I need a manual way to do this. Thanks.
First install latest laravel in your localhost. See doc.
Assuming you have completed composer install command.
Then move your all public folder contents to the project root.
Next change the line 21 in index.php from,
require __DIR__.'/../bootstrap/autoload.php';
to
require __DIR__.'/bootstrap/autoload.php';
and line 35 content
$app = require_once __DIR__.'/../bootstrap/start.php';
to
$app = require_once __DIR__.'/bootstrap/start.php';
Now you can access project without public folder.
Place your css, js and other assets folder in root like http://localhost/laravel/css
Note that the laravel blade and angular also using {{ syntax for compilation.So you need to change the laravel blade syntax to {= and =}.Otherwise you will get conflict.
To do this open vendor/laravel/framework/src/Illuminate/View/Compilers/BladeCompiler.php file and change line 45 to this
protected $contentTags = array('{=', '=}');
and line 52 to this
protected $escapedTags = array('{={', '}=}');
Now you can use {{ for angular and {= for blade.
For linking your assets, use HTMLBuilder functions, see doc here.
Now use these in blade,
{= HTML::style('css/style.css') =} // links localhost/project/css/style.css
{= HTML::script('js/jquery.js') =}
Use migrations and db seeds in localhost and make an exported copy of db for online hosting
After completing project, copy entire project content to online server and change db configuration and import database.
Directory Structure for Online
There will be a public directory for your file hosting, where you put your files in web root.
That may be htdocs or public_html and now it's your project public root.Now the directory structure will be,
-- app
-- bootstrap
-- css
-- images
-- js
-- vendor

Resources