I could not get completion for my angular js eclipse based file. I know there could be lot of tutorials for setting up proper angular js for eclipse. But i read and followed the same and didn't worked still.
I also followed official link-> [Angular JS Eclipse Github setup link][1]
I installed, “Angular JS” from “Eclipse->Help Menu->Eclipse Marketplace”
It got installed and restarted.
Then, Eclipse->New->Static web project
Then, Convert the project to Angular. Right click Project, Configure-> Convert to Angular JS project
Then, Adding new html files. Right click Project, New->HTML file
Simple code:
<!DOCTYPE html>
<html lang="en-US" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
It works fine. Runs in the browser well.
My problem is, why does not it show the completion help when I type on "ng-" and use control + space in mac eclipse ? When I move cursor on "ng", it gives help of "div" tag rather than "ng" help. I want to just type "ng-" and get the list of available methods by just press control + space in mac eclipse
I can understand that there is some angular installation problem. But, none of the existing solution solved my issue.
Related
It's my first time to start working on mobile apps using angular and ionic so forgive me if this is just a simple problem. I tried googling about this issue but to no avail. Here's the problem, I tried recreating the sample app created using Ionic in the link below.
link here
I used the IBM MobileFirst environment to run my application. The issue is, if I didn't add a lot of < br > tags before the closing tag of the body, the display would look like the one on the right (see attached image).
Anyone can tell me why this is happening?
Code snippet from image on the left:
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Code snippet for the one on the right
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
</body>
</html>
So basically, it only gets fixed if I add lots of < br > tags before the body's closing tag. Isn't Ionic suppose to adjust to the full height? or the natural height of its contents?
Note: let me know if you cant see the image
There is pre-existing CSS in Worklight that may cause this. You can attempt at fixing it by adding:
html, body {
height: 100%;
}
It is suggested that instead of using Hybrid apps, you'll use Cordova apps in MobileFirst 7.1. Integration with Ionic is then much simpler. Read more here: https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/
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 am working on improving the UI of a website, and needed to use Semantic JS with it. The website was written in Angular, and the one piece of Semantic functionality that was not working was Dropdowns. The styling worked fine, but as soon as I tried to initialize the dropdown with a
$('...').dropdown({options});
I encountered a "$('...').dropdown is not a function" error. Looked around and nowhere mentioned the answer to my problem.
Since SemanticJS modifies the $ operator from Jquery, Jquery needs to be included before SemanticJS.
//Index.html//
<html>
<head>
</head>
<div ng-view></div>
<script src="jquery.blah.min.js"></script>
<script src="semantic.min.js"></script>
</html>
I am working on a little interface built around AngularJS. I have an index.html file and I built a route to a base.html file (using ng-view) which contains several elements including a Morris chart.
However, when I launch my index.html everything from the base.html is displayed... except the chart. And I have the following error in the console :
Error: Graph container element not found
So I tried, to move my scripts morris.js (and 2 others) to the base.html juste after my element (that will contain the chart) is created but it doesn't work neither.
index.html
<!DOCTYPE html>
<div ng-app="pistApp" ng-controller="MainController" id="wrapper">
<div ng-view id="page-wrapper">
</div>
</div>
base.html
<!-- other elements who works but I simplify -->
<div id="morris-area-chart"></div>
Problem solved thanks to Angularjs does not load scripts within ng-view
I just had to include jQuery before angular script.
Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'
These files will be in your bower_components after the bower install angular-morris-chart.
Try examples in https://angular-morris-chart.stpa.co/
it will work.
So I am trying to emulate the example "Hello !" given on the Angular website here: http://angularjs.org/ under the section The Basics.
I have placed the following file in my my-user-name directory which contains the angular.js directory that is installed when you clone the Angular repo as per the site's instructions.
<!doctype html>
<html ng-app>
<head>
<script src='js/angular-1.0.0rc6.js'></script>
</head>
<body>
<input type="text" ng-nmodel="name">
<h2>Hello {{name}}!</h2>
</body>
</html>
I am running the angular server via grunt webserverwhich I run from my home directory path and access the above html file by typing http://localhost:8000/angular.html But I get a blank page. I realize that the path js/angular-1.0.0rc6.js doesn't mean anything in the context of my home directory in that there is no js directory in my home dir and similarly no angular-1.0.0rc6.js lying anywhere around those environs. I just copied that path-name from the example. What is the standard protocol in terms of where the script files are located relative to where you develop your angular apps?
Thank you!
There's so many possibilities that I'd nudge you in a slightly different direction to get started. Check out Yeoman (http://yeoman.io).
Yeoman is a nice way to learn because, after running it (which just takes typing 'yo angular' on the command line once Yeoman is installed), it gets you started with a small working app that you can experiment with and it scaffolds up a nice overall base (code/test scaffold, tools, ...) to build from. And it even uses grunt, as you did, to launch your app (you'll just type grunt server and your app should appear in a browser (with live reload working - which is a cool time saver).
Yeoman should save you from having to figure out the kinds of things you are now- is my file in the right location? is my server pointing to the right place? etc... All taken care of by yeoman.
Here's a tutorial showing how to install Yeoman and install Angular: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
You'll see it's only a handful of commands.
In case you'd like to dive in more, here's a talk posted by the Angular team about using Yeoman with Angular: http://www.youtube.com/watch?v=XOmwZopzcTA