When I double click the index.html the browser only loads the nav-bar, the contents inside partial-home.html is not showing.
app.js
This is the app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
index.html
This is the index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script> https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js</script>
<script>https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js</script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
partial-home.html
This is the partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</div>
When you are saying "I double click index.html" you mean that you are opening the file with your browser?
If yes it could be the problem. You need to load it on a web server.
You can do that with live-server
First install node.js if you don't have it.
Then install live-server with this command : npm install -g live-server
Then go to your working directory and launch the server with this command : live-server
Your browser should launch your app. The URL shouls be like this: http://localhost/... which means you are on your web server!
There is a working example
I just changed your <script> settings:
<script data-require="angular.js#*"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"
></script>
<script data-require="ui-router#*"
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
></script>
<script src="app.js"></script>
The rest is the same as above. Check it here
Related
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
please tell me why it isn't loading partials.
I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact.
I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading.
Here's my code:
index.html
<html ng-app="streamApp">
<head>
<meta charset="utf-8">
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StreamTest App</title>
<!-- load bootstrap and fontawesome -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body ng-app="streamApp" ng-controller="MainController">
<div id="main">
<!-- including header -->
<div ng-include="'views/templates/header.html'"></div>
<!-- this is where content will be injected -->
<div id="container" style="margin-top: 50px;">
<ng-view></ng-view>
</div>
<!-- including footer -->
<div ng-include="'views/templates/footer.html'"></div>
</div>
</body>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<!-- Scripts End -->
</html>
app.js
// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);
//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
//route for the home page
.when('/home', {
templateURL : 'views/partials/home.html',
controller : 'MainController'
})
//route for the about page
.when('/about', {
templateURL : 'views/partials/about.html',
controller : 'aboutController'
})
//route for the contact page
.when('/contact', {
templateURL : 'views/partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/home'
});
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
// create a message to display in our view
$scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
// create a message to display in our view
$scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
// create a message to display in our view
$scope.contact="Don't be shy to contact us!";
});
header.html
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#home">StreamTEST</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-envelope"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</header>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about }}</p>
</div>
contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact }}</p>
</div>
I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6
$locationProvider.hashPrefix('');
Remove ng-app from your body element. You already have it on the outer html element.
I use ui-router instead of ngRoute, but they are very similar. A couple of things.
You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
$locationProvider.html5Mode(true)
You should set the base href in the <head> section of your index.html with:
<base href="/" >
You might also want to try ng-href instead of href on your links.
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.
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 working in angular.js. Using ng-view navigate in body section. If i need to navigate to a new html page. How we can achieve in angular.js. Is there any angular.js directives in angular.js.
Thanks in Advance,
You should go through following things for routing:
Angular ui-route
Angular ngRoute
Angular-UI-Router is more powerful directive than ngRoute. Following code is what i had tried sometimes before. hope it will also help you.
app.js
var app = angular.module('app', ['ui.router']); //Inject `ui.router` directive inside your `app` module
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html'
})
}]);
index.html
<html>
<head>
<title>Angular Routing</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers/homeCtrl.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div ng-include="'templates/header.html'"></div>
<div ui-view></div>
<div ng-include="'templates/footer.html'"></div>
</div>
</body>
</html>
templates/header.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">Angular</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
templates/footer.html
<p>© SJ</p>
templates/home.html
<h1>Home</h1>
templates/about.html
<h1>About<h1>