My folder structure is:
-ngTest
--Scripts(all js files)
--index.html
--main.js
--partialView.html
index.html code is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<meta charset="utf-8" />
</head>
<body>
<p>Hello world</p>
<div ng-view></div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js is :
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
partialView.html:
<div>
<p> From view</p>
</div>
What am I missing in this code?
If you want to load partialView.html as default you have to route to "/", not to "/home".
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
"/html" will be accessed if you link to it in your html file, for example with:
<a href=#/html>Link<a>
Your code looks good but missing something:
You need an anchor that make you go to /home, you can add it in the index file as follow:
Red
Then click the home anchor to make your partial view appear.
Or
In the router configuration modify the home to make it only "/", so the code will be as the following:
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});
One last thing, if you're using angular latest 1.6.0, you have to add the following code:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');}]);
Related
I can see changes in the url but the content in that page is not visible in ng-view please help. The following are the code files.
Angular script
<script>
var app = angular
.module("myapp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home.html",
})
.when("/ThankYou", {
templateUrl: "ThankYou.html",
})
})
</script>
Html code
This is the main UI.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<title></title>
</head ng-app="myapp">
<body>
<div>
Home
ThankYou
</div>
<div ng-view></div>
</body>
</html>
Home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
Home
</div>
</body>
</html>
var app = angular.module("Demo", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'Home.html',
controller: 'FirstController'
})
.when('/ThankYou', {
templateUrl: 'ThankYou.html',
controller: 'SecondController'
})
});
app.controller('FirstController', function($scope) {
});
app.controller('SecondController', function($scope) {
});
DEMO
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
I cannot realized my single page. I want add template page without redirect to new page.
My index.html file:
<!doctype html>
<html lang="en" ng-app="MyApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
About
Contact
I want show contact and about information under this links but I see this at new page
<ng-view> </ng-view>
</body>
</html>
My app.js file with routing configuration
var app = angular.module('MyApp', [ 'ngRoute']);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'dialogManager/page-home.html',
controller: function ($scope) {}
})
// about page
.when('/about', {
templateUrl: 'dialogManager/page-about.html',
controller: function ($scope) {}
})
// contact page
.when('/contact', {
templateUrl: 'dialogManager/page-contact.html',
controller: function ($scope) {}
});
} ]);
My page-contact.html
<!-- page-contact.html -->
<h2>Contact</h2>
You may consider using ng-include instead.
As per angular documentation: https://docs.angularjs.org/api/ngRoute/directive/ngView
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
Maybe ng-view is not what you need.
My scripts are :
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My Application</title>
</head>
<body>
<div ng-view></div>
<script src="/assets/vendor/angular/angular-1.2.16.min.js"></script>
<script src="/assets/vendor/angular/extras/angular-route.js"></script>
<script src="/assets/myapp/myApp.js"></script>
</body>
</html>
myApp.js
(function () {
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: '<h1>Home</h1>',
controller: function () {
console.log('Home');
}
}).
when('/books', {
template: '<h1>Books</h1>',
controller: function () {
console.log('Books');
}
});
$locationProvider.html5Mode(true);
console.log('routes configured');
}]);
})();
I've wasted a lot of time trying to figure out what the problem might be with no luck. Am I missing something silly? thanks in advance for the help.
Are you hosting your application in the root of your server? If not, then you will need to use the tag below in your head tag.
<base href="PATH_HERE" />
In addition, can you comment out the $locationProvider.html5Mode(true) line and get your app working in hash routing mode first?
Just a question, but it is possible to add a function in the controller -> controller:function()? Because normally i would do it like this. controller:'mainController' and put the function in the mainController.
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>