I'm trying to learn the basics on angular. I installed angular via npm.
Just trying to run my first app
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
</body>
</html>
In my app.js it's just this line of code:
angular.module("ngClassifieds", []);
I ran the below command to start up the server as I had installed http server on my project directory
http-server
I opened up my localhost url which was localhost:8080 but for some reasons it was not showing Hello message but instead it was showing {{message}}
Not sure what I went wrong here.
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
it is not scr chenge it to src
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
Below code will solve you problem.
angular.module("ngClassifieds", []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
Related
I just moved my working AngularJS project into a spring-boot configuration. Spring is not the issue because I am able to locate the index.html file and display "Test test test" in the browser which is written in that file. However all my scripts are returning the following:
In my index.html file I set the base href:
<html lang="en" ng-app="SharpVision">
<head>
<base href="/PersonalSite/src/main/webapp/">
<meta charset="utf-8">
My body in index.html
<body>
Test Test test
<ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>
<ng-view autoscroll="true"></ng-view>
<ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >
<!--Scripts-->
<!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="assets/libs/flexslider/jquery.flexslider.js"></script>
<script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
<script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular/angular-route.min.js"></script>
<script src="assets/libs/angular/angular-sanitize.min.js"></script>
<script src="assets/libs/angular/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="assets/libs/angular-flexslider/angular-flexslider.js"></script>
<script src="assets/libs/angular-backstretch/ng-backstretch.min.js"></script>
<script src="assets/libs/angular-parallax/angular-parallax.js"></script>
<script src="assets/libs/angular-fitvids/angular-fitvids.js"></script>
<script src="assets/libs/angular-masonry/angular-masonry.min.js"></script>
<script src="assets/libs/momentjs/moment-with-locales.min.js"></script>
<script src="assets/libs/humanize-duration/humanize-duration.js"></script>
<script src="assets/libs/angular-timer/angular-timer.min.js"></script>
<script src="assets/libs/ng-progress/js/ngprogress.min.js"></script>
<script src="assets/libs/angular-gmaps/angular-google-maps.min.js"></script>
<script src="assets/libs/lodash/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="app/app.module.js"></script>
<script src="app/app.directives.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.controllers.js"></script>
</body>
In my app.js file I set a constant:
app.constant('ROOT', '/PersonalSite/src/main/webapp/');
Now everything was working fine until I brought in boot. However I just set up a InternalResourceViewResolver to render the index.html which it did so spring-boot is doing its job. For some reason Angularjs cannot find its scripts even though it is given the correct paths to find them.
Directory:
I know asking this is silly but I am stuck and not getting out of it. I am new to Angular.js and have created the following program but it is not running as the program can't find the script sources..I have tried all the possible ways but haven't found the solution.
<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
</head>
<body>
<div ng-controller="EventController">
{{event.name}}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" > </script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"></script>
</body>
</html>
Following is the snapshot of my folder arrangement:
I think you should remove the / before js in the src.if it is not working then check if it is the right path.
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"> </script>
Should Be
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/controllers/EventController.js"></script>
OR
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/EventController.js"></script>
Depending on your location and path of js folder....
I want to display a count down timer.I have been referring the following page
http://siddii.github.io/angular-timer/
But i am getting the below error.
Error: Invalid isolate scope definition for directive timer: #?
Could anybody tell me what i am i missing out.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-timer.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</body>
</html>
app.js
var appModule=angular.module('app', ['timer']);
Try this. It's working:
I added moment.js and humanizeDuration.js libraries based on errors I was getting.
Hope it helps
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script src="https://raw.githubusercontent.com/EvanHahn/HumanizeDuration.js/master/humanize-duration.js"></script>
<script src="https://raw.githubusercontent.com/siddii/angular-timer/master/dist/angular-timer.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</div>
<script>
var app = angular.module('app',['timer']);
app.controller('ctrl', function($scope){});
</script>
</body>
</html>
You need to pull in the right libraries in order for the timer to work.
bower install momentjs --save
bower install humanize-duration --save
Now in your HTML add the dependencies
<script type="text/javascript" src="bower_components/humanize-duration/humanize-duration.js"></script>
<script type="text/javascript" src="bower_components/momentjs/min/moment-with-locales.min.js"></script>
just for learning purpose--
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="ctrl.js"></script>
</head>
<body ng-app="abc">
<h1 ng-controller="ctrl">{{data}}</h1>
</body>
</html>
script.js
angular.module('abc', []);
ctrl.js
angular.module('abc').controller('ctrl',function($scope){
$scope.data="hello";
});
js fiddle link
it showing error... what i ve done wrong here???
You named your controller file wrongly.
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="cntrl.js"></script>
</head>
I'm new to Ext Js. I have following file structure.
And I'm testing following code -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Ext Js Page</title>
<link rel="stylesheet" href="../ext-3.3.1/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
Ext.onReady(function (){
alert('done');
});
</script>
</head>
<body>
</body>
</html>
But it is giving me errors as
Ext.onReady is not a function,
Ext.EventManager is undefined, and multiple times
Ext.EventObject is undefined
How can I fix this.
The reason is you included the ext-base-debug.js (debug version) after ext-all.js.
Use either:
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
or
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all-debug.js"></script>
ext library has be loaded once only.. If you load these library twice on basic and child page again..you will get this error.
Please remove duplicate js files.