AngularJS ngRoute routing not injecting my pages properly? - javascript

I am trying to inject a page in a single page application using ng-view. When I navigate to localhost:1337/home or localhost:1337/#/home, views/pages/home.html is not being properly injected, as it should be. Here is the code for starting my nodeJS server, followed by the front end code that is not working as intended for me. :(
Thanks for any help!
app/server.js
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(__dirname + '/public'));
app.use('*', function(req, res) {
res.sendFile(path.join(__dirname,'/public/views/index.html'));
});
app.listen(1337);
app/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"
<!-- Set the base path for angular routing -->
<base href="/">
<!-- Add bootstrap and font awesome to make the site look pretty. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Add angular and angular-routes via CDN. -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<!-- Load our custom angular app and app routes. -->
<script src="js/app.js"></script>
<script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="testApp" ng-controller="mainController as main">
<header>
<navbar>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</navbar>
</header>
<!-- Our pages will be injected here by AngularJS -->
<main>
<div ng-view></div>
</main>
</body>
</html>
app/public/js/app.js
angular.module('testApp', [])
.controller('mainController', function() {
var vm = this;
vm.message = 'Main controller, testing.';
})
.controller('homeController', function () {
var vm = this;
vm.message = 'Welcome to the home page!';
});
app/public/js/app.routes.js
angular.module('routerRoutes', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/pages/home.html',
controller: 'homeController',
controllerAs: 'home'
});
});
app/public/views/pages/home.html
<div>
<h1>This is the home page! {{ home.message }}</h1>
</div>

add 'routerRoutes' module as dependency of 'testApp' module:
angular.module('testApp', ['routerRoutes']);

Related

How to change ng-view

I'm trying to do an Angular JS app but I'va some questions.
This is my index.html code
<body ng-app="StockApp">
<div id="wrapper" class="flex-column">
<div ng-hide="hideNavBar" id="navbarundsub">
</div>
<div ng-show="hideStockInformation" id="stockInformation">
</div>
<div id="main" class="flex-row">
<div ng-hide="hideSideMenu" id="sidemenu">
</div>
<div ng-hide="hideSideMenuUser" id="sidemenuUser">
</div>
<!--CONTENIDO-->
<ng-view></ng-view>
</div>
</div>
</body>
My question is that my first page is a login so I don't want to show the login.html inside the divs where de ng-view is, so I don't know how can I change the ng-view or how can I pass grom the login to the other page... I don't know.
Hope someone can help me.
ng-view is one of the important directives of Angular1.
Documentation
We need to inject ngRoute in dependancy injection.
Here we need to maintain routes like this
Routing Example
Please maintain routes like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.htm',
controller: 'LoginController'
}).
when('/employee', {
templateUrl: 'employee.htm',
controller: 'EmployeeController'
}).
otherwise({
redirectTo: '/login'
});
}]);
You need to create 2 angular template one for login and another for dashboard.
login template not contains any menu and header where
dashboard template contains both menu and header.
you have to change your route from one template page to another template page.
for that you need to use ui-router angular module.using ng-route you can't change route from one template page to another template page.
ui-router module:
https://github.com/angular-ui/ui-router/wiki
app.js
angular
.module('myapp', [
'ui.router',
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard/Home');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('home', {
parent:'dashboard',
url: '/Home',
controller: 'MainCtrl',
templateUrl: 'views/pages/blank.html',
}
})
.state('login', {
templateUrl: 'views/pages/login.html',
url: '/login'
})
}
]);
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/libs/bootstrap.min.css" />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/sb-admin-2.css">
<link rel="stylesheet" href="styles/timeline.css">
<link rel="stylesheet" href="styles/libs/metisMenu.min.css">
<link rel="stylesheet" href="styles/libs/loading-bar.min.css">
<link rel="stylesheet" href="styles/libs/font-awesome.min.css"
type="text/css">
<!-- endbuild -->
<!-- bower:js -->
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/metisMenu.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/libs/ocLazyLoad.min.js"></script>
<script src="js/libs/loading-bar.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls.min.js"></script>
<!-- endbower -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<!-- endbuild -->
</head>
<body>
<div ng-app="ApsilonApp">
<div ui-view></div>
</div>
</body>
</html>

AngularJS controller works but does not load html page

I have some unexpected problem with my controller, which occured during building 1st angular project, just like in here: https://www.youtube.com/watch?v=8-ZQHv70BCw&t=2119s
The problem is my link to home page does not load, it has no effect whatsoever, even when console shows the message and does not return any errors. I test this on plunkr.
index.html:
<!DOCTYPE HTML>
<html lang="en" ng-app="computer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Computer Solutions</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Computer solutions</h3>
<nav>
<ul class="nav nav-justified">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div ng-controller='MainCtrl'>
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', [function(){
console.log('this is mainctrl');
}]);
and main.html
this is main.
Thanks in advance, Michał
Changed your imports to version 1.4.8. The version you had included seems to have problems on $route definition without a otherwise :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I've also added the other states, and should all be working.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/services', {
templateUrl: 'services.html',
}).
when('/contact', {
templateUrl: 'contact.html',
})
}])
See working version : https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme
I guess u have mentioned Controller(MainCtrl) in html and in routeProvider as well. Try removing one of the places.
check https://stackoverflow.com/a/27314659/3821223

Angular UI Router not rendering nested views and links

