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.
Related
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
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.
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 a ready template created with angular.js, it is divided into views, how do I install this directory express, which folders to merge? and how to make that template files do not get lost?
You can configure it in whatever manner you want, but i would suggest you to set up your server side stuffs first. Ensure it is working and then bring in the assets, Angular sources and libs.
To make your development faster, express provides generators, just run this command it will create default set of files for you. Off course you can change the folder structure to the one that suits best to your application.
Once Express it working fine, then embed the client side stuffs, recommended would be to keep it in a separate directory. Most people like to keep folder names client(for client side scripts) and server(for server related scripts).
Most new single page applications are being developed in MEAN stack(Mongo, ExpressJS, AngularJS, MongoDB). There are some interesting seed projects such as MEAN.io and MEAN.js, which i think would be helpful for you in order to setup the project and quickly get started.
Also do checkout grunt and bower.
Grunt is javascript task runner which can help you automate many of your tedious tasks.
I would like to combine the two generators jhipster and angular.
The jhipster entity generator generates entities for both spring/JPA and angular route/view/controller.
A REST point is not always linked to a view, hence I would want to generate the java and angular parts separately. Are there common practices for these issues?
Have you tested out the JHipster framework itself? I hate to ask such a basic question, but if you look at the structure of what is being delivered by hipster, you'll notice that the Spring API controllers/endpoints are all going to be under your main/java/com/[projectname]/web/rest folder, and your Angular calls to those endpoints will all be mapped under the /webapp/scripts/ folder as part of your Angular services file. If you simply want to remove the Angular views and customize, it should be as easy as deleting those files from your project.
However, if you are looking for another form of REST scaffolding tool, my suggestion is to look up http://forum.spring.io/forum/spring-projects/roo if you want to go build based on your entities or DDL2HBM if you want to build based on an existing DB.