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'm new to angular 2.0. Actually I'm blocked by referencing the angular related resources.
As a beginner, I would like to know which js file to reference (compiled TypeScript) in Index.html to start manipulating with Angular Js 2.0.
In the tutorial of http://angular.io I noticed several references below but I'm not sure which one shall I use in my own project. Seems none of the reference below related with Angular by looking at the names. I'm really confused now.
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
For my team, we're between projects, but I'm performing some basic research on TypeScript and how to use Angular 1.x with it, considering that Angular 2 is still being baked. I usually use Plunkr to make small-scale prototypes so that we can see how something works and mess with it in-situ during tech demos and stuff.
The problem, though, is I tried to make a very basic Angular 1.x + TS setup in this plunker, but have been running into issues getting it to work properly. I think some of the problem is the client-side transpilation, but I'm sure that's not the only thing I'm messing up. Specifically...
View Code:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="testController as ctrl">
<h1>{{ ctrl.testMethod() }}</h1>
</div>
<!-- Scripts... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script type="text/typescript" src="app.ts"></script>
<script type="text/typescript" src="controllers.ts"></script>
<script type="text/typescript" src="registrations.ts"></script>
<!-- Required for web transpilation... -->
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>
</body>
</html>
I got the client-side transpilation from this StackOverflow question, but that question's resolution was either, 'Just do it in Visual Studio!' or 'transpile your TypeScript, then plug the JavaScript into Plunkr,' which doesn't work for me, because my team is considering transitioning to TypeScript in the first place - we need to be able to work with typescript, thus the prototype to help us understand how it works. Additionally, that question notes that the transpilation parts are actually significantly outdated.
Question: First, is there an updated clientside TypeScript-to-JavaScript transpiler that I can link to in my prototype plunker? Second, are there any better resources to refer to on how to get Angular 1 to work with TypeScript? I've had very, very little luck finding anything that talks about how to make TypeScript work with Angular 1.x...
Edit:
Turns out you can use typescript on plnkr, which I just learned from the comments below http://embed.plnkr.co/suu7Yg/preview
For implicit mode all this requires is creating a file with the appropriate extension, i.e. script.ts or style.scss, and then referencing it in the head with the expected compiled extension, i.e. script.js or style.css. Very cool, plnkr!
I'm fairly certain Plunker doesn't support typescript (though of course I could be wrong) (edit: yup I was wrong, it's just not obvious that this is a feature). However, I can offer an idea for a possible solution of what you're trying to accomplish.
Try moving your small-scale prototypes and demos over to codepen instead. They're both pretty comparable apps I use all the time, and codepen currently supports typescript so if that's something you need to play with you got it.
It's hidden behind the little gear, along with external js file includes:
Turn on typescript:
Boom. Good to go for your live demos. Hope that helps!
As mentioned by #wesww in his amended answer, Plunker supports server-side compilation of TypeScript. What I mean by that is that when your TypeScript code is sent to the preview server, it is sent un-transformed.
Suppose you have a file script.ts, written in TypeScript, but the index.html of your project requests script.js, Plunker's preview server will compile your file on the fly and serve the compiled version.
You can configure how you want the TypeScript compiler to work by creating a tsconfig.json file (consistent with normal CLI usage) to define your settings.
Please see Definitive Guide to Comiplation on Plunker for more information.
I'm not familiar with plunk is but it's possible to transpile typescript in the browser by just including node_modules/typescript/typescript.js file and use the Compiler API. Checkout my Compiler API playground in the browser: https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
See Dynamic execution of TypeScript in the browser for details
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.