Angular UI Router not rendering nested views and links - javascript

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.

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>

Routing with UI Router in Angular JS App gives a blank screen when I test on Https Server

Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
$urlRouterProvider.otherwsie('/site/home');
})
This is the index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
When I try and test the code locally using "http-server -a localhost -p 3000", it just shows a blank page that is my index.html page. I think it is some routing error but I can't see the bug, any ideas for fixes?
It also states that app is not defined in this js file:
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
In your controller, you have 'use strict,' so it doesn't know what 'app' is. You need to add the line var app = angular.module('myApp'); before you can use app.controller syntax.

ng-route in AngularJS doesn't work

I am practicing AngularJS and have one problem:
ng-route doesn't work even though I added angular-route.js.
Here is my app.js file:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
}]);
and here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Color Picking</title>
<meta name="author" content="pexea12">
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Script -->
<script src="js/bootstrap/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<header>
<br>
<h2>Color Picking</h2>
<br>
</header>
<div id="main">
<div ng-view></div>
</div> <!-- main -->
<!-- AngularJS -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/ColorService.js"></script>
<!-- Factories -->
<script src="js/factories/RandomFactory.js"></script>
<!-- Controllers -->
<script src="js/controllers/TableController.js"></script>
</body>
</html>
My folder tree is:
css (css files, Bootstraps)
js (app.js, controllers, services, factories, ...)
views
My website works with http://localhost:8080/ but doesn't work with localhost:8080/about or localhost:8080/game.
I am really stuck at this point and can't find the solution.
I think your're having a problem after your .when, should be :
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('/game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
You're missing the / in your routes

AngularJS ngRoute routing not injecting my pages properly?

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']);

AngularJS - Argument 'MenuCtrl' is not a function, got undefined

I'm trying to use AngularJS in my webapp so dynamically create a menu and then populate the page based on the selection. I have created all the components needed, however it seems that since I split out my controllers I'm getting the following error. Any ideas why?
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined
The code I have is as follows:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myWebApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densitySpi=device-dpi, initial-scal=1.0" />
<link href="css/MainStyles.css" rel="stylesheet" type="text/css" media="screen">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
<!-- AngularJS Controllers -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<title>
Page Title
</title>
</head>
<body>
<div id="menu_bar" ng-controller="MenuCtrl">
<ul>
<li ng-repeat="menuItem in menuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div id="page_content">
<div ng-view></div>
</div>
</body>
js/app.js
var myWebApp = angular.module('myWebApp', [
'ngRoute',
'myWebAppControllers'
]);
myWebApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/home'
}).
when('/home', {
templateUrl: '/partials/home.html',
controller: 'HomeCtrl'
}).
otherwise({
templateUrl: '/partials/404.html',
});
}]);
js/controllers.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {
$scope.menuItems = [
{
'name': 'Home',
'path': '#/home'
}
];
});
js/controllers/home.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
$scope.title = "Home"
});
You are defining the same module twice (and by that overriding the first one), once in controllers.js and the other in controllers/home.js. If you want both controllers to be under the same module, you need to define it once with
var myWebAppControllers = angular.module('myWebAppControllers', []);
And in other places only retrieve it:
var myWebAppControllers = angular.module('myWebAppControllers');

Categories