I'm developing a SPA application in VS. I have separated html (angularjs) and webapi services. I develop html pages and css in WebStorm (which is perfect for the job) and VS for webapi (WebStorm and VS project folders are the same). Everything works fine but I want to minimize html pages and assets automatically when deploying to Azure through VS. I learnt that casette can do this but you need to have razor pages and reference bundles inside.
When I put my html inside a razor page then I lose WebStorm development (can't see references and can't debug angularjs). Is there a solution to this situation? I want to develop html/css completely on WebStrom and when I deploy in release config, I want this html/css/js to be minified without their names changed (so js/css references in html will be correct). I don't want to do this manually for each html/js/css, there should be an automated solution.
I can suggest using Grunt - it can be run from WebStorm (and doesn't require using any .NET technologies WebStorm knows nothing of) and has tasks for minifying HTML, CSS and JS. See https://stackoverflow.com/questions/728260/html-minification for more info.
Related
I'm trying to create web using AngularJs framework, and I want to watch my changes on sass, js and html file (auto refreshing browser).
How can I do that?
You can use Yeoman generator for your Angular projects. This will provide
Provides a directory structure geared towards large Angular projects.
livereload for your project etc
cg-angular documention
I have a web site with angularjs framework for front-end using index.html and .net REST API services.
I need to achieve something one of followings:
1. I can create a dummy MVC view and write #Scripts.Render(...) to render all the bundled script and whatever I can see chrome developers tool e.g.
/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1
I can take this to index.html and put in a way
<script src="/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1"></script>
2. This is possible on my local, however I am not sure, if I publish to another server, there random key asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1 will remain as is.
So questions here are:
Is there any setting to keep this key unchanged?
OR simply handling bundle & minification feature of angularjs-index.html page? note- I do not want to use any of npm packages
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'm trying to host my first website. I've made it using angularjs, bootstrap and yeoman as a generator. However when I tried to upload it, I realized that the full size of everything in my folder (including the generated stuff by yeoman) was nearly 100mb.
What files do I actually need to host? Node is nearly 60mb and grunt isn't much smaller. Any advice would be greatly appreciated.
Assuming you have a web server like nginx or apache already on that server, you just need to upload the dist folder that is created when you run grunt build.
You don't need all that generator and node stuff just to host a simple test project.
What you actually need is a single HTML file, called index.html. Include Angular and bootstrap (you can omit this, too, if you can go without fancy styles) and create a file app.js which will hold your application logic.
http://angularjs.org shows this in a neat way on their landing page, just scroll down to 'The basics'
As static angularjs application will contain mainly HTML, CSS and JS files you can host your project on simple apache webserver. (Apache - http://httpd.apache.org/)
If you are making a dynamic angularjs application you will have webservices returning you JSON data. If you implement the restful webservices in Java (using Jersey) you can deploy you entire angularjs application with java webserivce implementation to tomcat web server. (Tomcat - http://tomcat.apache.org/)
Hope this helps!
Decided to answer this old question because its one of the few that show on google when searched.
You do not need to use Grunt anymore, I do not know if this was needed at the time of this question.
instead just do
ng build my-app
this would have saved me some hours.
link to current doc
We're developing a website with AngularJS, and would like to have static HTML files for every AngularJS page for search engines.
The site is small and static, about 10-20 pages.
Is there any task in grunt that can generate HTML files based on Angular app? E.g. it generates /static/about.html for /#about page of Angular app.
I saw services and scripts like PhantomJS, but they look too complicated for our case. As the site is static, we can run the task every time we're going to publish any changes.
PhantomJS is indeed the way to go. However, there is existing tools that do mostly what you want.
This one is a good example:
https://github.com/cburgdorf/grunt-html-snapshot
This will run PhantomJS through pages of your website and generate an HTML version of it. It can be automated via Grunt.
The only caveat is that you have to enter manually, in the configuration, all the pages you need to index.
Is it ok for what you need?
EDIT: This is also a quite interesting and complete article about SEO friendly Angular applications: http://www.ng-newsletter.com/posts/serious-angular-seo.html
They provide a few alternatives depending on your needs