Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.
Related
I have an application that uses AngularJS v1.2.12 but we aren't the people that created. I've searched everywhere how to upgrade v1.2.12 to v1.7.0 but it seems that in installed in a different way.
All I've seen is "update bower.json file" or "update package.json file" but the angular folders are in "app\libs\frameworks\angular" and doesn't has any of those files...
So I don't know if I should change the version manually or run some commands, but I've installed NodeJS and Angular CLI and it throws the same error when I try "ng -update" it says that it wasn't found the package.json file.
Even in the official page I didn't found anything.
Do you have any clue about this?
I've a ViewBag.IsDebug == false that use a XXXFramework.js that seems to be inner of the solution, but in case is ViewBag.IsDebug == true it uses
<script src="app/libs/frameworks/angular/angular.min.js"></script>
<script src="app/libs/frameworks/angular/angular-animate.js"></script>
<script src="app/libs/frameworks/angular/angular-cookies.min.js"></script>
<script src="app/libs/frameworks/angular/angular-route.min.js"></script>
<script src="app/libs/frameworks/moment/angular-moment.js"></script>
<script src="//unpkg.com/angular/angular.min.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-cookies/angular-cookies.min.js"></script>
<script src="//unpkg.com/angular-route/angular-route.min.js"></script>
<script src="//unpkg.com/angular-moment/angular-moment.js"></script>
Also be sure to read AngularJS Developer Guide - Migrating from Previous Versions.
Also
angularjs 1.6.0 (latest now) routes not working
Error with $http.get in angularJS -- Success not a Function
Why are AngularJS $http success/error methods deprecated? Removed from v1.6?
In the meantime i'm trying to start using angularjs 1.3
In that case use:
<script src="//unpkg.com/angular#1.3/angular.js"></script>
<script src="//unpkg.com/angular-animate#1.3/angular-animate.js"></script>
<script src="//unpkg.com/angular-cookies#1.3/angular-cookies.js"></script>
<script src="//unpkg.com/angular-route#1.3/angular-route.js"></script>
<script src="//unpkg.com/angular-moment/angular-moment.js"></script>
Also use angular.js instead of angular.min.js. It will enable Data Debug and provide better error messages.
I am trying to require a react React module on plnkr in the script.jsx file using :
var AptList = require('./AptList');
Which is giving a "require is not defined" error.
I would like to know how to require modules on plnkr ?
You are not using any bundler, everything is in the browser, so you have to first include the script for that AptList component in your index.html:
<script src="AptList.js"></script>
<script src="script.jsx"></script>
That will already include the definition for that component. You need not (and cannot) use require there.
In AptList.js you need not have module.exports = AptList; because it will already have been imported using the script tag above. Also, you should remove the require inside script.jsx.
Now, the other big issue is you are using JSX, which is not supported natively by the browser. For that, you will need Babel, so add the following the scripts in index.html:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
Then, you have to add the following type to each script tag at the bottom, before the end of body:
<script type="text/babel" src="..."></script>
That will allow you to use ES6 syntax and JSX.
Here is the link to the plunk with everything working.
I am trying to optimize my page speed with me MEAN stack application. I have run into the issue where I should be eliminating the render-blocking Javascript and CSS. I have gotten to the point where I have almost eliminated everything, EXCEPT for the controllers that have to be loaded.
I am thinking that it is not possible to actually do this, since angular throws an injector module error when I place "async" as an attribute on the <script>.
I was also thinking of making one large controller, but that does not really work as well.
The link to the site is https://coastalreign.com, below is the code for the controllers:
<!-- ANGULAR CUSTOM -->
<script src="js/app.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/ProductCtrl.js"></script>
<script src="js/controllers/ProductsCtrl.js"></script>
<script src="js/controllers/CartCtrl.js"></script>
<script src="js/controllers/TrackOrderCtrl.js"></script>
<script src="js/controllers/CheckoutCtrl.js"></script>
<script src="js/controllers/DesignerCtrl.js"></script>
<script src="js/controllers/SublimationCtrl.js"></script>
<script src="js/controllers/LocationCtrl.js"></script>
<script src="js/controllers/ServiceAreaCtrl.js"></script>
<script src="js/controllers/CategoriesCtrl.js"></script>
<script src="js/services/getCategoryText.js"></script>
<script src="js/controllers/CustomQuoteCtrl.js"></script>
<script src="js/controllers/GradContestCtrl.js"></script>
<script src="js/controllers/four04Ctrl.js"></script>
<script src="js/controllers/popularGroupingCtrl.js"></script>
Thank you in advance for your guy's expertise!
The problem is the amount of requests. I would bundle the JS files (app + vendor files) and minify them.
You can check for performance tips with Chrome - Developer tools - audits
You can use gulp-concat to reduce the amount of requests as Alexander's answer suggested. Then you can use gulp-minify to decrease the size of the file. You will have some additional issues if you want to put async option because you might need to render HTML which depends on angular
I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
I managed to get it working like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
did you download all the files? according to their docs
Files to download
Build files for all directives are distributed in several flavours:
minified for production usage, un-minified for development, with or
without templates. All the options are described and can be downloaded
from here. It should be noted that the -tpls files contain the
templates bundled in JavaScript, while the regular version does not
contain the bundled templates. For more information, check out the FAQ
here and the README here.
Alternativelly, if you are only interested in a subset of directives,
you can create your own build.
Whichever method you choose the good news that the overall size of a
download is very small: <76kB for all directives (~20kB with gzip
compression!)
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
Angular-ui-bootstrap FAQ
This project comes with several deliverables described here:
https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If
the roles of those files are not clear for you just pick
ui-bootstrap-tpls-[version].min.js, but be sure to include only one
file in your project.
You're showing this
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
the excerpt i'm reading is
Now it should be clear that files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates, taking
the default ones
(https://github.com/angular-ui/bootstrap/tree/master/template) as a
starting point.
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
I would use a package manager such as Bower or WebPack to manage your client side dependencies.
According to the Angular UI docs you only need to add:
AngularJS and Bootstrap CSS. No need for jQuery.
And then you should initialize your Angular App module with ui.bootstrap dependency:
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
According to this example, this should be everything you need:
index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
app.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you
I have a really basic app setup where I have the react lib and the router setup as global scripts and it seems that the Router requires the transformer to run. Is there any way that I can get it running without the transformer?
<script type="text/javascript" src="/js/vendor/react-with-addons.js"></script>
<script type="text/javascript" src="/js/vendor/JSXTransformer.js"></script>
<!-- if I remove the transformer then nothing is displayed on the page -->
<script type="text/javascript" src="/js/vendor/ReactRouter.min.js"></script>
Ok it seems that this was a user error. I had my main script setup as a jsx file :p
<script type="text/jsx" src="/js/dist/app.js"></script>
switching to a plain js did the trick!