AngularJS ng-view not showing view - javascript

I'm developing a web app with AngularJS for the frontend and i'm trying to set the routing and showing the views, so far even ng-include and other stuff work for me but not ng-view
I'm developing in visual studio and when i run the app it's using a local server (localhost)
here's my directory structure
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
Here's mi index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
Here's my app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
When i load the site it loads correctly and if i see the requests i can clearly see that it's requesting the home.html with 304 status code, the thing is the div with ng-view is not showing the html inside home.html, what could this be due to?

I've solved the issue by changing the <ng-include> tag with an <div ng-include="srctoview"> tag. If anyone is having this issue i'd recommend doing this, or doing it like in this answer using a controller
Thanks to #Sourabh- for leading me to an answer.

close <ng-include> directive properly as browser is wrapping ur <ng-view> inside of <ng-include>. it will solve the problem. as #pankaj has already suggested.

Related

Angular MVC View only Structure problems

I'm geting problems with angularjs structure. I pretend to have a translation controller or service or wathever and one controller per group of pages (I will explauin that point).
The idea is an index page that loads all the .js files and .css (that are global on the entire web site). That page will load the login file (in it´s body), with its angular controller. Then it will load a template with nav, header, footer, etc... templates, and in the article section I pretend to load diferent pages (links in the nav menu) each page (or group) with its controller. I'm starting with angularjs and it doesn't works. The idea will be similar at next code:
index (reduced for the example):
<!DOCTYPE html>
<html **ng-app="app" ng-controller="translationsCtrl"**>
<head>
<title>something</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--GLOBAL STYLES (WILL BE MORE, ONLY EXAMPLE)-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="loginCtrl" ng-include="'views/login.html'"></div>
<!--GLOBAL SCRIPTS (WILL BE MORE, ONLY EXAMPLE)-->
<script src="assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="controllers/translationsCtrl.js"></script>
</body>
</html>
in login.html it will be like this:
<!--STUFF-->
<script src="controllers/loginCtrl.js"></script>
controllers will be:
loginCtrl.js:
angular
.module('app', [])
.controller('loginCtrl', function($scope) {
$scope.login = 'login';
})
translationsCtrl.js
angular
.module('app', [])
.controller('translationsCtrl', function($scope) {
$scope.text = 'text';
});
how can I do something similar working? Are there any better method for doing it? The web app is to huge so I can't use requirejs or simplepage angular.

Ion-view is not displayed at all

I am facing a really weird issue. I was following this tutorial. My goal was to implement two ion-view's which have a reference to each other.
My problem is that when running the app in the browser (Firefox) the localhost-address is being called but nothing is rendered to the screen. There are also no errors, not even warnings in the console output. What is even more weird is that after posting the very same code to codepen it does work without problems, see here. The only difference to the code on my machine are the references to:
ionic.css
ionic.bundle.js
Those are generated by ionic on my machine and work fine for other projects. I am using Linux (Mint) and Firefox in developement. I will post my entire code but like I said there are no differences to the codepen.
Thanks in advance!
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Title</title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter" >
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content ng-controller="HomeCtrl">
<p>Lorem Ipsum bla bla bla…</p>
View my set
</ion-content>
</ion-view>
</script>
<script id="setViewer.html" type="text/ng-template">
<ion-view view-title="SetViewer">
<ion-content ng-controller="SliderCtrl">
<p>Lorem Ipsum bla bla bla…</p>
Home
</ion-content>
</ion-view>
</script>
</body>
</html>
controllers.js:
angular.module('starter',['ionic'])
.controller('SliderCtrl',['$scope',function($scope){
}])
.controller('HomeCtrl',['$scope','$state',function($scope,$state){
}]);
app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('index',{
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('setViewer',{
url:'/setViewer',
templateUrl: 'setViewer.html',
controller: 'SlideCtrl'
});
$urlRouterProvider.otherwise('/');
});
So the solution was that I mixed up the files.
As you can see in my codepen .module declaration, .config and .controller declarations took place in a single document. Compared to my local structure where those were separated between app.js and controllers.js.
Once I put all those declarations in a single file everything worked fine.

angular router not working

