Im scaffolding an app for a prototype. I have everything together, but when I do grunt serve I get my index page but the view doesn't initialize. Ive compared it to other apps i have running, but i can't find anything wrong. Any of you see anything wrong.
I should mention, I used Yeoman to generate the basic scaffold, but I have been systematically stripping various things (Primarily Bower) from it as we are not allowed to use it on our network. So I have been rebuilding a basic seed app that likes our network and plays well with our CI server.
app.js
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
//name: 'home',
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
}
]);
main.js
'use strict';
angular.module('angularApp', [])
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 -->
<link rel="stylesheet" href="libs/sass-bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="libs/ng-grid-2.0.7/ng-grid.css" />
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularApp">
<!--[if lt IE 7]>
<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 ui-view></div>
test
<a ui-sref="home">home</a>
<!--[if lt IE 9]>
<script src="libs/es5-shim/es5-shim.js"></script>
<script src="libs/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<script src="libs/jquery-1.10.2/jquery.js"></script>
<script src="libs/angular-1.2.10/angular.js"></script>
<script src="libs/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="libs/angular-resource/angular-resource.js"></script>
<script src="libs/angular-cookies/angular-cookies.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="libs/ui-router-0.2.8/release/angular-ui-router.js"></script>
<script src="libs/ngStorage/ngStorage.js"></script>
<script src="libs/ng-grid-2.0.7/ng-grid-2.0.7.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.html
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
</ul>
<h3 class="text-muted">angular</h3>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
Always a pleasure scaffolding your apps.
</p>
<p><a class="btn btn-lg btn-success" ng-href="#">Splendid!</a></p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
Two things that I see would break your angular bootstrap process:
First, include your app.js last:
<script src="scripts/controllers/main.js"></script>
<script src="scripts/app.js"></script>
Then, .config should come before .run:
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {}
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {}
]);
Related
I am have made a few apps with node and have used Angular on a few front ends, but i have never combined the two. I am total loss for how to send all the views to the front end when index.html is sent. Currently i have the following code in my server:
...
app.use(express.static('./app'));
app.listen(config.port, function() {
logger.info('Server listening on ' + config.port);
});
....
app.get('/update', auth.isLoggedIn, (req, res) => {
byo.userUpdate(res);
})
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/app/index.html');//'/public/index.html');
})
/////////
HTML Template:
<!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 -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.scss">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script>
<!-- endbuild -->
</head>
<body ng-app="uptimeApp">
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">asdasd</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Uptime Robot</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- <li>Link</li>
<li>Link</li> -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!--- Main Angular VIEW -->
<div ng-view></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the support team</p>
</div>
</div>
<!-- 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-sass-official/assets/javascripts/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>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/byo.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
byo.js (was main.js):
angular.module('uptimeApp')
.controller('byoCTRL', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
About.js:
angular.module('uptimeApp')
.controller('AboutCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
app.js:
angular
.module('uptimeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/byo.html',
controller: 'byoCTRL',
controllerAs: 'byo'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
//////
my static file structure is as such:
-app
--images
--scripts
|-controllers
|-service
|-app.js (angular routing file)
--views
|-byo.html
|-about.html
--index.html
When i run my server and naviate to localhost:8080/ the index.html page loads as expected. When i check in dev tools, all css files and js files that are included in the html header/footer are included as expected. However, i do not see any additional html files anywhere. The index page is left with an empty body because the ng-view is not being loaded.
Angular routing:
...
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/byo.html',
controller: 'byoCTRL',
controllerAs: 'byo'
})
...
I have the feeling i am missing something very basic but can't figure it out. After researching i found a lot of articles relating to templating engines but i would prefer not to use one(do i have to?). Any help is greatly appreciated and if there is any additional information i can provide please let me know.
Thanks!
Looks like byoCtrl is unknown because of your resource loading order. Try switching your loading order so byo controller is available when ngRoutes config() hits.
<script src="scripts/controllers/byo.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/app.js"></script>
Let your express application only send your index.html when you hit the root dir of your domain:
app.get('/', function(req, res) {
res.sendFile(__dirname + '/app/index.html');//'/public/index.html');
})
I'm new to Angular but this has been a bit of an issue.
So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.
However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.
I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.
Here is the relevant information from my files. (also I'm using Chrome)
app.js
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
$locationProvider.html5Mode(true);
}]);
myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}]);
myApp.controller('aboutController', ['$scope', function($scope) {
}]);
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it
use below HTML code
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="#!/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
Now I have read that angular doesn't allow global controllers but I don't believe I am making it global. What is even more odd is that I even created a script in the HTML file and it gave me the same error. I am positive that code should have worked.
I am using Intellij and used its template to generate a small boiler plate via bower.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="myApplication">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</body>
</html>
clickablecontroller.js
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
----------------UPDATE 1 -----------
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
clickable is your controller. If you want to output value of click property you need {{click}}. Angular will know what the controller is and show to value of click property of $scope in that controller.
Maybe you can try this:
var myModule = angular.module('myApplication', []);
myModule.controller('clickable', function ($scope) {
$scope.clickMe = function(){
$scope.click = click++;
}
});
Besides,
use {{click}} to instead of {{clickable.click}}
I had to had my new module in my apps.js file.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApplication'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Then I had to declare click as a variable like so:
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
console.log("I am in the controller")
var click = 0
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Then in my index.html file I could simply use:
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{click}}
</div>
I'm trying to run a simple CRM app, based on the MEAN stack web-book. Upon loading the page I get the following error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=userApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.7%2F%24injector%2Fmodulerr%3Fp0%3DuserCtrl%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.7%252F%2524injector%252Fnomod%253Fp0%253DuserCtrl%250AI%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A24%253A186%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A252%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A1%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A427%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A444%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Afb%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A41%253A35%250Azc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A463%250Azc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A293%253A238%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A174%253A399%250AHf%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A35%253A212%250A%0AI%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A6%3A416%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A38%3A184%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A444%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Afb%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A41%3A35%0Azc%2Fd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A293%3A238%0Aa%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A174%3A399%0AHf%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A35%3A212%0A
angular.min.js (line 6, col 416)
This is my app.js file (the main app module)
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
and my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>
<base href="/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/cs/style.css">
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="app/controllers/userCtrl.js"></script>
<script type="text/javascript" src="app/services/authService.js"></script>
<script type="text/javascript" src="app/services/userService.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<header>
<div class="navbar navbar-inverse" ng-if="main.loggedIn">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-fire text-danger"></span> User CRM
</div>
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user"></span> Users</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!main-loggedIn">Login</li>
<li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
<li ng-if="main.loggedIn">Logout</li>
</ul>
</div>
</div>
</header>
<main class="container">
<div ng-view></div>
</main>
</body>
</html>
I have loaded the local dependencies using bower (angular, angular-route, angular-animate), and the rest of the are local .js files, so I can't really figure out what the problem is.
The whole project can be found at this Git Repo. The angular part of the code is located in the /public folder.
Any feedback/ideas appreciated.
You are trying to inject userCtrl in your app, I could not find it in the git repo you
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
Angular DI, is looking for a service / controller / factory any component that is names userCtrl, which it can not find.
Angular DI does not look for files, rather components with the string names of your components.
Your controller and your services have to be part of your userApp module, not separates MainCtrlor userService modules.
Change
// This declares a new module named 'mainCtrl'
angular.module('mainCtrl', [])
angular.module('userService', [])
angular.module('autService', [])
to
angular.module('userApp')
I am noticing before I created this controller that ng-app="myApp" broke the data binding with an input field and the template I had before.
Now i have a controller with route provider and the ng-view in the index.html doesn't work at all (blank page).
Am I missing something?
<!doctype index.html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="js/lib/angualar.min.js"></script>
<script src="js/lib/angualar-route.min.js"></script>
<script src="js/lib/angualar-animate.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
<!doctype views/nav.html>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
So few inputs watching your code:
Do a CTRL+Shift+I and open console tab in your browser to view the error reported, as your code has too many logical error and needs to be debugged.
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
In app.js appControllers is used as a dependency but its never mentioned in your html as data-ng-controller="appController"
Hence remove appControllers dependency.
With context of your code
var appControllers = angular.module('appControllers', []); is redundant too and will have errors as there are no appControllers defined in html
Here is the working code of, have kept it simple:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
</script>
</head>
<body>
<header>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
what is <!doctype index.html> if it is part of your code then remove all doctype from your code. your working code on plunker
and also you have not included your views/login.html code in your app.