Hello I am merging two of my projects you can say CMS and web into a single project.
Both projects have different controllers and CSS. I have created separate folders for admin and web.
But need to load controllers on the basis of path like /admin/home or /web/home. I am unable to found any solution.
I tried to do that according to the state name, but with that my controllers are not loading.
Related
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.
I have developed an app in Yii2 that is as a backoffice for a Travel Agency.
I have used the basic start template, and used gii (code generator) to create the CRUDS for the models (Hotels, HotelRooms, HotelImages, etc)
I also want to create two different front-end applications (one for retail, and the other for other agencies), and I thought to separate it from the backend (maybe an angular.js app) and get the info through REST could be a good approach.
So I want to use the API Rest based on the models made with gii.
How can I achieve this?
I have read this:
http://www.yiiframework.com/doc-2.0/guide-rest-quick-start.html
and It says that I have to switch the controllers.
Currently I have (generated with gii)
class HotelController extends Controller
and reading the guide it says that I have to use
class HotelController extends ActiveController
but if I make this change, the backoffice does not work anymore.
What would be the best approach?
Make another APIHotelController that extends ActiveController?
Can I merge (in some sort of way) with the gii generated controller?
Any other way to achieve this separation of layers (back-front) ?
Thanks!
The most elegant solution I know so far to build a REST API Yii2 web app without messing up with the existent code or the routes configurations is by building a REST API as a separate sub-application containing MVC elements by itself, which means in Yii's world : as a module.
You already have a working code, accessible within the web folder, it has it's own Entry Scripts within the index.php file, its own server configurations (.htaccess file if using apache) and its own app configurations within the config folder to which your app will depend before parsing your URL's and rendering your view files within their related controllers and models.
So the idea is to create a new web folder, lets call it api for example, with its own Entry Scripts file, own server configurations, own config folder and own controllers extending the ActiveController class.
Then both, your web app and api service will share the same models files to validate, store or retrieve data.
Your app will move from this basic template based structure :
+ assets
+ config
+ controllers
+ models
+ views
+ web
...
To this new structure (from the tutorial linked below) :
+ web
+ config
+ controllers
...
+ api
+ config
+ modules
+ v1
+ controllers
.htaccess
index.php
You will need then to register your api service as separate module in order to work and being initialized by Yii.
Then you will use different URLs to get to your web app and related views or Rest api and related json/xml outputs respectively within http://[your_path]/web/controller/action or http://[your_path]/api/v1/controller/action (url structure depends on your web and api configs).
In order to implement the necessary code, here is a great step by step tutorial. It uses the basic template structure and follows yii's api versionning approach (the v1 folder).
I am going to start with a new client side AngularJS project for the first time next week. If I use yeoman to create the project, the directory layout is such that all controllers in one folder, all services in one folder and so on.
Is there any way to use Yeoman to create a project such that folders are created based on functionality, for example, login, users, property; and each one consists of scripts(js), templates (html) corresponding to them.
If this is not possible with the current Yeoman implementation, can I use yeoman to create angular project and then change the default directory layout keeping app.js and index.html in their old positions. If this is done, will grunt serve work correctly?
Have a look here, specifically rows 132-137 of the Starters sheet and the File Structures sheet.
There are many alternatives to generator-angular and many of them organize files as you describe.
I will begin web project with AngularJS and want to organize my files appropriately including Web Api.
What is the best structure to use?
The detailed explanation of file structure in AngularJS is explained in AngularJS Up & Running by Shyam Seshadri & Brad Green.
Here is few tips from the book.
Have one controller, service, directive, or filter per file. Don’t club them into large
single files.
Don’t have one giant module. Break up your applications into smaller modules. Let
your main application be composed of multiple smaller, reusable modules.
Prefer to create modules and directories by functionality (authorization, adminservices,
search, etc.), over type (controllers, services, directives). This makes your
code more reusable.
Groups by functionality (login, autohorization)
Creates folder to reusable components (datepicker, widgets)
Creates seperate folder to third-party dependencies.
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