I recently started to digg in to angularjs, and would help me a lot with my new project, but im stucked with the view structure part.
So what i dont really understand is, how to build it up.
Is it okay if i create html angular partials and not creating laravel views, so laravel would only handle the database instert fecth edit delete, and the angular partial views would handle the result show, and forms.
So my buold up would look like this.
My assets folder
/css
/img
/js
/lib
/partials
/home
index.html
/users
users.html
details.html
And creating restful controllers for them what handlets listed above
Or if someone could show my a basic exaple about this, just the controller and view part, how to build up a singple page with showing result, and one with grabing by id i would really be grateful.
Thank you
When starting a Laravel & AngularJS project you are in charge of the backend and frontend. Basically you have 3 options.
Keep the entire app in the same folder, and the angularjs stuff in the public folder.
Keep the entire app in the same folder and AngularJS views in the laravel view folder.
Separate your backend and frontend completely.
The first & second option are the simplest, and its OK if you have a small/medium sized application. In this case just keep all the AngularJS files in the public folder, or if you choose to mix them with laravel views just drop the .blade extension (or change the laravel blade/angularjs template syntax)
I see its best to keep the backend as restful as possible when doing a SPA app, the point is to push the logic to the browser, this means your app can become a mess if you mix php with js too much.
The folder structure is totally up to you, and it does not matter what option you choose. But a good start is separating you app into a logical parts.
/app
application.js
/partials
user.html
login.html
etc.html
/vendor
Angular.js
Lodash.js
Etc.js
/controllers
User.js
Etc.js
/directives
Charts.js
Etc.js
/filters
Custom.js
Etc.js
/services
Backend.js
Etc.js
You can also check this for a good angularjs styleguide.
The above is a basic folder structure, just customize it as you see best. If you have a small app, you could drop the folders and just have a controllers.js directives.js and services.js (etc)and keep all your javascript in the same file. This is totally up to you. Separate when the application grows, and always refactor.
If you choose the third option you will have to customize the backend a bit. This might be the hardest option, but it also gives you great flexibility. Basically you could drop laravel all together, and build the backend in node.js, or use laravel as a backend for another SPA app written in Ember.js without making any changes in the code. Note if you are choosing this option you cannot make use of some laravel stuff, like the blade templating. You will also have to setup your laravel app for CORS, and note, there can be some more coding when it comes to security, like CSRF tokens and such.
When going to production with you app you can use a build tool to min & concat you frontend app into one file. Checkout ng-min for minification.
This is one of the project I am working on. You can see the way how I have partial views in angular js. As suggested above, there is no need putting your view files in public folder.
https://github.com/naveensky/wm-demo-tracker
Related
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I have an ASP.NET MVC project that will have an Angular SPA inside it. At first, I decided to create a new Area for the SPA but then I realized that I'm not going to use any Models or Controllers inside the area but just JavaScript files. So, now my idea is to place all the scripts for the SPA in the main ~\Scripts\ folder of the ASP.NET MVC project but inside another folder ~\Scripts\MySPAName\ and load the SPA just trough a ASP.NET MVC View.
What's the best way to structure a project in this scenario?
Well, if you want to create such kind of project I suggest you use MVC + WebAPI + Angularjs. You really need only 2 MVC controllers: Account for all login/logout logic and Home with only one simple method Index This Index method returns view which contains only one line of code - div or section or whatever you want ng-view attribute. This will be your main application page. Why its better to use WebAPI? Because these controllers works faster than MVC ones and WebAPI provide you with great REST possibility. What bout project structure. I can suggest you my personal structure of MVC + Angularjs project:
So you have API folder for WebAPI controllers, standard Controllers folder for MVC controllers. In Scripts folder you have separate folders for your angular controllers services ang general libraries and one .js file - its your angular module and application file. Moreover, its better and cleaner if you have additional subfolders in Scripts/Controllers folder so you can split all you *.js file by category (e.g Home, Mangers, Prices etc). Also you can see that I have folder Templates in root of my project. Here you can place all your html files which you will use as angular views/templates. And I also suggest you to create additional subfolders here as in Scripts/Controllers subfolder for better and cleaner structure
Hope that will help you
ASP.NET MVC is better suited to traditional web sites. For a single page app, use ASP.NET Web API instead. Here's a tutorial:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs
In this, There are two web projects, one is or web api and another one is for client web page (SPA).
You just need a empty web project to start an angular project.
Index.html - It is the main html page for your application. All other pages (partial pages) for your project can be placed Inside the directory Pages.
Scripts - All your js files can be placed inside this directory. You can differentiate all your js files into it's sub-directories.
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.
This isn't a problem question, but a theory/possibility question. I have made a polymer portfolio site with a list of image links that points to a html page in my file directory for example /projects/test.html. The problem that I have is that every time I click on the link it loads the new page because I have it as a separate html.
I read AngularJS can provide partial view. So if I can combine angular, I can keep my website header and just load the content of the links into the partial view.
I was wondering if this is doable, and do I have to fully install angular and change the file structure or can I just import AngularJS file and code from there?
Also AngularJS does provide routing which I will love as it make my url cleaner.I am just asking so I don't have to waste time if this attempt will not work.
Yes, all of this is easily achievable with Angular; you will not need to modify Angular. A couple things to get you going. This won't make sense right now but come back once you've dug in a little.
For prettier urls set $locationProvider.html5Mode(true);
You will want your server to serve all 404s for text/html requests to return your Angular application (probably /index.html on your server). This is so that if someone goes to https://mycoolsite.com/projects/neato (which exists in your Angular app, but NOT on the server) your Angular application will load and the router will display the correct route.
I have an existing webapp built on Laravel. I am moving to an Ionic build to create the native version.
How would you suggest I separate my views, and how do I call the routes? Has anyone any example.
Here is what I am about to do:
1. move all my views to the public folder
2. install Ionic in the public folder,
3. Using UI-route & Angular make $http calls to the backend.
Thanks for your input :-)
You can't simply do that.
If you have a "classic" Laravel app with blade templates, what you need to do is to expose an API from it.
Then you create an ionic app in a different directory (they are not related, so you don't have to mix them). You just need to develop your ionic app like any other ionic app. Then in your factories where you do the request to your API, you do something like:
$http.get('https://example.com/api/foo')
Where example.com is the domain of your Laravel application (You are going to need to activate CORS in it).
You just can't simply create an ionic app inside laravel, because that application will be built into an .apk to be installed on the phone and you can't add Laravel inside the package.
So the TL;DR is having your normal Laravel app where it lives, add it some public API so your ionic app can access it and then build an Ionic app from zero that will use that API.
It depends on you, but I prefer to keep the ionic project nested in /public, since I want a single-project app, the sources are clearly separated by being or not in the subfolder, but it helps your productivity, benefits are:
Single source control: Single source set for source version control (GIT, SVN, ...), so when I work I can do a single pull/checkout and push/checkin
Single app to deploy: Single domain, no cross-domain problems, single deploy via FTP is available, any standard php server can handle it with a single and standard account to handle
Coherent project without interdipendencies: I do not want to split logic dependencies of the same model between many projects, when I change something in backend or frontend that involve the other side, I want to have in the same project all the sources to update. It make not sense to have to go to a different project to adjust compatibility, it would be uselessy messy