I've been learning Angular and now that I have a while learning it I decide to make an small app to test my knowledge, but the links on my app and the nested views doesn't seem to work for a reason I can't understand yet, I've using angular-ui-router because it's pretty awesome to handle routes and that sort of things.
the problem: I'm trying to load the templates of the routes into the div that contains the ui-view but it doesn't work.
I have this three js files:
first config.route.js
'use strict';
angular.module('weekobApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'app/layout/header.html',
},
'content': {
templateUrl : 'app/layout/dashboard.html',
controller : 'DashboardController'
},
'footer': {
templateUrl : 'app/layout/footer.html',
}
}
});
});
dashboard.js
'use strict';
angular.module('weekobApp', [])
.controller('DashboardController', ['$scope', function ($scope) {
$scope.myname = "Dashboard";
}]);
and finally the html file:
<!DOCTYPE html>
<html ng-app="weekobApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- build:css content/styles/style.css -->
<link href="content/styles/style.css" rel="stylesheet" />
<!-- endbuild -->
</head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js app/main.js -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../../bower_components/angular-resource/angular-resource.min.js"></script>
<!-- Dashboard modules -->
<script src="app/dashboard/config.route.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<!-- endbuild -->
</body>
</html>
You should only declare the module dependency list once:
angular.module('weekobApp', ['ui.router']);
angular.module('weekobApp')
.config(function($stateProvider, $urlRouterProvider) {
angular.module('weekobApp')
.controller('DashboardController', ['$scope', function ($scope) {
The first line creates the module. The other two add components to the module. Your code was overwriting the previous component.

how to include controller.js into ng-include html page?

this is home.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>
<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>
<script type='text/javascript'>//<![CDATA[
//angular module
'use strict';
alert("1");
var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
myApp.controller('commonController', ['$scope', '$http', function($scope, $http) {
$scope.menus = [
{ link : '/summary', treeState : '' , url: 'body.html'},
{ link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
];
$scope.menu = $scope.menus[0];
}]);
</script>
</head>
<body ng-controller="commonController">
<div>
<div ng-include="'head.html'"></div>
</div>
<!-- footer -->
<footer class="footer">
<div ng-include="'footer.html'"></div>
</footer>
<!-- footer -->
</body>
</html>
and
head.html is
<script type='text/javascript'>
myApp.controller('headController', ['$scope', '$http', function($scope, $http) {
$scope.change = function (param){
alert(param);
};
}]);
</script>
<div ng-controller="headController">
details......
</div>
use angularjs version 1.3.7
problem is 'can't find headController'
in my code what shoud i do ?
can i change my angular version?
1.2.X version can allow function headController($scope){ .....};
but 1.3.7 not work
what can i do ?
This is a know issue that has been reported.
https://github.com/angular/angular.js/issues/3756
https://gist.github.com/endorama/7369006
Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.
Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)

ngRoute worked but I wanted to switch to ui-router.... now my app does not seem to initialize

I have an app running on express and angular. I wanted to switch to ui-router to take advantage of multiple views but it does not seem to be working.
app.js
app.use(express.static(path.join(__dirname, 'public')));
app.get('/',routes.index);
app.get('/partials/:name', routes.partials);
app.get('/partials/about/:name', aboutRoutes.partials);
app.get('/about', aboutRoutes.us);
app.get('/about/:name', aboutRoutes.main);
//authentication
//app.get('/app', ensureAuthenticated ,appRoutes.app);
app.get('/app',appRoutes.app);
app.get('/app/:name',appRoutes.main);
app.get('/partials/app/:name', appRoutes.partials);
app.use('*',routes.index)
template.hjs
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.css" />
<link rel="stylesheet" href="/stylesheets/bootstrapValidator.min.css" />
<link rel="stylesheet" href="/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="/stylesheets/screen.css" />
<!-- Style for Newsticker Begin-->
<link rel="stylesheet" href="/stylesheets/newsticker.css" />
<link rel="stylesheet" href="/stylesheets/prism.css" />
<link rel="stylesheet" href="/stylesheets/teamBio.css" />
<!-- Style for Newsticker End-->
</head>
<body>
<div >
{{> header}}
<div ui-view>{{> maincontent}}</div>
{{> footer}}
<script src="/js/jquery.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/js/front.js"></script>
<script src="/js/controllers.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrapValidator.js"></script>
<script src="/js/signup-init.js"></script>
<!-- Scripts for NEWSTICKER Begin -->
<script src="/js/prism.js"></script>
<script src="/js/jquery.newsTicker.js"></script>
<script src="/js/init_newsticker.js"></script>
<!-- Scripts for NEWSTICKER End -->
{{> signupModal}}
</div>
</body>
</html>
front.js
var myApp = angular.module('myApp', [
'myApp.controllers',
'ui.router'
])
myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise({
redirectTo: '/'
});
$stateProvider.
state('', {
url: '/',
templateUrl: '/partials/homepage',
controller: 'MyCtrl1'
}).
state('about.detail', {
url: '/about/:id',
templateUrl: function(params){
return '/partials/about/'+params.id
},
controller: 'MyCtrl1'
}).
state('funnel', {
url: '/funnel',
templateUrl: '/partials/funnel',
controller: 'MyCtrl2'
});
});
This worked fine with ngRoute but I switched so I could assign views after i got the base working again. What am I doing wrong?
I also have a link on my home page that
<div class="col-lg-3 text-center">
<a ui-sref="funnel" class="btn btn-warning">TestView</a>
</div>
does nothing
It looks like the problem might be at $urlRouterProvider.otherwise({redirectTo: '/'});. Try changing it to $urlRouterProvider.otherwise('/'); as seen in docs https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes

Categories