I am trying to add some routing to my project. And I am using basic angular route with Angular 1.3.0
app.js file:
'use strict';
var routerApp = angular.module('mcw', [
'ngRoute',
'mcw.controllers',
'directives',
'filters',
'mcw.services']);
routerApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'index.html', controller: 'LoginController'})
.when('/Home', {templateUrl: 'templates/home.html', controller: 'ResourcesController'})
.otherwise({redirectTo: '/'});
});
index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
</body>
</html>
I use 'python -m http.server' (Python 3.4.3) as the server, and the urls of
"127.0.0.1:8000/", "127.0.0.1:8000/index.html", "127.0.0.1:8000/index.html#/Home" all goes to index.html page.
You have missed ng-view directive on page, which loads view from $routeProvider and the template & specified controller will get loaded in the ng-view element.
Add it inside body
<body>
<ng-view></ng-view>
</body>
Yes you need ng-view inside the body.
Only what you load inside the ng-view tag should not be index.html in my view. (but what you want to place inside the ng-view tag). The index.html should be the page where you place your ngview. To load other html files in (insie the ng-view tag)
The way it works is that the 'directives' will be placed INSIDE the ng-view tag.
(to be more specific, the html files you typed in your router {.when} objects.
in your case: templates/home.html and what you called index.html
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Or you can even use a div with ng-view inside it if you wish. (i reccomend the first method)

angular.js routing only on webserver

I'm new to Angular.js so bear with me. I found Angular's routing pretty neat which is why I want to try my first Webpage with it. My approach is the following:
<!doctype html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>testrouting</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="inject" ng-view></div>
</body>
</html>
and the an app.js
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/index.html'
});
});
problem is, that index.html is not shown. Inside index.html I have a plain <p> element with some text. But no text is showing on my root index. As far as I know angular is a front-end framework, so is there any Webserver neccessary which causes the problem?
Thanks
I've seen places that say that routing requires a server:
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

AngularJS and nodeJs Express: routes and refresh

My app is "working" fine, but, when I press F5 in browser my problem appears.
My app is organized this way:
nodeJs + express, in Express :
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
my angular routes:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
and everything is working fine until i refresh the page,
if i'm on localhost:1234/activate/999
it appear refreshing good the page, but it stamp in console this error
Error: Template must have exactly one root element. was:<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
bla
bla
bla
all my index.html!
what can be the problems?
any solutions?
edit:
my home:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
mi activate:
<div>
test
</div>
my index.html
<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>tite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/css/bootstrap-overrides.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/lib/animate.css" media="screen, projection">
<link rel="stylesheet" href="/css/sign-in.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/myCss.css" type="text/css"/>
</head>
<body class="pull_top">
<navbar>
//...
</navbar>
<ng-view> Loading...
</ng-view>
<!-- starts footer -->
<footer id="footer">
//...
</footer>
<!--Preload-->
<script src="/js/jquery-1.10.1.min.js"></script>
<!-- Scripts -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/theme.js"></script>
<!--Angular-->
<script type="text/javascript" src="/js/angular.min.js"></script>
<!--<script type="text/javascript" src="/js/angular-ui.min.js"></script>-->
<script type="text/javascript" src="/js/ui-bootstrap-0.5.0.min.js"></script>
<script type="text/javascript" src="/angular/app.js"></script>
<!--Angular Controller-->
<script type="text/javascript" src="/angular/login/loginController.js"></script>
<script type="text/javascript" src="/angular/menuNavBar/menuController.js"></script>
<script type="text/javascript" src="/angular/login/logOutController.js"></script>
<script type="text/javascript" src="/angular/login/registerController.js"></script>
<!--Angular Services-->
<script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script>
<!--Router-->
<script type="text/javascript" src="/angular/router/router.js"></script>
</body>
This is a problem commonly encountered when using a "catch-all" route that returns index.html (which you have to do when using Angular's html5 mode).
I don't know what your public folder structure looks like, but your Angular is making a request for activate.html that doesn't match its actual location (as served by Express). It may be because you have a leading slash in your templateUrl:
{ templateUrl: '/page/activate.html'})
but that depends on what your public folder looks like. "/page/activate.html" assumes that the "page" folder is at the root of your public folder. If it isn't, then that's your problem. You should have:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
which I'm guessing in your case would be something like:
{ templateUrl: 'views/page/activate.html'})
(It doesn't seem likely there would be a folder called "page" at the root of public/.)
Your express middleware attempts to handle the request for
http://localhost:1234/page/activate.html
but nothing successfully handles it, so your catch-all route just returns index.html, which has multiple root elements, causing Angular to throw a fit. Angular expected activate.html but it got index.html instead.
This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. You can get your browser in an infinite loop as it continuously loads index.html, which loads Angular, which (erroneously) loads index.html, which loads Angular, etc.
Look at the request your browser is making for activate.html and make it match the actual location (as served by Express) of activate.html.
Try use the specify the templateUrl with the absolute path from the root of the views.
For example, suppose you have configured and views is in the public folder
app.set('views', __dirname + '/public');
then change the path to the template to
/public/page/home.html

Categories