I have shown a simplified version of my problem below:
The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page 'index.html'
loginView.html
<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>
index.html
<!doctype html>
<html data-ng-app="vla">
<head>
<title>Video Learning application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class = "navBar">
<div class = "leftButton"></div>
<div class = "title">VLA</div>
<div class = "rightButton"></div>
</div>
<div data-ng-view=""></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="controllers/controllers.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'controllers/controllers.js',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
});
controller.js
app.controller('loginController', function ($scope)
{
$scope.loginUser = function () {
alert("test");
}
});
The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.
I'm very new at this and would appreciate any help.
Thanks in advance
You should write controller name but not path in controller option of routeProvider:
$routeProvider
.when('/view1',
{
controller: 'loginController',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
And attach file with controller (controllers/controllers.js) with tag <script>.
Just realised the problem was the ordering of the script declarations in the index.php page
The app reference should come before the controller:
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"
ctrl.js:
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "index.html",
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
index.html:
<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
<div id = "test"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="ctrl.js"></script>
</body>
</html>
Thank you for your help!
You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route
<!DOCTYPE html>
<body ng-app="AutApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
template: '<div id = "test"></div>',
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
</script>
I have a problem when I try to use the $routeProvider.
It just doesn't work at all and I don't see any problems :
var app = angular.module('app', ['ngStorage','ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/index.html',
controller: 'authCtrl'
})
.when('/dashboard', {
templateUrl: '/tpl/dashboard.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Here is index.html :
<html>
<head>
<title>Authenticate | BulbThings</title>
<script src="angular/angular.min.js"></script>
<script src="angular/ngStorage.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="js/build/app.min.js"></script>
</head>
<body ng-app="app">
<div ng-show="authenticate">
<span ng-cloak ng-show="addr" id="address">{{address}}</span>
<input type="mail" ng-model="email" placeholder="Email"><br />
<input type="password" ng-model="password" placeholder="Password"><br />
<button ng-click="auth.connect(email, password)" ng-model="signin">Sign in</button><br/><br/>
</div>
<p>{{error}}</p>
</body>
</html>
I set $scope.authenticate = true in the controller, and when I load the page it doesn't show up.
When I try /dashboard it returns me Cannot GET /dashboard.
I can't see what is going wrong I hope you can help me !
Thank you.
2 things, first you need the ng-view to render the view
<div ng-view=""></div>
And second, if you are getting "Cannot GET /dashboard" is because in angular the routes are in the hash, example:
yourdomain.com/#/dashboard, and not yourdomain.com/dashboard. So here you have a link if you want to go to dashboard:
<a ng-href="#/dashboard">Dashboard</a>
You are missing tag with ng-view directive.
I had a similar issue, cost me days of searching. The href was incorrect, coudln't make it work with "#home" or "home"
Here is my working code :
<html ng-app="app">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<title>Testing</title>
</head>
<body>
home
about
<div ng-view="">
</div>
<script>
var app = angular.module('app', ['ngRoute'])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
}]);
</script>
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>
I am new to AngularJs.
In app.js I have the following
angular.module('module1', ['module2'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'Controller1',
templateUrl: '/app/module/module1/partials/module1.html'
});
});
My module1 controller
angular.module('module1').controller('Controller1', function($scope) {
$scope.module1Name = "Module1";
});
In module2 folder I have Index.js
angular.module('module2', []).config(function($routeProvider) {
$routeProvider
.when('/test',
{
controller: 'Controller1',
templateUrl: '/app/module/module2/view/test.html'
});
});;
Module2 controller
angular.module('module2').controller('Controller1', function ($scope) {
$scope.module2Name = "Module2";
});
Here is my index.html
<html data-ng-app="module1">
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/App/app.js"></script>
<script src="~/App/module/module2/index.js"></script>
<script src="~/App/module/module2/controller/Controller1.js"></script>
<script src="~/App/module/module1/controller/Controller1.js"></script>
</head>
<body>
<div data-ng-view=""></div>
</body>
</html>
and module1.html
<div>
f4b view {{module1Name}}
<br/>
<a data-ng-href="#/test">Test page</a>
</div>
and test.html
<div>
Test view {{module2Name}} <br/>
<a data-ng-href="#/">f4b page</a>
</div>
when I start the application the module1 name is displayed but when I click the link all I see is "Test view" without module2
{{module2Name}} is not displayed...
Can someone tell me what am I doing wrong?
Thank you
Angular's $injector can't disambiguate between controllers that use the same name. One workaround is to manually namespace them:
angular.module('module1').controller('mod1.Controller1',
...
angular.module('module2').controller('mod2.Controller1',
jsfiddle
See also https://groups.google.com/d/topic/angular/SZMFAKfx1Q8/discussion