Im trying to config a basic angular app.
my main html:
<html ng-app="CostumerApp">
<head>
<title> Costumers </title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Costumer manager</h1>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/costumerCtrl.js"></script>
</body>
app js
angular.module('CostumerApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/costumers', {
controller: 'costumerCtrl',
templateUrl: 'views/list.html'
});
$locationProvider.html5Mode(true);
});
costumerCtrl.js :
angular.module('CostumerApp')
.controller('costumerCtrl', function ($scope){
$scope.costumers = [];
});
list html:
<table class='table table-hover table-hover table-bordered'>
routing is not working,
now its not finding "http://localhost:3000/costumers" and when i just do http://localhost:3000 its taking me to the project folder instead to my main html.
Im using node http-server and start like that http-server -p 3000 -a localhost .
why my localhost:3000 is not showing the main page??
thank u !
You wrote $routProvider, it is $routeProvider.
Since you have html5Mode setted as true in your app.js, you need to include this in your main.html:
<head>
<base href="/">
...
</head>
So the html5Mode will work, and you can access without # in the URL.
Related
I am working on a simple application of AngularJs. I use cloud9 as an Ide and install Angular through bower in my project, but still get an error "angular not defined" in my .js file.
Here is my code please help me.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
You are not able to load angular.min.js on your page.
Try by changing like this:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
You are missing ng-app
<body ng-app="myApp" ng-controller="myCtrl">
Add ng-app in your program.
It's the starting point of the application.
I am building an angular single page app using node, bower, and express. But, for some odd reason, I cannot seem to get ngRoute to work. Nothing seems to be appearing in my .ng-view div. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
</head>
<body ng-app="app">
<h1>My App</h1>
<div class="ng-view"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Thanks in advance for any and all help!
my controller.js has the following code:
var myController = angular.module('myApp.controllers', [])
My Services.js has the following code:
angular.module('myApp.services', [])
When I run my application, the code "var myController = angular.module('myApp.controllers', [])" gives me the following exception:
0x800a1391 - JavaScript runtime error: 'angular' is undefined.
Can anyone please tell me what goes wrong? Your help will be appreciated :)
Btw, here is the html code of my web app
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PathFinding.js</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
<script src="./js/angular.js"></script>
<script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./lib/raphael-min.js"></script>
<script type="text/javascript" src="./lib/es5-shim.min.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./lib/state-machine.min.js"></script>
<script type="text/javascript" src="./lib/async.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
<script type="text/javascript" src="./js/controller.js"></script>
<script type="text/javascript" src="./js/Services.js"></script>
<script type="text/javascript" src="./js/mainApp.js"></script>
<script type="text/javascript" src="./js/panel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<ion-modal-view>
<ion-content>
<ion-scroll zooming="true" overflow-scroll="false" direction="xy" style="width: 100%; height:100%;"
scrollbar-x="false" scrollbar-y="false">
<div class="scroll-container" id="draw_area" style="width: 100%; height:100%; background: url('PathFindingMap.png') no-repeat ">
</div>
</ion-scroll>
</ion-content>
</ion-modal-view>
<button style="margin-bottom:10px;margin-left:30px;margin-right:30px;" id="button1" class="control_button" type="button">Search!</button>
<div style="visibility: hidden;" id="algorithm_panel" class="panel right_panel">
<div class="accordion">
<h3 id="astar_header"></h3>
<div id="astar_section" class="finder_section">
</div>
</div>
</div>
<div style="visibility: hidden;" id="play_panel" class="panel right_panel">
</div>
<div id="stats"></div>
</body>
</html>
Wrong approach of building your angular app
This is how you need to define your module
var app = angular.module('myApp',[])
This is how you need to add your controller in your controller.js
As you have already define your module,no need to give dependency
var app = angular.module('myApp')
app.controller('myController',function(){
// Here is your controller content
})
Here is how you need to add your service in service.js
var app = angular.module('myApp')
app.service('myService',function(){
// Here is your service content (this.method);
})
Your code gives you error because you have defined your module 2 times, ie defining its dependency []
On your controller.js try to reference the angular.js script.
Simply drag the angular.js to you controller.js file. You code will look like this.
/// <reference path="../../../scripts/angular.js" />
On your html code. Include the angular.js and put it into first hierarchy then add your controller.js or else your code will not work.
<script src="scripts/angular.js"></script>
<script src="scripts/controller.js"></script>
Here is my .htaccess file:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Here is app.js
var app = angular.module('router', ['ngRoute']);
app.controller('main', function($scope, $location, $routeParams){
$scope.test = 'testing';
$scope.theID = $routeParams.theID;
});
// Routing Configuration
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/paramtest/:theID', {
templateUrl: 'views/aboutID.html',
controller: 'main'
})
.otherwise({
templateUrl: 'views/home.html'
});
$locationProvider.html5Mode(true);
}]);
Here is aboutID.html
ID: {{theID}}
When I go to http://example.com/about it works great, even if I do a cmd+r refresh it still loads the page fine.
If I click on a link from within the app and go to http://example.com/paramtest/1234 it works fine.
The problem is if I try going directly to http://example.com/paramtest/1234 or doing a hard refresh http://example.com/paramtest/1234 angular routing no longer works and all of the variables are outputted like this {{var}}
I also have the <base href="/"> tag in place.
-- ADDITONAL FILES --
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contractors</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="styles/datepicker.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="styles/classic.date.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" type="text/css">
<link href="js/ng-sortable.min.css" rel="stylesheet" type="text/css">
<link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="js/angular-datepicker.js"></script>
<script type="text/javascript" src="app.js"></script>
<base href="/">
</head>
<body ng-app="bidder" ng-controller="main" flow-drag-enter="style={border: '5px solid green'}">
<div class="header" ng-controller="main">
<div class="logo">
<img src="images/logo.png">
</div>
</div>
<!-- MAIN CONTENT -->
<div ng-view ng-controller="main" class="view-animate" ng-if="firebaseUser"></div>
<div class="profileSection" ng-if="firebaseUser" ng-controller="main">
<div class="profileTopLeft">
<img src="thumb.php?w=30&h=30&src=uploads/{{user.profilePicture || noPicture.png}}" ng-if="user.profilePicture" class="profilePicTop">
<i class="fa fa-user" ng-if="!user.profilePicture"></i>
<b>{{user.Name}}</b> <small>{{user.Email}}</small>
</div>
<div class="profileTopRight">
<i class="fa fa-th-list"></i> My Profile
<a href ng-click="logoutUser()"><i class="fa fa-sign-out"></i> Logout</a>
</div>
</div>
<!-- REGISTRATION -->
<div ng-if="!firebaseUser" ng-controller="main">
<loginregister></loginregister>
</div>
<div class="clear" style="height: 100px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.expander.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
</body>
</html>
Routing segment from app.js
// PAGE SETUP
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/findcontractor', {
templateUrl: 'views/findcontractor.html'
})
.when('/editjob/:jobID', {
templateUrl: 'views/editjob.html'
})
.when('/viewcandidates/:jobID/:validate', {
templateUrl: 'views/viewcandidates.html'
})
.when('/messenger/:creatorID/:jobID/:candidateID', {
templateUrl: 'views/messenger.html'
})
.when('/profile', {
templateUrl: 'views/profile.html'
})
.when('/findwork', {
templateUrl: 'views/findwork.html'
})
.otherwise({
templateUrl: 'views/home.html'
});
$locationProvider.html5Mode(true);
}]);
Normal url's like http://example.com/about/ work perfectly, but any parameter pages don't work on a hard refresh, it either returns 404 or index.html without any javascript included.
If anyone runs into a similar problem to this one, make sure that you put your
<base href="/">
At the top of your index.html file, directly underneath the title.
That's what eventually solved it for me.
Ok. In your index.html I see that there are multiple nested html elements with same controller. If you have applied the ng-controller="main" to your <body> tag then its not needed to add it again to its nested elements (child elements of body tag). Due to this nested scope of one single controller, it may cause the problems which you face.
Just add the controller to your body tag alone, or add a parent div which contains all that body contains, and then assign the controller to this parent div. And remove the redundant controller from other places.
I am new to angular js
I was trying to load another html dyamically, below is the code i was trying
My Base HTML include
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="Module/app.js"></script>
</body>
</html>
and my app JS
var app = angular.module('LoginModule', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: '',
templateUrl: '/Module/View/Login/Login.html'
})
.otherwise({ redirectTo: '/login' });
});
Put your jquery and angular script in the body tag:
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
</head>
<body>
<div ng-view></div>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
<script src="Resource/angular-route.js"></script>
<script src="Module/app.js"></script>
</body>
</html>
Also I would set ng-view with ng-view=""
<div ng-view=""></div>
EDIT:
You forgot to include the ngRoute module. Please look at the following plnkr to more detail: http://plnkr.co/edit/A5X4BNsnuXxhmgPVOXpv
var app = angular.module('LoginModule', ['ngRoute']);