Hi I am having an issue with my code here where I can't seem to get my views to load within my template.
Here are my tags:
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
Here is my JS:
angular.module('dnsApp', ["ngRoute"])
var app = angular.module('dnsApp');
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/reporting.html'
})
.when('/reporting', {
templateUrl: 'views/reporting.html'
})
.when('/detectionSummary', {
templateUrl: 'views/detection-summary.html'
})
.when('/operationalMetrics', {
templateUrl: 'views/operational-metrics.html'
});
}]);
Here is my HTML:
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-dashboard"></i> <span class="sr-only">(current)</span></li>
<li><i class="fa fa-bolt"></i></li>
<li><i class="fa fa-bar-chart"></i></li>
</ul>
Nothing shows up and I am relatively new to AngularJs so any help would be much appreciated. Thanks!
You should not declare the module again, change it as
//remove this line angular.module('dnsApp', ["ngRoute"])
var app = angular.module('dnsApp', ["ngRoute"])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/reporting.html'
})
.when('/reporting', {
templateUrl: 'views/reporting.html'
})
.when('/detectionSummary', {
templateUrl: 'views/detection-summary.html'
})
.when('/operationalMetrics', {
templateUrl: 'views/operational-metrics.html'
});
}]);
you should add your module js to your tags in your "index".
also a ng-view in your main index.
documentation:https://docs.angularjs.org/api/ngRoute/directive/ngView
Related
The short story:
When I open up the index page using gulp watch, I see nothing.
I get the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=confusionApp&p1=Er…0(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-94e7868a45.js%3A1%3A18165)
When I hit the link to see what the error is, it says that:
Failed to instantiate module {0} due to:
{1}
It then goes into ngRoute issues which I'm not using at this point, as I am using angular-ui-router.
I can't go any further without solving this problem so I'm throwing it up to you guys.
The code is below, but bear in mind,I am only including the areas I have changed in the assignment as it would be too long for this post. So if there's any other code you'd like to see, please put them into the contents.
Thanks.
header.html
...
<ul class="nav navbar-nav">
<li class="active">
<a ui-sref="app">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a ui-sref="app.aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a ui-sref="app.menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a ui-sref="app.contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
...
footer.html
...
<ul class="list-unstyled">
<li><a ui-sref="app">Home</a></li>
<li><a ui-sref="app.aboutus">About</a></li>
<li><a ui-sref="app.menu">Menu</a></li>
<li><a ui-sref="app.contactus">Contact</a></li>
</ul>
...
app.js
'use strict';
angular.module('confusionApp',['ui.router'])
.config(function($stateProvider, $urlRouteProvider){
$stateProvider
//route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl: 'views/header.html',
},
'content': {
template: '<h1>To be completed</h1>',
controller: 'IndexController'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
//route to aboutus page
.state('app.aboutus', {
url:'aboutus',
views: {
'content#': {
template: '<h1>To be completed</h1>',
controller: 'AboutController'
}
}
})
//route to contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content#': {
templateUrl: 'views/contactus.html',
controller: 'ContactController'
}
}
})
//route to menu page
.state('app.menu', {
url:'menu',
views: {
'content#': {
templateUrl: 'views/menu.html',
controller: 'MenuController'
}
}
})
//route to dishdetail page
.state('app.dishdetail', {
url:'menu/:id',
views: {
'content#': {
templateUrl: 'views/dishdetail.html',
controller: 'DishDetailController'
}
}
});
$urlRouteProvider.otherwise('/');
})
;
menu.html
...
<div class="media-left media-middle">
<a ui-sref="app.dishdetail({id: dish._id})">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt={{dish.name}} />
</a>
</div>
...
index.html
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<!-- <script src="../bower_components/angular-route/angular-route.min.js"></script> -->
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
When I downloaded the new app.js file, it fixed everything, but there wasn't that much different between the two files. (Much frustration.)
The templates were replaced with templateUrls which I had actually done and everything was the same, but when I just copied and pasted the code over my code, it worked.
Here is the new working code:
'use strict';
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html',
},
'content': {
templateUrl : 'views/home.html',
controller : 'IndexController'
},
'footer': {
templateUrl : 'views/footer.html',
}
}
})
// route for the aboutus page
.state('app.aboutus', {
url:'aboutus',
views: {
'content#': {
templateUrl : 'views/aboutus.html',
controller : 'AboutController'
}
}
})
// route for the contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content#': {
templateUrl : 'views/contactus.html',
controller : 'ContactController'
}
}
})
// route for the menu page
.state('app.menu', {
url: 'menu',
views: {
'content#': {
templateUrl : 'views/menu.html',
controller : 'MenuController'
}
}
})
// route for the dishdetail page
.state('app.dishdetails', {
url: 'menu/:id',
views: {
'content#': {
templateUrl : 'views/dishdetail.html',
controller : 'DishDetailController'
}
}
});
$urlRouterProvider.otherwise('/');
})
;
And if you are facing the same issue with the same course, then please copy and paste the app.js code even if you've filled everything in correctly.
I have a Home.html screen and its corresponding Angularjs controller(HomeController.js). I am using jQuery Navigation sidebar on home screen. This navigation sidebar has a logout list item (li). I have given ng-click="logout()" to this li (list item), and I have defined logout() in HomeController.js.
When I click on logout, It doesn't give alert, probably it's not going to this controller.
Home.html
<nav id="menu">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 sidebar-nav-menu">
<div class="menu_nav">
<ul>
<li>
<a href="#" ng-click="logout();">
<img src="img/left-pannel/logout#2x.png" id="nav-icn-home" alt="" class="sidebar-menu-icons">
<span class="nav-menu-text">Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div></nav>
HomeController.js
app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
config.js
var tkitApp = angular.module('tkit', ['ngRoute']);tkitApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/LaunchScreen.html',
controller: 'LaunchScreenController'
}).when('/Login', {
templateUrl: 'views/Login.html',
controller: 'LoginScreenController'
}).when('/Home', {
templateUrl: 'views/Home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });}]);
I am not even getting alert on click of logout list item.
Logcat when Home.html gets loaded
03-11 17:34:37.530: I/chromium(29156): [INFO:CONSOLE(2)] "HomeController loaded", source: file:///android_asset/www/js/controller/HomeScreenController.js (2)
Your controller name is different in routing
$routeProvider.when('/', {
templateUrl: 'views/LaunchScreen.html',
controller: 'LaunchScreenController'
}).when('/Login', {
templateUrl: 'views/Login.html',
controller: 'LoginScreenController'
}).when('/Home', {
templateUrl: 'views/Home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });}]);
And Controller is
app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
Please change your controller name like this
app.controller("HomeScreenController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
alert("Click");
$location.path("/Login");
}});
It will work
My project has the file home, page1, page2.
My home page has a different header layout than the rest of my pages. So, it is a separate html file. page1 and page 2 is using ui routing to load in the content of the page, but the header and footer are the same.
My Question is: if I am on the home page and click btn 1. how do I get it to load in the content of page1? (It will load index.html, but no content of btn1.)
I'm not sure if passing an id to the index.js is a solution and I'm not sure how to even do that. Would it make more sense to just make the entire thing a SPA?
My home.html with the buttons:
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>
My idex.html:
<body>
<div class="container" ng-app="app">
<header ng-include="'html/header.html'"></header>
<div ui-view></div>
<footer ng-include="'html/footer.html'"></footer>
</div>
</body>
<script src="vendors/angular/angular.js"></script>
<script src="vendors/angular-ui-router/release/angular-ui-router.js </script>
<script src="scripts/index.js"></script>
my header.html:
<div id="headerLinks">
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
<a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
</div>
</div>
my index.js:
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Page1', {
url: 'Page1',
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.state('Page2', {
url: 'Page2',
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
}])
I"m kinda confused by what I was asking now that I look at it. I believe I was asking how to build a router with multiple pages. I got that to work. if this doesn't help, I'll see if I can find a resource or explain it better.
import angular-ui-router.
<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
This is what my index.js file now looks like. it has multiply views which allow for different header or content or footer or whatever.
var app = angular.module('app', [
'ui.router',
'ctrls'
]);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/home',
views: {
'header': {
templateUrl: 'html/headerHome.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'home.html',
//controller: 'ContentController'
}
}
})
.state('page1', {
url: '/page1',
views: {
'header': {
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'page1.html',
controller: 'page1Ctrl'
}
}
})
.state('page2', {
url: '/page1',
views:{
'header':{
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content':{
templateUrl: 'page2.html',
controller: 'page2Ctrl'
}
}
})
I wrote an app with angular.js and trying to load different subviews based on the page they land on. Specifically, when the user is landing on the english version a partial view is loaded and when they land on the french version a different one is loaded. But whatever I'm not seeing in my code makes the subview always land on the ELSE (or '/') route. This is the current code in my appRoutes.js file...
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
var homeLang = document.documentElement.getAttribute('lang');
var english = 'en';
var homeView = function (homeLang) {
if (homeLang === english) {
homeView = '/';
return homeView;
} else {
homeView = '/accueil';
return homeView;
}
};
$routeProvider
// client routes
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
.when('/web', {
templateUrl: 'views/web.html',
controller: 'MainController'
})
.when('/design', {
templateUrl: 'views/design.html',
controller: 'MainController'
})
.when('/hosting', {
templateUrl: 'views/hosting.html',
controller: 'MainController'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'MainController'
})
.when('/accueil', {
templateUrl: 'views/accueil.html',
controller: 'MainController'
})
.when('/sites', {
templateUrl: 'views/sites.html',
controller: 'MainController'
})
.when('/services', {
templateUrl: 'views/services.html',
controller: 'MainController'
})
.when('/hebergement', {
templateUrl: 'views/hebergement.html',
controller: 'MainController'
})
.when('/contactez', {
templateUrl: 'views/contactez.html',
controller: 'MainController'
})
.otherwise({ redirectTo: homeView });
$locationProvider.html5Mode(true);
}]);
Here is the HTML that loads the different views.
<body ng-app="myApp">
<div class="navbar-wrapper">
<div class="container">
<div role="navigation" class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse">
<div class="nav navbar-nav">
<li>Accueil</li>
<li>Sites & Apps</li>
<li>Design</li>
<li>Hébergement</li>
<li>Contact</li>
</div>
</div></div></div></div></div>
<section class="content">
<div ng-view></div></section></body>
in your view, you can load a different template based on language without changing routing.
for example have in the routed view something like
than you can also add a ng-if before each span to check the language value.
I actually went back to the code and used ui-router instead and created states with building blocks (several views) and it solved all my issues!! :)
I am very new to angular js.
I have implemented routing in angular js but it does not redirect me to the pages I have stated in the route.js
here is the code:
Route.js
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/getplaces', {
templateUrl: 'getplaces.html',
controller: 'ListCtrl',
}).
when('/getuncategorisedplaces', {
templateUrl: 'list.html',
controller: 'uncatCtrl'
})
.otherwise ({
redirectTo: '/getplaces'
});
}]);
Controller.js
function uncatCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data) {
$scope.places = data;
console.log(data);
}
)}
// get places
function ListCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getplaces').success(function (data) {
$scope.places = data;
console.log("Successful")
console.log(data);
}
)}
HTML code includes ng view and href such as href="#getplaces"
<body ng-app="sampleApp" >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> <a class= "linha" href="#getplaces"> Get places </a></li>
<li><a class= "linha" href="post.html"> Post a movie </a></li>
<li><a class= "linha" href="#getuncategorisedplaces">List of uncategorised places </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
Check that you have both scripts included (angular and ngroute)
<script src='angular.js'>
<script src='angular-route.js'>
Then check that you are including that module in your app:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
As of Angular 1.2.0, angular-route is a separate module
refer to the angular documentation:
https://docs.angularjs.org/api/ngRoute
Here is an example code that i have written a while ago.
var app = angular.module('test', ['ngRoute','ngGrid','ngBootstrap', 'http-auth-interceptor','ui.bootstrap','ngCookies','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/sign-in', {templateUrl: 'partials/login/signin.html', controller: LoginCtrl}).
when('/admin/sign-in', {templateUrl: 'partials/login/userManagementSignin.html', controller: LoginCtrl}).
otherwise({redirectTo: '/dashboard'});
}]);