I am going through ng-grid tutorial present at http://blog.backand.com/ng-grid-and-a-simple-rest-api/
When I follow all the steps it shows following error in console
Error: [$injector:unpr] Unknown provider: gridServiceProvider <- gridService <- homeController
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=gridServiceProvider%20%3C-%20gridService%20%3C-%20homeController
at http://localhost:9000/js/libs.min.js:9269:12
at http://localhost:9000/js/libs.min.js:13200:19
at Object.getService [as get] (http://localhost:9000/js/libs.min.js:13347:39)
at http://localhost:9000/js/libs.min.js:13205:45
at getService (http://localhost:9000/js/libs.min.js:13347:39)
at invoke (http://localhost:9000/js/libs.min.js:13379:13)
at Object.instantiate (http://localhost:9000/js/libs.min.js:13396:27)
at http://localhost:9000/js/libs.min.js:17655:28
at link (http://localhost:9000/js/libs.min.js:39064:26)
at invokeLinkFn (http://localhost:9000/js/libs.min.js:17419:9) <div ng-view="" class="ng-scope">libs.min.js:20800
(anonymous function)libs.min.js:17750
(anonymous function)libs.min.js:17421
invokeLinkFn libs.min.js:16928
nodeLinkFn libs.min.js:16281
compositeLinkFn libs.min.js:16160
publicLinkFn libs.min.js:16299
boundTranscludeFn libs.min.js:16955
controllersBoundTransclude libs.min.js:39022
update libs.min.js:23908
Scope.$broadcast libs.min.js:38705
(anonymous function)libs.min.js:22376
processQueuelibs.min.js:22392
(anonymous function)libs.min.js:23589
Scope.$evallibs.min.js:23405
Scope.$digestlibs.min.js:23694
Scope.$applylibs.min.js:18852
donelibs.min.js:19042
completeRequestlibs.min.js:18983 requestLoaded
Why does it show this error? My gridService.js is
'use strict';
angular.module('angularGruntSeed')
.factory('GridService', ['$http', '$q',
function($http, $q) {
var contributorsFile = 'json/contributors.json';
var contributors = [];
function getContributors() {
var deferred = $q.defer();
$http.get(contributorsFile)
.then(function(result) {
contributors = result.data;
deferred.resolve(contributors);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
return {
getContributors: getContributors
};
}
]);
homeController.js is
angular.module('angularGruntSeed')
.controller('HomeController', ['$scope', 'GridService',
function($scope, gridService) {
gridService.getContributors().then(function(data) {
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData'
};
}
]);
app.js
'use strict';
// Declare core application module which pulls all the components together
angular.module('angularGruntSeed', [
'ngAnimate',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngGrid',
]);
app-routes.js
'use strict';
angular.module('angularGruntSeed')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/templates/home.html',
controller: 'homeController'
})
.otherwise({ redirectTo: '/' });
}]);
<!doctype html>
<html lang="en" ng-app="angularGruntSeed">
<head>
<title>Angular Grunt Seed Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/ng-grid/ng-grid.css" rel="stylesheet">
<link href="css/starter-template.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular Seed</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div ng-view></div>
<!-- build:js js/libs.min.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-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/fastclick/lib/fastclick.js"></script>
<script src="../bower_components/ng-grid/ng-grid-2.0.14.debug.js"></script>>
<!-- endbuild -->
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<script src="js/app-routes.js"></script>
<script src="js/homeController.js"></script>
<!-- endbuild -->
</body>
</html>
Put the HomeController,js before the other js files:
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<script src="js/gridService.js"></script>
<script src="js/homeController.js"></script>
<script src="js/app-routes.js"></script>
Order matters, it can't find the controller because it's not yet declared.
Related
I want to insert header and nav bar into index.html
When header and nav bar are in index.html, My app works well.
but seperate these files to html and try to load, ui-view do not load script files.
So logout function does not work when ui-view loaed header.html
On the other hand, css works well.
I tried to follow answers like
Angularjs does not load scripts within ng-view
or
html partial is not loaded into ui-view
but it did not help to fix my problem..
Why this situation occurred?
Please any handsome or pretty developer help me..
These are my code.
app.js
'use strict';
var mainApp = angular
.module('adminApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router'
]);
mainApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin/login');
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'headerContainer': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
},
'navContainer':{
templateUrl: 'views/nav.html',
controller: 'NavCtrl',
controllerAs: 'nav'
}
}
})
.state('root.login', {
...
})
});
index.html
<!DOCTYPE html>
<html ng-app="adminApp">
<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>Admin</title>
<base href="/">
<!-- CSS-->
<link href="bower_components/bootstrap/dist/css/main.css" rel="stylesheet">
<!-- Font-icon css-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- start: Favicon -->
<link href="favicon.ico" rel="shortcut icon">
<!-- end: Favicon -->
</head>
<body class="sidebar-mini fixed" ng-controller="AppCtrl">
<div class="wrapper">
<div ui-view="headerContainer"></div>
<div ui-view="navContainer"></div>
<div ui-view="appContainer"></div>
</div>
<!-- Javascripts-->
<script src="../bower_components/bootstrap/dist/js/jquery-2.1.4.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.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-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap/dist/js/main.js" ></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/headerCtrl.js"></script>
<script src="scripts/controllers/navCtrl.js"></script>
</body>
</html>
header.html
<header class="main-header hidden-print">
<nav class="navbar navbar-static-top">
<div class="navbar-custom-menu">
<ul class="top-nav">
<li>
<a ng-click="logout();">Logout</a>
</li>
</ul>
</div>
</nav>
</header>
headerCtrl.js
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
$scope.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
main.js
$('.top-nav li a').on('click', function (e) {
console.log('Clicked header li');
});
It seems like you haven't used controller alias while calling logout method
ng-click="header.logout();"
As #pankaj said you need to declare the logout method on your controller alias
ng-click="header.logout();"
And the same applies for your js. You have to reference logout with this keyword since you are using controller as syntax
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
var vm =this;
vm.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
For more Info: AngularJs "controller as" syntax - clarification?
I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to:
Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to:
Error: [$injector:unpr] Unknown provider: $stateProvider"
I'm not sure why this is happening although the $stateProvider service is already injected. Can you please help me identify why I'm getting this error message?
postModule.js contents:
'use strict'
angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
angular.module('spBlogger.posts')
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
$stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
index.html contents:
<!doctype html>
<html lang="en" ng-app="spBlogger">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="modules/posts/css/posts.css">
</head>
<body>
<div class="container">
<br/>
<div class="jumbotron text-center">
<h1>The Single Page Blogger</h1>
<p>One stop blogging solution</p>
</div>
<div ui-view> The angular ui-view should be displayed here!</div>
<div class="row footer">
<div class="col-xs-12 text-center">
<p>The Single Page Blogger
<app-version/>
</p>
</div>
</div>
</div>
</body>
<!-- build:js app/built/app.min.js -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>
<!-- endbuild -->
</html>
This is the app.js
'use strict'
angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);
angular.module('spBlogger').value('version', 'V1.0');
angular.module('spBlogger').run(['state', function (state) {
$state.go('allPosts');
}]);
controllers.js
'use strict'
angular.module('spBlogger.posts.controllers', [])
.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
$scope.getAllPosts = function () {
return postService.getAll();
};
$scope.posts = $scope.getAllPosts();
}])
.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {
$scope.getPostById = function (id) {
return postService.getPostById(id);
};
$scope.closePost = function () {
$state.go('allPosts');
};
$scope.singlePost = $scope.getPostById($stateParams.id);
}])
;
You missed to add a dependency to ui.router in your application module:
angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team.
I started with AngularJS, and my route doesn't work. I searched in google and try some solution found but nothing works.
My index.html (public/index.html)
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projet Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--<li class="active">Link <span class="sr-only">(current)</span></li>-->
<li>Véhicules</li>
<li>Agences</li>
<li>Agents</li>
<li>Statut</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- div pour les templates-->
<div ng-view>
</div>
</body>
</html>
My app.js (javascript/app.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '../views/index.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/vehicules', {
templateUrl : '../views/vehicules.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/agents', {
templateUrl : '../views/vehicules.html',
controller : 'AgentsCtrl'
})
// route for the about page
.when('/agences', {
templateUrl : '../views/vehicules.html',
controller : 'AgencesCtrl'
})
// route for the about page
.when('/status', {
templateUrl : '../views/vehicules.html',
controller : 'StatusCtrl'
})
.otherwise({redirectTo: '/'});
});
And my controller (controllers/VehiculesCtrl.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {
$scope.text = 'Salut ! je teste le controleur';
var url = '127.0.0.1:3000/vehicules';
//console.log("curieux", VehiculesGet);
var res = VehiculesGet.getAllVehicules(url, function(data, status){
console.log("test",status);
console.log("test",data);
$scope.result = data;
});
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
//var url = 'http://127.0.0.1:3000/vehicules';
var result;
var data;
return {
getAllVehicules: function(url, callback) {
$http.get('http://127.0.0.1:3000/vehicules')
.success(function (data, status) {
// données récupérées avec succès
callback(data, status);
}).error(function(data,status){
callback(data, status);
});
}
};
}]);
My tree:
public
javascripts
controllers
VehiculesCtrl.js
app.js
views
index.html
Help me please :) ...... And sorry for my english x)
Thanks
I think you should add
<body ng-controller="VehiculeCtrl">
to your controller and remove
var myApp = angular.module('myApp', ['ngRoute']);
from your controller.
Then export your controller from app.js like
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)
Try to load the angular-route after the angular, not after your controller, this should work
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
</head>
You are missing the ng-view element in your markup. This is where the routing functionality places the templateUrl content. See this link for documentation: https://docs.angularjs.org/api/ngRoute/directive/ngView
You should remove var myApp = angular.module('myApp', ['ngRoute']) from VehiculesCtrl.js. In VehiculesCtrl.js you should use myApp variable which is declared in app.js
I'm newbie to AngularJs and when I try to use version 1.4.9 of Angular instead of 1.2.9 (that i used with no problem) i get error. I read about the need of declare new function in this way:
angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
//$scope.message = 'Pagina Delle info!!!';//
}]);
instead of:
function getTask($scope, $http, Base64) {
//do something
};
But i got always this error:
Error: ng:areq
Bad Argument ---
Argument 'mainController' is not a function, got undefined
I think the error refer to this code, but i already changed the way i declare the function.
In JS:
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'view/home.html',
controller: 'mainController'
})
// route for the about page
.when('/prenotazione', {
templateUrl: 'view/prenotazione.html',
controller: 'prenotazioneController'
})
.when('/login', {
templateUrl: 'view/login.html',
controller: 'loginController'
});
});
// create the controller and inject Angular's $scope
angular
.module('scotchApp', [])
.controller('mainController', [function ($scope) {
// create a message to display in our view
$scope.message = 'Vai alla Prenotazione';
}]);
angular.module('scotchApp', []).controller('prenotazioneController', [function ($scope) {
/* $scope.message = 'Pagina Delle info!!!';*/
}]);
angular.module('scotchApp', []).controller('loginController', [function ($scope) {
$scope.message = '*Necessario per eseguire una prenotazione';
}]);
In HTML:
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="style.css" rel="stylesheet" type="text/css">
<!-- SPELLS -->
<script src="//code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.9/angular-route.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="test.js"></script></head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img class="hidden-xs" src="image/logo.png" alt="">
<img class="visible-xs" src="image/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</div>
You are referencing the app module incorrectly:
Your code:
angular.module('scotchApp', [])
.controller(...)
By using the angular.module('scotchApp', []) with the brackets [ ] you are essentially overwriting your app module every time.
Change it to this:
angular
.module('scotchApp')
.controller(...)
You only need to create the app module once and then reference it.
Creating a module:
angular.module("app", []); // creates a module.
Referencing a module:
angular.module("app"); // reference a module.
Here is a simple example below:
(function () {
var app = angular.module("app", []);
app.controller("MainController", MainController);
MainController.$inject = ["$http"];
function MainController($http) {
}
})();
Here is a Plnkr Example using your style of code. Hope this helps and clarify a few things.
I just migrated a working front end from brackets to Visual studio 2015, after having to re get all of my packages due to the 260 character limit and the deeply nested bower file paths I am getting a 404. I have been though my code three or four times and I just cannot seem to find the problem. Can somebody please take a look at what I have and point me in the right direction.
The error message is that it cannot find my file moduleindex.html in its specified location. But I double check the path and that is where it is.
Here is app.js and app.config.js
(function() {
'use strict';
angular
.module('app', ['ui.router']);
})();
(function() {
angular
.module('app').config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('main', {
url: '/',
templateUrl: '/views/moduleIndex.html'
});
$stateProvider.state('register', {
url: '/register',
templateUrl: '/views/register.html',
cotroller: 'register'
});
$stateProvider.state('userSettings', {
url: '/userSettings',
templateUrl: '/views/userSettings.html',
cotroller: 'userSettings'
});
$stateProvider.state('doctorView', {
url: '/doctorView',
templateUrl: '/views/doctorView.html',
cotroller: 'doctorView'
});
$stateProvider.state('injuriesDict', {
url: '/injuriesDict',
templateUrl: '/views/injuriesDictionary.html',
cotroller: 'injuriesDictionary'
});
$stateProvider.state('excercisesDict', {
url: '/excercisesDict',
templateUrl: '/views/excercisesDictionary.html',
cotroller: 'injuriesDictionary'
});
$stateProvider.state('patientEntry', {
url: '/patientEntry',
templateUrl: '/views/patientEntryForm.html',
cotroller: 'patientEntry'
});
$stateProvider.state('patientView', {
url: '/patientView',
templateUrl: '/views/patientView.html',
cotroller: 'patientView'
});
$stateProvider.state('therapistView', {
url: '/therapistView',
templateUrl: '/views/therapistView.html',
cotroller: 'therapistView'
});
$stateProvider.state('adminView', {
url: '/adminView',
templateUrl: '/views/adminView.html',
cotroller: 'adminView'
});
});
})();
Here is index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/bootstrap.min-flatly.css">
<!-- endbuild -->
</head>
<body ng-app="app">
<!--[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 -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container" ng-cloak>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-sref="#/">Physical Therapy Fitness Tracker</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a ui-sref-active="active" ui-sref="main">Module Index</a></li>
<li><a ui-sref-active="active" ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ui-view></div>
<div class="alert alert-{{alert.type}} animated main -alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden': !alert.hasBeenShown}"><strong>{{alert.title}}</strong>{{alert.message}}</div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span>From JBDesign</p>
</div>
</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/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/Kendo/js/kendo.all.min.js"></script>
<script src="../bower_components/Kendo/js/kendo.angular.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/app.config.js"></script>
<script src="scripts/directives/validateEquals.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/services/authtoken.js"></script>
<script src="scripts/controllers/patientSearch.js"></script>
<!-- endbuild -->
</body>
</html>
I know I am breaking papas put the controller, view, and anything else needed for that module in one place principle. But I am just prototyping something really quick.
Does anybody see where I might be getting my 404, again this was all working fin with no errors in the console coded in brackets. I need to move into visual studio so that I can integrate with Web API. forgive me if it is something dumb, I am still learning Angular.
Thanks in advance, John.