I am getting to understand routing and I have a simple application with a couple buttons at the top in the header area. The buttons work well and display the correct information but I've directed that one of the pages (directory.html) use the "myController" controller that I created but instead it continues to give me the curley braces and not the actual scope data. Can someone tell me what I'm doing wrong?
HTML
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
JS
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
Directory.html
<p>This is my directory page.</p>
<p>{{message}}</p>
Header.html
<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li>Home</li>
<li>Directory</li>
</ul>
</div>
Your js file is invalid.
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
You have placed your controller inside the config module...
Related
I have problem with controller load when I triggered ng-route.
This is my main page:
<!DOCTYPE html>
<html>
<head ng-app="testapp">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>XX</title>
</head>
<body>
<nav ng-controller="defaultnav"></nav>
<div ng-view></div>
</body>
</html>
and this is my app.js file:
var app = angular.module('testapp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/", {
templateUrl: "index.html"
})
.when("/page1", {
templateUrl: "page1.html"
})
})
inside the page1.html I inisiate controller like this:
<div ng-controller="page1">
</div>
<script type="text/javascript">
app.controller('page1', function ($scope) {
// code...
})
</script>
I don't know best practice to handle this. When I code this I got error with [Error, ctrlreg] it says that I have problem about registering controller.
Please give me advice to solve this.
Thanks in advance.
In JS, the app name in line var app = angular.module('enterprise', ['ngRoute']); is enterprise
In HTML, <head ng-app="testapp">, the app name is testapp. Change to <head ng-app="enterprise">
Its best practice to load the java script seperately. so remove js code from html and keep it in seperate file and load it
Click here for working demo in plnkr.
You can use AngularJS ngRoute:
// 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('/home', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
//otherwise redirect to home
.otherwise({
redirectTo: "/home"
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!!!!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us!.';
});
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
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', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
view1
view2
<div>
this is a dynamic message: {{message}}
</div>
<div ng-view>
</div>
<script type="text/javascript">
var app = angular.module('appName', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('FirstController', function ($scope) {
$scope.message = 'first controller';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Second controller';
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Home controller';
});
</script>
</body>
</html>
but when i click on the view1 or view2 anchor tag, nothing is happening and i get an error like this
resource not found error
I dont get any error in the console, can anyone help me to figure out what exactly is wrong.
In your html you miss
ngview directive add it.
<div ng-view></div>
For further help see this link
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Use ng-view to display content and you missed # at anchor tag
<body ng-app="appName">
view1
view2
<div ng-view>
this is a dynamic message: {{message}}
</div>
<script>
<!-- script here -->
</script>
</body>
You don't have ng-view
add following in html to get the pages loaded
<div ng-view></div>
Try this for app config
app.config(function (locationProvider, $routeProvider) {
$locationProvider.hashPrefix('#');
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
In my Javascript file I have the following code:
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: ''
})
.when('/user', {
templateUrl: 'pages/user.html'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html'
})
.when('/contacts', {
templateUrl: 'pages/contacts'
})
.otherwise({
redirectTo: '/'
});
}]);
Now, through ng-route I have another page called user.html that is simple this:
<div ng-controller = "Ctrl2">
{{user.name}}
</div>
<script type="text/javascript">
angular.module('allApps').controller('Ctrl2',function($scope){
$scope.user={name:"Jim", lastname:"Smith"};
});
</script>
In my HTML file I have the following code:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src ="js/script.js"></script>
<link href="css/style.css" rel="stylesheet">
But it doesn't work. Error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=Ctrl2&p1=not%20a%20function%2C%20got%20undefined
G/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
qb#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131
Qa#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218
Xe/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
w#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
ngViewFillContentFactory/<.link#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7
ea#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
R/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
k#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377
update#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:936:25
lf/this.$get</r.prototype.$broadcast#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:136:157
commitRoute/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:619:15
f/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:119:129
lf/this.$get</r.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:133:309
lf/this.$get</r.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:130:404
lf/this.$get</r.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:76
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:87:442
T#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:92:50
Uf/</w.onload#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:93:78
<div class="ng-scope" ng-view="">
What am I doing wrong?
Thanks in advance.
You can't add controllers after angular is already bootstrapped, unless you use some kind of fancy lazy-loading. Therefore, adding a controller from a script block on a view is just not going to work.
You can have multiple controllers in differenct script files. But the script file should copile first before you start rendering the view.
Try binding your controller to the template view in the routes config
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: '',
controller: 'Ctrl1'
})
.when('/user', {
templateUrl: 'pages/user.html',
controller: 'Ctrl2'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html',
controller: 'Ctrl3'
})
you are not closing your first function well. It should
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.controller('Ctrl1',[ '$scope', function ($scope){
...
}]);
I'm trying to implement the solution offered by ProLoser in link
in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.
I need to understand how to solve this problem.
My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).
My layout:
Index.html:
<!DOCTYPE html>
<html ng-app="webApp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>This is header</Header>
<div class="content" ng-view>
</div>
</body>
</html>
content.html:
<div>
<h1>This is Content brought to you by ngView</h1>
<br>
link1
link 2
link 3
<ng-include src="'/sub/'+link + '.html' "></ng-include>
</div>
My code:
var webApp = angular.module('webApp', []);
//router logic
webApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
.when('/sub/:link', {
controller: 'LinkCtrl'
})
.otherwise({redirectTo: '/'});
}]);
//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
$scope.link = $routeParams.link
});
You don't have a LinkCtrl to handle the links, it should work if you change:
.when('/sub/:link', {
controller: 'LinkCtrl'
})
to
.when('/sub/:link', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
And edit the line:
<ng-include src="'/sub/'+link + '.html' "></ng-include>
to:
<ng-include src="link + '.html'"></ng-include>