this is my app.js
this gives the error app.js:1 Uncaught ReferenceError: angular is not defined
angular.module('contactsApp',[])
.run(function ($rootScope) {
$rootScope.message = "Hello Angular!";
});
this is my main.html
were i load the app.js file
<!DOCTYPE html>
<html ng-app="contactsApp">
<head>
<titel>Contacts</titel>
<base href="/">
<link rel="stylesheet" href="src/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Contacts: {{message}} </h1>
</div>
</div>
</script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<scrip src="lib/bower_components/angular/angular.min.js"> </scrip>
<script src="src/app.js"></script>
</body>
</html>
this is my server.js
var express = require('express'),
app = express();
app
.use(express.static('./public'))
.get('*',function (req,res) {
res.sendfile('public/main.html');
})
.listen(3000);
And my file structure is
[this is my directory structure]
plzzz kindly help me!
Im getting error in browser console as
myError
file directory
You have a typo when loading angular:
"<scrip" instead of "<script" (in you main.html file)
Use
use(express.static('../public'))
OR
use(express.static('lib'))
your server.js in within public folder
Check the path for angular.js. Does it exist in "lib/bower_components/angular/angular.min.js
Alternate way is to use <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
Related
//Create the module and controller for our file
var app = angular.module("demoApp",[]);
app.controller("myController", function($scope){
$scope.message = "Hello Angularj";
});
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="lib/angular.min.js"></script>
<script src="homeData.js"></script>
</head>
<body ng-contoller="myController">
<div>
welcome {{message}}
</div>
</body>
</html>
FQF
Helo to all,
I have to setup the AngularJs with ecllipse neon but after load the index.html file it got error in the "angular.min.js" and i have already include the library into the index.html file after hover the error it will show(Multiple markers at this line
). please tell me how to fix this?
My index.html file content.
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="homeData.js"></script>
</head>
<body ng-contoller="myController">
<div>
welcome {{message}}
</div>
</body>
</html>
home.Data.js file's content.
var app = angular.module("demoApp",[]);
app.controller("myController", function($scope){
$scope.message = "Hello Angularj";
});
I'm new on AngularJS and I'm trying to figure out how to get clean URLs on my localhost server (it's a basic LAMP).
The problem is that if I wanna reach localhost/login it works just if I create a link in the index.html (using angular-ui-router). If I try to reach the same URL typing it in the browser's address bar, I get the "404 Not Found" error.
Here the code...
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>test</title>
<base href="/">
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
<a ui-sref="login" ui-sref-active="active">click me</a>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/MainController.js"></script>
</body>
</html>
app.js
(function() {
angular.module("test", ['ui.router'])
.config(function($stateProvider,$urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url:'/login',
templateUrl:'login.html'
});
});
})();
MainController.js
(function() {
angular.module("test")
.controller("MainController", function($scope){
$scope.message = "Homepage";
});
})();
login.html
<h2>/login page</h2>
Any help?
I'm following this tutorial.
But seems like jquery or angular or boostrap.min.js does not load properly. The file location is correct but still it shows me
Uncaught SyntaxError: Unexpected token <
for all the js files I've included in main.html
Here's my main.html
<html ng-app='ContactsApp'>
<head>
<title> My first Angular Project </title>
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1> Contacts: {{message}}</h1>
</div>
</div>
<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
Here's my app.js
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootscope.message = "Hello Angular..";
});
Here's my server.js
var express = require('express'),
app = express();
//app object is express application
app
.use(express.static('./public'))
.get('*',function(req,res){
res.sendfile('public/main.html');
})
.listen(3000);
Do you have jQuery, bootstrap, angular files in proper folder as linked in your project? Let us assume you don't and let's try that by linking those files online. Then your main.html would look like:
<html ng-app="ContactsApp">
<head>
<title> My first Angular Project </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1 ng-cloak> Contacts: {{message}}</h1>
</div>
</div>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
And your app.js would look like:
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello Angular..";
});
The problem with you current app.js is that the 'S' of $rootScope.message is not capitalised.
I hope this helps.
I would double check your paths for the scripts. Based on your express routes, if the js file can't be found it will respond with public/main.html. Then the browser would try to load that as a script, which would give the syntax error about <
I am using a seed project for Angular apps. There is no bower to manage the dependencies. The angular.js file is currently in the below location. Here is the index.html content:
<!doctype html>
<html lang="en" ng-app="AngularSpringApp">
<head>
<meta charset="utf-8">
<title>Service App</title>
<link rel="stylesheet" href="resources/css/app.css"/>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Cars</li>
<li>Trains</li>
<li>Railway Station</li>
<li>Kits</li>
</ul>
<hr class="" />
<div ng-view></div>
</div>
<script src="resources/js/lib/angular/angular.js"></script>
<script src="resources/js/app.js"></script>
<script src="resources/js/dirPagination.js"></script>
<script src="resources/js/services.js"></script>
<script src="resources/js/controllers/RailwayStationController.js"></script>
<script src="resources/js/controllers/CarController.js"></script>
<script src="resources/js/controllers/TrainController.js"></script>
<script src="resources/js/controllers/KitController.js"></script>
<script src="resources/js/filters.js"></script>
<script src="resources/js/directives.js"></script>
</body>
</html>
And here is the beginning of the app.js file:
var AngularSpringApp = angular.module('AngularSpringApp', ['angularUtils.directives.dirPagination']);
// Declare app level module which depends on filters, and services
AngularSpringApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when ...
As you can see, ngRoute module is not injected, but the the routing is working properly!
Now, I am trying to change the current angular file with new angular.js file which I downloaded from the Angular website. When replacing the angular.js file, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module AngularSpringApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24routeProvider
at http://localhost:8084/app/resources/js/lib/angular/angular.js:78:12
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3801:19
at getService (http://localhost:8084/app/resources/js/lib/angular/angular.js:3929:39)
at Object.invoke (http://localhost:8084/app/resources/js/lib/angular/angular.js:3956:13)
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3884:37
at forEach (http://localhost:8084/app/resources/js/lib/angular/angular.js:325:18)
at loadModules (http://localhost:8084/app/resources/js/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:8084/app/resources/js/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1444:20)
at bootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1459:12)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=AngularSpringApp&p…ost%3A8084%2Fapp%2Fresources%2Fjs%2Flib%2Fangular%2Fangular.js%3A1459%3A12)
You likely also need to download and include the angular-route module after your angular.js include:
<script src="resources/js/lib/angular/angular-route.js"></script>
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.