Here's my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="1">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span>
{{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-controller="GroceryListItemsController">
<div class="col-xs-12">
<ul class="list-group">
<li ng-repeat="items in groceryListItems | orderBy: 'date'" class="list-group-item-text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module ("groceryListApp", []);
app.controller("HomeController",["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope){
$scope.groceryItems = [
{completed: true, itemName: 'milk', date:'2017-10-01'},
{completed: true, itemName: 'cookies', date:'2017-10-02'},
{completed: true, itemName: 'ice cream',date:'2017-10-03'}.
{completed: true, itemName: 'potatoes', date:'2017-10-04'}
{completed: true, itemName: 'cereal', date:'2017-10-05'},
{completed: true, itemName: 'bread', date:'2017-10-06'},
{completed: true, itemName: 'eggs', date:'2017-10-07'},
{completed: true, itemName: 'tortillas',date:'2017-10-08'}
]
}]);
when opening the html file with chrome, the output comes as
{{appTitle}}
{{item.itemName | uppercase}}
The controllers arent working here?
I have used boostrap version-v3.3.4
and the angular is of the latest version.
Please do tell me what I should do.
Thanks
script type should be script src , Change
From
<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>
To
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
Related
Here's my code:
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html"
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
and index.html is
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
groceryList.html is
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
When running index.html in chrome the output is {{appTitle}}. I assume the ngRoute isn't being recognized here. Please help.
All the lib files are correctly in place too.
The grocery list is supposed to be visible. It had worked without the routing mechanism
Thanks
Change your order angular.min.js should be loaded ahead of lib/angular-route.min.js
<script src="lib/angular.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
The issue is definitely with the sequence of the scripts. So here's what I did.
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../views/groceryList.html",
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
</body>
</html>
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
Since I didn't have most of the code, I just created this bare minimum project from the code that you supplied and served it using this Web Server
And it works at my end:
I did use relative paths instead of absolute paths though.
Hope this helps.
I used angular seed with satellizer. I started the app with the command: npm install and run the project on browser by typing: http://localhost:8080/app/#/auth, but I see the browser is showing [view1] [view2]
Angular seed app: v0.1.
I have used the following codes in app.js:
'use strict';
angular.module('myApp', [
'ui.router',
'myApp.view2',
'myApp.auth',
'myApp.version',
'satellizer'
]).
config(['$stateProvider', '$urlRouterProvider', '$authProvider',
function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.loginUrl = 'http://localhost:8000/adminlogin/showLogin';
$urlRouterProvider.otherwise('/auth');
}]);
I have used the below codes for auth.js within "view_auth":
'use strict';
angular.module('myApp.auth', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
views: {
'jokesContent': {
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
}
}
})
}])
.controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {`
var vm = this;
vm.loginError = false;
vm.loginErrorText;
vm.login = function() {
var credentials = {
email: vm.email,
password: vm.password
}
$auth.login(credentials).then(function() {
$http.get('http://localhost:8000/api/v1/authenticate/user').success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$state.go('jokes');
})
.error(function(){
vm.loginError = true;
vm.loginErrorText = error.data.error;
console.log(vm.loginErrorText);
})
});
}
}]);
The view file (auth.html) under view_auth is below:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Login</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required="" ng-model="auth.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required="" ng-model="auth.password">
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm" ng-click="auth.login()">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
`
My index.html looks like:
<!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>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[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="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="view_auth/auth.js"></script>
<!--<script src="view_jokes/jokes.js"></script>-->
<script src="bower_components/satellizer/dist/satellizer.js"></script>
</body>
</html>
But after running the project, the view appear as like:
I need to show the screen like: https://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1
Any help appreciated.
Finally, I solved this issue. I replaced the codes <div ng-view></div> in index.html as
<div ui-view="jokesContent"></div>
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
This is asked and answered many times already.
But, after trying many things, I still have this problem.
I have single page with a search button in Angular. The parameter is getting trough fine and logged like this console.log("searched: " + search.term);
Then I use this term to query my database using REST, the result is coming back fine. All good!
Now, I'd like to update the $scope data with these new results. I have treid to do that by adding $scope.$apply() and by using $timeout and by using $digest.
It all leads me to the error: $digest already in progress
Then I used $scope.$watch and that works, I tested it with alerts but the data never ever changes in my browser.
'use strict';
// Declare app level module which depends on views, and components
angular.module('Grep GUI', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('DataBeest', function($scope, $http) {
$http.get('http://localhost:8529/_db/grep/grepdata/huizen').
then(function(response) {
$scope.greeting = response.data;
});
$scope.search = function(search) {
console.log("searched: " + search.term);
$http.get('http://localhost:8529/_db/grep/zoek/zoek/' + search.term).
then(function(response) {
$scope.greeting = response.data;
$scope.$digest()
});
}
});
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="grep GUI" 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" rel="home" href="/" title="grep Crawler">/Grand Theft grep</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>/alle_data</li>
<li>/alle_plaatjes</li>
<li>/nog_wat</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" ng-controller="DataBeest">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Zoek" name="srch-term" id="srch-term" ng-model="search.term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="search(search)"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container" ng-controller="DataBeest">
{{ greeting }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
ok found it, I had re-used the controller in the view, this made it all wonky..
I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>