first of all sorry for my bad English.
So, I want to add breadcrumb to my angular App. I'm trying to use this. Everything seems to work but it's not. Here's what I got now - see links on bottom
grey row should be my breadcrumb. I don't have any errors in console.
This is how look like html - see links on the bottom
I don't know where is error or my mistake.
Here's some code.
app.js
'use strict';
/**
* #ngdoc overview
* #name timeSheet2App
* #description
* # timeSheet2App
*
* Main module of the application.
*/
angular
.module('timeSheet2App', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngMaterial',
'ngMdIcons',
'appMenu',
'appProfiles',
'ngMdIcons',
'loginApp',
'calendarApp',
'registryApp',
'appConfiguration',
'ui.calendar',
'tasksApp',
'ui.router',
'ng-breadcrumbs',
'breadCrumbs'
])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', { templateUrl: '../views/profil.html', label: 'Profil' }
)
.when('/calendar', {
templateUrl: 'scripts/modules/calendar/views/calendar.html',
controller: 'CalendarCtrl',
controllerAs: 'vm',
label: 'Calendar'
})
.when('/login', {
templateUrl: 'scripts/modules/loginForm/views/login.html',
controller: 'LoginController',
controllerAs: 'vm',
label: 'Login'
})
.when('/register', {
templateUrl: 'scripts/modules/registerForm/views/register.html',
controller: 'RegisterController',
controllerAs: 'vm',
label: 'Register'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about',
label: 'About'
})
.when('/main', {
templateUrl: 'scripts/modules/menu/views/menu.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/menu', {
templateUrl: 'scripts/modules/menu/views/menu.html'
})
.when('/profil', {
templateUrl: 'views/profil.html'
})
.when('/404', {
templateUrl: '404.html',
})
.when('/quicktasks', {
templateUrl: 'scripts/modules/quicktasks/views/quicktasks.html',
controller: 'QuickTasksCtrl',
controllerAs: 'vm'
})
.when('/breadcrumbs', {
templateUrl: 'scripts/modules/breadcrumbs/views/breadcrumbs.html',
controller: 'BreadCrumbsCtrl',
controllerAs: 'vm',
label: 'Bread'
})
.otherwise({
redirectTo: '/404'
});
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function(event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
};
breadcrumbs.js
'use strict';
/**
* #ngdoc function
* #name timeSheet2App.controller:BreadcrumbsCtrl
* #description
* # BreadcrumbsCtrl
* Controller of the timeSheet2App
*/
angular.module('breadCrumbs',[])
.controller('BreadCrumbsCtrl', BreadCrumbsCtrl);
BreadCrumbsCtrl.$inject =['breadcrumbs'];
function BreadCrumbsCtrl (breadcrumbs) {
var vm = this;
vm.breadcrumbs = breadcrumbs;
};
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="scripts/modules/menu/styles/appMenu.css">
<link rel="stylesheet" href="scripts/modules/profiles/styles/appProfiles.css">
<link rel="stylesheet" href="scripts/modules/loginForm/styles/loginForm.css">
<link rel="stylesheet" href="scripts/modules/calendar/styles/calendar.css">
<link rel="stylesheet" href="scripts/modules/configuration/styles/appConfiguration.css">
<!-- endbuild -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body ng-app="timeSheet2App">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<ol class="ab-nav breadcrumb">
<li ng-repeat="breadcrumb in breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
<a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
<span ng-if="$last" ng-bind="breadcrumb.label"></span>
</li>
</ol>
<div ng-view class="containers"></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
! function(A, n, g, u, l, a, r) {
A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
(A[l].q = A[l].q || []).push(arguments)
}, A[l].l = +new Date, a = n.createElement(g),
r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
}(window, document, 'script', 'https://www.google- analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/screenfull/dist/screenfull.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ng-breadcrumbs/dist/ng-breadcrumbs.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src='bower_components/fullcalendar/dist/lang/pl.js'></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/modules/loginForm/controllers/LoginCtrl.js"></script>
<script src="scripts/modules/registerForm/controllers/RegisterCtrl.js"></script>
<script src="scripts/modules/loginForm/services/authentication.service.js"></script>
<script src="scripts/modules/loginForm/services/flash.service.js"></script>
<script src="scripts/modules/loginForm/services/user.service.local-storage.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/modules/menu/controller/menu.js"></script>
<script src="scripts/modules/menu/service/getMenuData.js"></script>
<script src="scripts/modules/menu/directive/menuLink.js"></script>
<script src="scripts/modules/menu/directive/menuToggle.js"></script>
<script src="scripts/modules/menu/directive/menuSidenav.js"></script>
<script src="scripts/modules/profiles/controller/appProfiles.js"></script>
<script src="scripts/modules/profiles/service/getDataProfiles.js"></script>
<script src="scripts/modules/profiles/directive/profilMini.js"></script>
<script src="scripts/modules/profiles/directive/settingProfil.js"></script>
<script src="scripts/modules/profiles/directive/editProfilOption.js"></script>
<script src="scripts/modules/calendar/controllers/CalendarCtrl.js"></script>
<script src="scripts/modules/calendar/controllers/CalendarCtrl.js"></script>
<script src="scripts/modules/configuration/controller/appConfiguration.js"></script>
<script src="scripts/modules/configuration/directive/configurationModule.js"></script>
<script src="scripts/modules/configuration/directive/configurationSetting.js"></script>
<script src="scripts/modules/quicktasks/controllers/quicktasks.js"></script>
<script src="scripts/modules/breadcrumbs/controllers/breadcrumbs.js"> </script>
<!-- endbuild -->
</body>
</html>
and folders structure
App
images
scripts
app.js
controllers
modules
breadcrumbs
calendar etc.
styles
views
Your breadcrumb section in the index.html doesn't have any controller assigned to it, so it can't ever locate an instance of the breadcrumb object. Also, you'll have to modify the HTML slightly to support the controllerAs syntax here.
Try this:
<div ng-controller="BreadCrumbsCtrl as breadctrl">
<ol class="ab-nav breadcrumb">
<li ng-repeat="breadcrumb in breadctrl.breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
<a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
<span ng-if="$last" ng-bind="breadcrumb.label"></span>
</li>
</ol>
</div>
Also, it looks like you declared 'breadCrumbs' as it's own module, so you'll want to move the ng-breadcrumbs module injection from the 'timeSheet2App' to 'breadcrumbs', e.g.:
angular.module('breadCrumbs',['ng-breadcrumbs'])
...
angular
.module('timeSheet2App', [
...
'ui.router',
//'ng-breadcrumbs', <-- no need for this here...
'breadCrumbs'
...
As a side note, I don't recommend using controllerAs: 'vm' for every controller in your app, it tends to make it harder to identify which controller is which, especially if you have nested controllers. It's much better to name the controllerAs something similar to your actual controller name.
Related
I am developing MEAN stack application. I have used external angular modules in an application. Due to the performance issue, I used the $ocLazyLoad module to load module wise dependency in an application. It works fine with a custom controller, directive, services which I have created and it loads lazily. But when I tried to use with external angular modules, it returns an error. Such as "reCAPTCHA" module of angular use for integrating google recaptcha in an application. it uses only in one place which is signup. Right now I required to include in index.html globally and it loads unnecessarily in every page of an application. So I don't know how to load external angular modules using $ocLazyLoad.
If I remove the dependency from index.html and add in $ocLazyLoadProvider then it throws me an error of an angular module dependency. Can anyone suggest me how to resolve this issue? I am not able to find out the solution of this issue. My main issue is that I don't know how to manage this external modules dependency using $ocLazyLoad. I tried to found from Internet but fails to manage in an application.
app.js
(function() {
'use strict';
}());
/*
* #param angular
*/
angular.
module('myApp', [
'ngResource',
'ngCookies',
'ngRoute',
'ngAnimate',
'ui.router',
'ngNotificationsBar',
'reCAPTCHA',
'oc.lazyLoad'
])
.config(
['reCAPTCHAProvider',
function(reCAPTCHAProvider) {
// required, please use site key:)
reCAPTCHAProvider.setPublicKey('my publick key');
// optional
reCAPTCHAProvider.setOptions({
theme: 'custom',
custom_theme_widget: 'recaptcha_widget' // The id of your widget element.
});
}
], ['notificationsConfigProvider',
function(notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true);
}
], ['cookieProvider',
function(cookieProvider) {
}
],
.run(['$rootScope', '$http', 'UserService', function($rootScope, $http, UserService) {
}]);
app.routes.js
(function () {
function config($ocLazyLoadProvider, $stateProvider, $urlRouterProvider, $httpProvider, $provide, $locationProvider) {
$urlRouterProvider.otherwise('home');
$ocLazyLoadProvider.config({
debug: true, // For debugging 'true/false'
events: true, // For Event 'true/false'
cache: true,
series: true,
modules: [{
name: 'authenticationAndAuthorization',
files: [
"/modules/auth/controllers/auth.js"
]
}, {
name: 'userNotification',
files: [
"/modules/user/controllers/UserNotificationCtrl.js",
]
}, {
name: 'appSocket',
files: [
"/modules/common/services/HzSocket.js"
]
}]
});
$stateProvider
.state('app', {
url: '/',
abstract: true,
views: {
'globalHeaderLine1': {templateUrl: '/partials/headerLine1.html'},
},
resolve: {
content: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['userNotification'])
}]
}
})
/*
* Error page
*/
.state("app.error", {
url: "error/:code",
views: {
'content#': {templateUrl: '/partials/error.html', controller: 'ErrorCtrl', controllerAs: 'Error'}
}
})
.state("app.signin", {
url: "signin/:referer",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signin.html', controller: 'SigninCtrl', controllerAs: 'Signin'}
}
})
.state("app.signup", {
url: "signup",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signup.html', controller: 'SignupCtrl', controllerAs: 'Signup'}
}
})
}
angular
.module('myApp')
.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$provide', '$locationProvider', config])
}());
index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="MobileOptimized" content="320" />
<meta name="description" content="MyApp" />
<meta http-equiv="Cache-control" content="public" />
<link rel="shortcut icon" href="/favicon.ico" />
<link data-require="bootstrap-css#3.0.1" data-semver="3.0.1" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/angular-csp.css" />
<link type="text/css" rel="stylesheet" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/css/animation.css" />
<title>Welcome to MyApp</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="site_loader"></div>
<!-- Header section -->
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<div class="clear"></div>
<div>
<div class="container_video" ui-view="homeVideoPage"></div>
<div ui-view="featureBar"></div>
<div ui-view="content"></div>
<footer class="clear" ui-view="footer"></footer>
</div>
<!-- Javascript Dependencies -->
<!-- Application-->
<script type="text/javascript" src="/vendor/utils/modernizr.custom.js"></script>
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/utils/lodash.min.js"></script>
<!-- angular core files -->
<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-cookies.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-animate.js"></script>
<script type="text/javascript" src="/vendor/utils/ocLazyLoad.js"></script>
<!-- notificationbar -->
<script type="text/javascript" src="/vendor/angular/ngNotificationsBar.min.js"></script>
<!-- google recaptch -->
<script type="text/javascript" src="/vendor/angular/angular-re-captcha.min.js"></script>
<script type="text/javascript" src="/client/app.js"></script>
<script type="text/javascript" src="/client/app.routes.js"></script>
</body>
</html>
controller.js
I am following below way to developing a code in the controller.
(function () {
'use strict';
function SignupCtrl($http, $scope, $rootScope, $cookies, UserService, HzServices, HzSocket) {
// Signup code.
}
angular
.module('myApp')
.controller('SignupCtrl', ['$http', '$scope', '$rootScope', '$cookies', 'UserService', 'HzServices', 'HzSocket', SignupCtrl]);
}());
I used Angular for a while, but it has changed greatly since I last used it... I'm running into some issues, as I can't get the application to load at all.
When I try to load the individual webpages, I get just the basic HTML, but no error messages... [I'm loading it using the live preview option in Brackets]
The file hierarchy is as follows:
index.html
bower_components
js
-- app.js
-- ctrl
--- about.js
--- home.js
html
-- home.html
-- about.html
The files:
index.html
<!DOCTYPE HTML>
<html lang="en" np-app="stagerite" ng-controller="indexCtrl">
<head>
<!-- meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title/icon -->
<title>StageRite - {{ Page.title() }}</title>
<link rel="shortcut icon" href="img/" />
<!-- bower imports -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- local css -->
<!-- local js -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/ctrl/index.js"></script>
<script type="text/javascript" src="js/ctrl/home.js"></script>
<script type="text/javascript" src="js/ctrl/about.js"></script>
<!-- fonts -->
</head>
<body unresolved fullbleed>
<div ng-view></div>
</body>
</html>
app.js
/*global angular, console, alert*/
(function () {
'use strict';
/* Initialize application. */
var stagerite = angular.module('stagerite', [
'ngRoute'
]);
/* Set routes. */
stagerite.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: '../html/about.html',
controller: 'aboutCtrl'
}).
when('/home', {
templateUrl: '../html/home.html',
controller: 'homeCtrl'
}).
otherwise({
templateUrl: '../html/home.html',
controller: 'homeCtrl'
});
}]);
/* Set page titles. */
stagerite.factory('Page', function () {
var title = 'Home';
return {
title: function () {
return title;
},
setTitle: function (newTitle) {
title = newTitle;
}
};
});
}());
home.html
<div ng-controller="homeCtrl">
</div>
index.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var indexCtrl = angular.module('stagerite', []);
indexCtrl.controller('indexCtrl', ['$scope', 'Page', function ($scope, Page) {
$scope.Page = Page;
}]);
}());
home.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var homeCtrl = angular.module('stagerite', []);
homeCtrl.controller('homeCtrl', ['$scope', 'Page', function ($scope, Page) {
Page.setTitle('Home');
}]);
}());
Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
I am unable to understand why the routing isn't working.
I've checked many times for syntax errors or misspelling but that doesn't seem to be the case. I also checked the console and it returns nothing. Doesn't appear to be any issues.
var app = angular.module("myApp", ['ngRoute']);
// Main Controller
app.controller("controller", function($scope) {
$scope.search = {};
});
// Routing
app.config(function($routeProvider) {
console.log("working");
$routeProvider.when('/', {
controller: "controller",
templateUrl: "templates/listings.html"
}).when('/login', {
controller: "controller",
templateUrl: "templates/login.html"
})
});
<html ng-app="myApp">
<head>
<title>logo</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- ANGULAR FILES -->
<!-- Angular.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<!-- ngRoute Script -->
<script type="text/javascript" src="js/angular-route.js"></script>
<!-- Route -->
<script type="text/javascript" src="routes/route.js"></script>
<!-- Angular App -->
<script type="text/javascript" src="app.js"></script>
<!-- Json Data -->
<script type="text/javascript" src="data.js"></script>
<!-- ======================================================================->
<!-- Index CSS ( Mainly All The CSS) -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Login CSS -->
<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- Montserrat -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- Open Sans -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- neutron -->
<link href='https://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
<!-- Lato -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="controller">
<div class="wrapper">
<div ng-include="'includes/navbar.html'"></div>
<!-- NG VIEW -->
<div ng-view></div>
<div class="footer">
<!-- footer content goes here -->
</div>
</div>
</body>
</html>
Your code seems correct. Currently you are just loading the page, without any change in the URL, so the angular router doesn't do anything.
Basically you need to add default route by having .otherwise to your $routeProvider which will redirect to / default page.
$routeProvider.when('/', {
controller: "controller",
templateUrl: "templates/listings.html"
})
.when('/login', {
controller: "controller",
templateUrl: "templates/login.html"
})
.otherwise({
redirectTo: '/'
});
Make sure you have same version of angularjs & angular-route
Working Fiddle Thanks to #Denis for creating Fiddle.
I'm new to angular and getting the following error and cant figure out why!
Uncaught Error: [$injector:modulerr] Failed to instantiate module PaymentApp due to:
You need to define an async loader such as requireJS or script.js
I cant find any reference on the web either why I'm getting this!
Any idea?
Thanks
EDIT MORE CODE:
App.js
'use strict';
/**
* #ngdoc overview
* #name PaymentApp
* #description
* # PaymentApp
*
* Main module of the application.
*/
angular
.module('PaymentApp', [
'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
])
.config(['$stateProvider','$urlRouterProvider','$ocLazyLoadProvider',function ($stateProvider,$urlRouterProvider,$ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
debug:false,
events:true,
});
$urlRouterProvider.otherwise('/dashboard/home');
$stateProvider
.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/main.html',
resolve: {
loadMyDirectives:function($ocLazyLoad){
return $ocLazyLoad.load(
{
name:'PaymentApp',
files:[
'scripts/directives/header/header.js',
'scripts/directives/header/header-notification/header-notification.js',
'scripts/directives/sidebar/sidebar.js',
'scripts/directives/sidebar/sidebar-search/sidebar-search.js'
]
}),
$ocLazyLoad.load(
{
name:'toggle-switch',
files:["bower_components/angular-toggle-switch/angular-toggle-switch.min.js",
"bower_components/angular-toggle-switch/angular-toggle-switch.css"
]
}),
$ocLazyLoad.load(
{
name:'ngAnimate',
files:['bower_components/angular-animate/angular-animate.js']
})
$ocLazyLoad.load(
{
name:'ngCookies',
files:['bower_components/angular-cookies/angular-cookies.js']
})
$ocLazyLoad.load(
{
name:'ngResource',
files:['bower_components/angular-resource/angular-resource.js']
})
$ocLazyLoad.load(
{
name:'ngSanitize',
files:['bower_components/angular-sanitize/angular-sanitize.js']
})
$ocLazyLoad.load(
{
name:'ngTouch',
files:['bower_components/angular-touch/angular-touch.js']
})
}
}
})
.state('dashboard.home',{
url:'/home',
controller: 'MainCtrl',
templateUrl:'views/dashboard/home.html',
resolve: {
loadMyFiles:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'PaymentApp',
files:[
'scripts/controllers/main.js',
'scripts/directives/timeline/timeline.js',
'scripts/directives/notifications/notifications.js',
'scripts/directives/chat/chat.js',
'scripts/directives/dashboard/stats/stats.js'
]
})
}
}
})
.state('dashboard.form',{
templateUrl:'views/form.html',
url:'/form'
})
.state('dashboard.blank',{
templateUrl:'views/pages/blank.html',
url:'/blank'
})
.state('login',{
templateUrl:'views/pages/login.html',
url:'/login'
})
.state('dashboard.chart',{
templateUrl:'views/chart.html',
url:'/chart',
controller:'ChartCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'chart.js',
files:[
'bower_components/angular-chart.js/dist/angular-chart.min.js',
'bower_components/angular-chart.js/dist/angular-chart.css'
]
}),
$ocLazyLoad.load({
name:'PaymentApp',
files:['scripts/controllers/chartContoller.js']
})
}
}
})
.state('dashboard.table',{
templateUrl:'views/table.html',
url:'/table'
})
.state('dashboard.panels-wells',{
templateUrl:'views/ui-elements/panels-wells.html',
url:'/panels-wells'
})
.state('dashboard.buttons',{
templateUrl:'views/ui-elements/buttons.html',
url:'/buttons'
})
.state('dashboard.notifications',{
templateUrl:'views/ui-elements/notifications.html',
url:'/notifications'
})
.state('dashboard.typography',{
templateUrl:'views/ui-elements/typography.html',
url:'/typography'
})
.state('dashboard.icons',{
templateUrl:'views/ui-elements/icons.html',
url:'/icons'
})
.state('dashboard.grid',{
templateUrl:'views/ui-elements/grid.html',
url:'/grid'
})
}]);
And then the view (im using asp.net) that loads this app is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/App/styles/main.css">
<link rel="stylesheet" href="~/App/styles/sb-admin-2.css">
<link rel="stylesheet" href="~/App/styles/timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="~/Scripts/ocLazyLoad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
#RenderSection("scripts", required: false)
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="~/App/scripts/app.js"></script>
<script src="~/App/js/sb-admin-2.js"></script>
<!-- endbuild -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
<!-- Morris Charts CSS -->
<!-- <link href="styles/morrisjs/morris.css" rel="stylesheet"> -->
</head>
<body>
<div ng-app="PaymentApp">
<div ui-view></div>
<div id="contents" ng-view ng-cloak translate-cloak>
<!-- Checkout: start-->
#RenderBody()
<!-- Checkout: end -->
</div>
</div>
</body>
</html>