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
Related
I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory
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.
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
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
I have an ASP.net application which uses AngularJs, Javascript, HTML5.
The problem is everytime I deploy the browser may cache some files which results in errors because the user is not getting the latest Html and javascript files.
I understand HTML5 has a manifest file which can force files to download but is there a more efficient way to download the file when the file has actually changed?
I understand bundles only do this for Javascript files not HTML files?
I am not sure if it is angularjs related as a number of these HTML files are swapped out using ng-views and templates.
Any clues would be appreciated.
I am trying to make use of bundles but not sure if this applies to html files using AngularJs
Thanks
in general, to control included web resources js/css/... cache behavior, i would suggest to manage some type of version id and append it to your including element.
for example:
<script src=".../.../app.js?<version id>" />
or
<script src=".../.../app/<version id>.js" />
or even
<script src=".../<version id>/.../app.js" />
once you deployed your new application, the browser will ignore the previews cached files and use the newer files
in case are using a source control (git/svn/...), you can use the latest commit id as the version id. otherwise, manage this version id manually (incremental number).
in case are using a build server, you can add a rule to your build script that automates this procedure for you.
Updated answer
I am not sure if it is angularjs related as a number of these HTML
files are swapped out using ng-views and templates.
Bundling reduces the number of requests to the server. For AngularJS you could use a technique at build time to inline the templates with javascript. This is a plugin for a Grunt based build system.
Grunt AngularJS Template Inlining
Now you can use bundles for JS.
Other options are around browser caching and not even worry about bundling the templates.
Grunt based builds have a good cache busting mechanism. Described further down.
I would advise you to look at caching options and some important points below. The caching options are set at the web server level.
Rule of thumb
Never cache the first page (index.html) or cache with if-modified headers.
Cache every resource that is resolved from the main page.
For the referenced resources
Use Grunt based build and a plugin https://www.npmjs.org/package/grunt-cache-bust
The way this plugins works is that it will calculate the HASH of each resources referenced in the HTML and renames the file with the file.HASH making sure its references are also updated.
It is also smart enough to ignore CDN based remote URLs.
You can't do anything from the server if the client does not even send you the request.
HTML5 Cache Manifest does not work on all browsers (IE<=9 :()
you can configure web.config to disable caching in asp.net application
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
No, html files are not bundled in ASP.NET MVC. This can be done with js or css, but html files generally need to be directly addressable via URL.
A simple way to get Angular to load in a new version of the template is to just append a unique query string parameter onto the template URL wherever you use it in Angular:
module.directive('myDirective', function() {
return {
// add querystring with deploy date, or whatever
templateUrl: '/Path/Template.html' + '?noCache=08102014',
controller: controller
};
});
Of course, a cleaner, more maintainable solution would be to compile your templates to javascript strings, which could then be bundled like any other part of your Angular app. grunt-angular-templates would be one candidate for this approach.