I am new to Angular. div ng-view never works for me. Here is my code, this is copied and pasted from on of online demos. Thanks for help.
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<title></title>
<script src="Scripts/angular-1.2.22/angular.js"></script>
<script src="Scripts/angular-1.2.22/angular-route.js"></script>
<script src="Scripts/AngularController.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
---Script AngularController.js----
'use strict';
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/addOrder', {
templateUrl: 'templates/routeOne.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'templates/routeTwo.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/routeThree.html'
});
}]);
//--- Add Order Controller ----
sampleApp.controller('AddOrderController', function ($scope) {
});
//--- Show Orders Controller ----
sampleApp.controller('ShowOrdersController', function ($scope) {
});
There are 2 issues regarding your code. The first and most important is that your links are incorrect, they are missing a slash.
<li> Add New Order </li>
<li> Show Order </li>
The second issue you are currently having is that on your route definition your otherwise is trying yo redirect to a file, where it actually should try to redirect to an angular defined route. An example of this could be something like this:
$routeProvider
.when('/', {
templateUrl: 'templates/routeThree.html'
})
.when('/addOrder', {
templateUrl: 'templates/routeOne.html',
controller: 'AddOrderController'
})
.when('/showOrders', {
templateUrl: 'templates/routeTwo.html',
controller: 'ShowOrdersController'
})
.otherwise({
redirectTo: '/'
});
Cheers!
Related
Here, I want to print 'Nerve Center Dashboard' when route is '/' ,'Consumption Dashboard' for '/consumption' and same for every route in <p> tag. Please help
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="assets/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-3.3.7/js/bootstrap-3.3.7.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<p></p> /------------*text to be printed*-------------/
<ul class="nav nav-tabs">
<li onclick="dashboardTitle('Nerve Center Dashboard')" id="nerve">Nerve Center
</li>
<li onclick="dashboardTitle('Consumption Dashboard')" id="consumptionn">Consumption Analysis
</li>
<li onclick="dashboardTitle('Fulfillment Dashboard')" id="fulfillmentt">Fulfillment Analysis
</li>
<li onclick="dashboardTitle('Inventory Dashboard')" id="inventoryy">Inventory Analysis
</li>
</ul>
<div class='col-xs-12 rmpm' style='height:auto;'>
<div ng-view></div>
</div>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
//routing for tabs
myApp.config(['$routeProvider',
function($routeProvider) {
// $locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'nervecenter.html',
controller: 'nervecenterController'
}).
when('/fulfillment', {
templateUrl: 'fulfillment.html',
controller: 'fulfillmentController'
}).
when('/consumption', {
templateUrl: 'consumption.html',
controller: 'consumptionController'
}).
when('/inventory', {
templateUrl: 'inventory.html',
controller: 'inventoryController'
}).otherwise({
templateUrl: 'nervecenter.html'
});
}
]);
</script>
</body>
</html>
You just have to create a global variable in angular's scope to initialize the <p> tag based on URL. Initialise the variable in each of the controllers with the desired value. You also have to create a main controller that will be in the scope of <p> tag, so that any initialization on $rootScope will reflect under this main controller.
Main Controller:
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope','$rootScope' function ($scope,$rootScope) {
});
}]);
First Controller:
myApp.controller('nervecenterController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Nerve Center Dashboard"
});
}]);
Second Controller:
myApp.controller('consumptionController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Consumption Dashboard"
});
}]);
HTML:
<body ng-app="myapp" ng-controller="mainController">
<p>{{title}}</p>
Working Plunker: https://plnkr.co/edit/xmLZvHK57GpaIFsHzvvV?p=preview
I am running my AngularJS code in VS 2015. The routing just doesn't work. I tried everything but I get the url like below in the address bar of the browser when I click on the hyperlink "Add" and nothing gets displayed and same issue with other hyperlinks also. Please advise.
"http://localhost:21530/Index.html#!#Add"
Here is the code:
HTML File:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/Main/Home.js"></script>
</head>`enter code here`
<body>
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
</body>
</html>
Home.js:
/// <reference path="../angular.js" />
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(function($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
});
MyApp.controller("AddController", function($scope) {
$scope.message = "Add Screen";
});
MyApp.controller("EditController", function($scope) {
$scope.message = "Edit Screen";
});
MyApp.controller("DeleteController", function($scope) {
$scope.message = "Delete Screen";
});
MyApp.controller("HomeController", function($scope) {
$scope.message = "Home Screen";
});
change all your href as below :
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
Try to activate the HTML5 mode ($locationProvider.html5Mode(true);) in MyApp.config.
See the official doc: https://docs.angularjs.org/api/ngRoute/service/$route#example
MyApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
}]);
You have to inject $routeprovider first. The $routeprovider inside function() you have written is just the parameter name which can be anything.
Please see that you open and close the square brackets properly.. Try Running the application now. If it doesnt work, also try <a ng-href="#Add">Add</a> inside the nav li.
Hope it works for you :) .
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project nothing is displayed in browser.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="routes.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ui.router']);
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myApp.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
routes.js:
angular.module('myAppCtrl')
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index.html');
// See route.webapp.js for allowed routes
$stateProvider
.state('app', {
templateUrl: '/templates/app.html',
controller: 'myAppCtrl',
abstract: true
})
.state('app.home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'myAppCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: '/templates/about.html',
controller: 'aboutController'
})
.state('app.contact', {
url: '/contact',
templateUrl: '/templates/contact.html',
controller: 'contcatController'
});
$locationProvider.html5Mode(true);
}
]);
})();
any guide thanks.
First there is a problem with your config block :
myApp.config(...)
not
angular.module('myAppCtrl').config(...);
Else you're redeclaring a new module. That doesn't make sense. You mix up controllers and module, that's two different things.
Then you have to change some things in your HTML file :
If you're using UI-Router it's :
<div ui-view></div>
not like ngRouter :
<div ng-view></div>
Then you're using $locationProvider.html5Mode(true);
So you have to configure your server to emulate paging, see doc.
Finally you have to add the base href of your angular application in the <head> tag like that :
<base href="/">
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html
Hi What wrong am i doing. I am new to angular js and i am using ng-template for routing withing the views.
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationPro vider) {
$routeProvider.
when('/', {
templateUrl: 'add.html',
controller: 'myAppCtrl'
}).
when('/edit',{
templateUrl:'edit.html',
controller:'myAppCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
}])
But its not working. Please help me .
below is my part of html
<body ng-controller="myAppCtrl">
<div ng-view>
<script type="text/ng-template" id="add.html">
<div>
<input type="text" ng-model="$storage.myname"/>
<input type="text" ng-model="$storage.myid"/>
<input type="number" ng-model="$storage.mynumber"/>
<button ng-click="submit();"> submit </button>
</div>
</script>
</div>
You are confusing a couple of things:
The controller that you defined in your body (ng-controller="my AppController") is also defined as controller for the route. I suspect you want one or the other but not both.
Your script tag containing the template is inside the div that it will replace (<div ng-view>). The ng-view div should be empty (<div ng-view></div>)and the template defined outside of it, possibly in the header.
I looked through your code, got solution for your routing here is working fiddle
Fiddle
Here is code
//html
<div ng-app="app">
<div ng-controller="MainCntl">
Choose:
add |
Edit |
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
</div>
<script type="text/ng-template" id="add.html">
Add
</script>
<script type="text/ng-template" id="edit.html">
Edit
</script>
</div>
//app.js
var myApp = angular.module('app', [], function($routeProvider, $locationProvider) {
$routeProvider
.when('/add', {
templateUrl: 'add.html',
controller: MainCntl
})
.when('/edit', {
templateUrl: 'edit.html',
controller: MainCntl,
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
}