I have the following code which is giving me the old
Failed to load resource: the server responded with a status of 404 (Not Found)
error and I'm not seeing my views. The main.js file is on the same level in the project as index.html.
I built it in Webstorm 10 and I've been staring and rearranging stuff for two days now. I'm starting to get cross-eyed looking at it. If anyone can point out what I'm missing or if I wrote something wrong, it'd be a big help.
EDIT :
I edited the html because this was missing the ng-view element. I'm using the localhost server built into Webstorm to debug. The first template that should be seen upon the project being loaded, about.html, was the file that couldn't be loaded from the project. For that matter though, I get an error trying to load each of the templates.
EDIT 2:
I'm getting the idea it has something to do with Webstorm. If I start a default Angular project and fire it up in a browser, I get a whole bunch of failure to load resource errors.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="content/css/custom.css" rel="stylesheet"/>
<base href="/" />
</head>
<body>
<nav class="navbar navbar-fixed-top cstmNavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Voice Over</li>
<li>Conventions</li>
<li>Contact</li>
<li>Other Links</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
main.js
var app = angular.module("app", ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: '/views/about.html',
controller: 'aboutCtrl'
})
.when('/voiceover', {
templateUrl: '/views/voiceover.html',
controller: 'voiceoverCtrl'
})
.when('/conventions', {
templateUrl: '/views/conventions.html',
controller: 'conventionsCtrl'
})
.when('/contact', {
templateUrl: '/views/contact.html',
controller: 'contactCtrl'
})
.when('/other', {
templateUrl: '/views/other.html',
controller: 'otherCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller("mainCtrl", function ($scope) {
});
app.controller("aboutCtrl", function ($scope) {
});
app.controller("voiceoverCtrl", function ($scope) {
});
app.controller("conventionsCtrl", function ($scope) {
});
app.controller("contactCtrl", function ($scope) {
});
app.controller("otherCtrl", function ($scope) {
});
Add in yor html code
<ui-view></ui-view>
This tag load html view
Related
In my application i have declared ng-app in Master.html and added all script, stylesheet references in it
this is my master page
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<script src="../Angular/angular.min.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Scripts/AngularServices/App.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<li><i class="fa fa-circle-o"></i>Group</li>
<li><i class="fa fa-circle-o"></i>Member</li>
<section class="content">
<div ng-view></div>
</section>
</body>
</html>
App.js
var mainApp = angular.module("mainApp", ['ngRoute'])
mainApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/main/Group', { templateUrl: '/Portal/Group.html', controller: 'GroupController' }),
$routeProvider.when('/main/Member', { templateUrl: '/Portal/Member.html', controller: 'MemberController' });
$locationProvider.html5Mode(true);
});
// group
mainApp.controller('GroupController', function ($scope, $http) {
$http.get('/api/APIGroup/GetGroupDetails').then(function (result) {
$scope.group = result.data;
});
});
Group.html
<div ng-controller="GroupController">
<div class="row">
<h1>Welcome to group</h1>
my content here
</div>
</div>
when i execute master page and if click group link group.html form opening inside master page my url like this
http://localhost:50810/main/chitGroup
but if reload page here am getting error as
Server Error in '/' Application.
The resource cannot be found.
Master page not applying to how to fix this
In your angular.app you have ngRoute to handle your states for create Single Page Application.
ngRoute need to pass the state names correctly as ng-href="#!/main/Group", that because when you use ngRoute the url changed automaticly to http://localhost:50810/#!/
Server Error in '/' Application.
The resource cannot be found.
This error because you redirect to http://localhost:50810 to find /main/Group which not exist.
My app shows an HTML page with multiple views, and each view can be conditionally built from multiple HTML templates.
I want to edit each HTML file and add a few lines at the top, something like
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{how do I get the file name}}</p>
<hr>
</div>
And maybe the same at the footer.
Thus, by setting $scope. showFileNames to true, I could switch the display of file names on/off and see how my page is actually composed (is this clear, or should I add some ascii art?).
I could just hard code {{how do I get the file name}} in each file, but doing it dynamically means that I can more easily add the code to each file, plus it guards against files being renamed.
Can it be done? If so, how?
[Update] I just realized that the question didn't explain well enough. Sorry.
I need to stress that part where I said
each view can be conditionally built from multiple HTML templates
While the view is state based, its contents are built from different <ng-include> files, based on data.
So, state A might include A.html, but, based on the data, that view might <ng-include> B.html, C.html and E.html, or it might <ng-include> F.html, G.html and H.htFl - and I want to show the file name of each at the head & foot of the part of the view shown by each file
Update: You may have templates loaded with ui-view and ng-include. The example given bottom of this answer has a nice generic directive to return the corresponding template name even though if you nested ui-view and ng-include together. Click through "Home", "About" and "Named View" link inside "About".
Few theory goes below,
If you use ui-view then you can try this with $state.current.templateUrl as below.
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{$state.current.templateUrl}}</p>
<hr>
</div>
The above will work if you had defined your state as below,
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
controller: 'State1Ctrl'
})
But if you had defined this as named views as below,
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
}
}
}
})
Then, better you can have a method assigned with the $rootScope as below and pass the $state.current.views from the html to the function.
$rootScope.getTemplate = function(view) {
var keys = Object.keys(view);
if(keys.length === 0) return '';
return view[keys[0]].templateUrl;
};
and the html,
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{getTemplate($state.current.views)}}</p>
<hr>
</div>
But you can have a look at the below generic directive which covers ui-view, nested ui-view, named ui-view and ng-include and even a bit of complex nesting with ui-view and ng-include.
Generic directive with an example page
Click through "Home", "About" and "Named View" link inside "About"
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'TestController'
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'TestController'
})
.state('about.named', {
url: '/named',
views: {
'named': {
templateUrl: 'named.html',
controller: 'TestController'
}
}
});
}
]);
app.controller('TestController', function($scope) {
});
app.directive('templateName', ['$state', function($state) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var templateName = $state.current.templateUrl;
var includesParent = $(element).closest('[ng-include]');
if(includesParent && includesParent.length > 0) {
if(includesParent.find('[ui-view]').length === 0) {
templateName = scope.$eval(includesParent.attr('ng-include'));
}
}
if(!templateName && $state.current.views) {
var uiViewParent = $(element).closest('[ui-view]');
var viewName = $state.current.views[uiViewParent.attr('ui-view')];
if(viewName) {
templateName = viewName.templateUrl;
}
}
element.html(templateName);
}
};
}]);
angular.bootstrap(document, ['app']);
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-include="'nav.html'">
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<h3>Home Page</h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="about.html">
<h3>About Page<h3>
<p>Start of file: <span template-name></span></p>
<div ng-include="'aboutUs.html'"></div>
</script>
<script type="text/ng-template" id="aboutUs.html">
<h3>About us<h3>
<p>Start of file: <span template-name></span></p>
<a ui-sref="about.named">Named View</a>
<div ui-view="named"></div>
</script>
<script type="text/ng-template" id="named.html">
<h3>Named View<h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="nav.html">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">Start of file: <span template-name></span></a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</script>
</div>
I am making a test app and User registration is going all fine but my Login button won't login because the server responds with 404 on controllers that have the logging in function.
The code for server.js is below:
var mongoose = require('mongoose');
var bodyParser = require ('body-parser');
var express = require('express');
var multiPart = require('connect-multiparty');
var multipartMiddleware = multiPart();
var app =express();
var authenticationController = require('./server/controllers/authenticationController');
var profileController = require('./server/controllers/profileController');
mongoose.connect('mongodb://localhost:27017/timeWaste');
app.use(bodyParser.json());
app.use(multipartMiddleware);
app.use('/app',express.static(__dirname + "/app"));
app.use('/node_modules', express.static(__dirname+"/node_modules"));
//Authentication
app.post ('/users/signup', authenticationController.signup);
app.post('/users/login', authenticationController.login);
//Profile
app.post('/profile/edit', multipartMiddleware, profileController.updatePhoto);
app.post('/profile/updateUsername', profileController.updateUsername);
app.post('/profile/updateBio', profileController.updateBio);
app.get('/', function(req,res) {
res.sendfile('index.html');
});
app.listen(3000, function() {
console.log('Listening');
});
The code for my navigationController where the login function is written is as follows:
(function(){
angular.module('TimeSuck')
.controller('navigationController',["$scope","$state","$http", function($scope, $state, $http){
if(localStorage['UserData']) {
$scope.loggedIn = true;
}
else {
$scope.loggedIn = false;
}
$scope.logUserIn = function() {
$http({
method: 'POST',
url:'users/login',
}).success(function(response){
localStorage.setItem('UserData', JSON.stringify(response));
}).error(function(error){
console.log(error);
})
}
}])
})();
and the code for my html is as follows:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="shortcut icon" href="">
<script src="node_modules/angular/angular.js"> </script>
<script src="app/app.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"> </script>
<script src="/app/signup/SignUpController.js"> </script>
<script src="/app/profile/edit-profile-controller.js"> </script>
<script src="/server/controllers/navigationController.js"></script>
<script src="/server/controllers/profileController.js"></script>
</head>
<body ng-app="TimeSuck" ng-controller="SignUpController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/index.html"> Deav's Blog </a>
</div>
<ul class="nav navbar-nav">
<li> <div ng-show="!loggedIn">
Email: <input type="text" ng-model="login.email"> Password: <input type="password" ng-model="login.password">
<button type="submit" ng-click="logUserIn()"> login </button> <a ui- sref="signUp"> Create an Account </a> </li>
</ul>
<div ng-show="loggedIn"> <a ui-sref="editProfile"> </a> </div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1> The Smartphones </h1>
<p> This page features all the smartphones you'd want to buy and use </p>
</div>
</div>
<div ui-view> </div>
</body>
<!-- Libraries -->
<script src="node_modules/ng-file-upload/dist/ng-file-upload-all.js"></script>
<script src="node_modules/ng-file-upload/dist/ng-file-upload-shim.js"></script>
<script src="node_modules/ng-file-upload/dist/ng-file-upload.js"> </script>
Screenshot of the error:
Screenshot of the error
Why 404 error in console
In your node server ,
you defined like this one.
app.use('/app',express.static(__dirname + "/app"));
// its fine if app folder is within your root folder.
means your static resources come under app folder.
Here you,saying that your JS file come under app folder.
check second parameter.(__dirname + "/app").
So,whatever you include is script,it should contain path starts from app.
e.g.
<script src="/server/controllers/navigationController.js"></script> //its wrong
it should be
<script src="app/server/controllers/navigationController.js"></script>
In your service.js your controller paths are as follows :
'./server/controllers/profileController', './server/controllers/authenticationController'
But in your html, the paths are
<script src="/server/controllers/navigationController.js"></script>
<script src="/server/controllers/profileController.js"></script>
Are they pointing to proper paths? Pls make sure the paths are proper.
Hi I'm trying to make a slider I got off the internet to work, but, I keep getting errors. In gallery.html, when I put the slider element at the top I get nothing, when I put it at the bottom I get errors. The error is something along the lines
Error: [$compile:tplrt] http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=slider&p1=partials%2Fgallery.html
Changed my code to match the suggestions in one of the comments.
I'm no longer getting the error to do with not have just 1 root element. Now, I can't get the next and previous to work. It just redirects me to the main page.
Note:
- gallery.html and slider.html are in a folder called partials
- all the images are in a folder called img
Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<!-- ANGULAR IMPORTS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<!-- JS FILES -->
<script src="js/controller.js"></script>
<script src="js/directives.js"></script>
<link href='css/app.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<div class="navbar">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="state1">State 1</a></li>
<li><a ui-sref="state2">State 2</a></li>
<li><a ui-sref="gallery">Gallery</a></li>
</ul>
</div>
<div class="dynamiccontent">
<div ui-view></div>
</div>
<!-- App Script -->
<script>
/** MAIN ANGULAR VAR */
var myapp = angular.module('myapp', [
/**IMPORT DEPENDENCIES*/
'ui.router',
'ngAnimate',
/**FILE DEPENDENCIES*/
'appController',
'slider.directive'
]);
/** UI-ROUTING */
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /state1
$urlRouterProvider.otherwise("/state1")
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'state1controller'
})
.state('gallery', {
url: "/gallery",
templateUrl: "partials/gallery.html",
controller: 'slidercontroller'
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: 'state2controller'
});
});
</script>
</body>
</html>
controller.js
var appController = angular.module('appController',[]);
appController.controller('state1controller', ['$scope', function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}]);
appController.controller('state2controller', ['$scope', function($scope){
$scope.things = ["A", "List", "Of", "Items"];
}]);
appController.controller('slidercontroller', ['$scope', function($scope) {
$scope.pictures=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},{src:'img5.png',title:'Pic 5'}];
}]);
directive.js
angular.module('slider.directive', [])
.directive('slider', function ($timeout) {
return {
restrict: 'AE',
replace: true,
scope:{
pictures: '='
},
link: function (scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.pictures.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.pictures.length-1;
};
scope.$watch('currentIndex',function(){
scope.pictures.forEach(function(image){
image.visible=false;
});
scope.pictures[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,5000);
},5000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
},
templateUrl:'partials/slider.html'
}
});
gallery.html
<slider pictures="pictures"></slider>
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in pictures">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
You are mixing several concerns here. partials/gallery.html is used as a template for your directive and your page. This leads to the directive being used itself in it's own template.
The solution is to remove your directive code from gallery.html and use it in a new file slider.html.
directive.js
.directive('slider', function ($timeout) {
return {
...
templateUrl:'partials/slider.html'
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in images">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
gallery.html
<slider images="pictures"/>
First off - the error does have to do with the root element.
https://docs.angularjs.org/error/$compile/tplrt
Template for directive '{0}' must have exactly one root element. {1}
Now that you fixed that issue - your infinite loop is called because you're trying to populate the slider directive with gallery.html - but in that template, you're calling the slider directive. So that's an infinite loop.
I tried to use "ng-click" from angular into a html page and I managed. But if i try to use the same "ng-click" on the same function in a bootstrap modal code don't work anymore. Why. How to call mehod in the second case ?
This is my html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
Call from file<br/>
Call from a pop-up
</div>
<div class="modal fade" id="about" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head.</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="first()">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my script
var myApp = angular.module('myApp', []);
myApp.controller("MainController", function($scope){
$scope.val= 1
$scope.even= false
$scope.increment = function(){
$scope.val +=1
$scope.even = ($scope.val%2 == 0)?true:false;
//$scope.even = $scope.val%2 == 0
}
$scope.first = function(){
alert("work");
}
})
The reason is that when the modal shows up the processing of all angular directives is already over. Hence the ng-click attribute on the template of modal that is going to be appended to the DOM later on makes no difference.
Generally you would like the HTML to be compiled with a the correct scope.
If you don't want to get into details of this, use Angular UI for Bootstrap
This will give you nice directives and services for bootstrap widgets.
There is a $modal service that can be used just like the $http service which returns a promise.
Here also you can have callbacks for events when modal disappears or closes.
There is sample code in the example. Here is how a function that will bring up a modal would look like:
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};