I am currently studying AngularJS and as I am learning I am trying to implement.
Currently, I am studying the routeProvider aspect. I have tried to incude what I have learned but for some reason the route provider isnt loading the required templateUrl.
Please see below.
<body ng-app="myapp">
<ul>
<li>HOME</li>
<li>SECOND</li>
</ul>
<div ng-view></div>
<script type="text/javascript">
var myapp = angular.module("myapp", ['ngRoute']);
myapp.config(function ($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'maincontroller'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'maincontroller'
})
});
myapp.controller("maincontroller", ["$scope", function($scope){
$scope.title1 = "main page";
$scope.title2 = "second page";
}])
</script>
When I click on the second li element to try and load the second page, nothing happens. Is anyone able to identify what I am doing wrong here?
I am following the course: "Learn & Understand AngularJS" on Udemy.
You can use routerLink="/second" routerLinkActive = "active"
Like this.
<li><a routerLink="/second" routerLinkActive = "active">SECOND</a></li>
You also need to have a routes defined in app.component.ts.
Related
Trying to use ngRoute to route between two pages, main.html and second.html. Using angular version 1.7. The index.html default to the correct main.html but will not route to second.html when clicking the link titled Second. This is the page I'm trying to do this on.
This is the code in the app.js file.
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', '$log',
function($scope, $log) {
}]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {
}]);
The html has these divs.
<div class="container">
<div ng-view></div>
</div>
I was able to fix the issue changing the href to ng-href inside the header tag and by using a value of #! instead of #. Below is my new nav links inside my header.
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#!"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="#!/second"><i></i> Second</a></li>
</ul>
I simply replicated what I saw done here.
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 have just started angularjs and came across the concept of routing i am doing a demo but its not working i don't know what I am doing wrong please help me out.I am doing it in MVC ASP.NET
Webapplicatoin3.js
var app = angular.module('WebApplication3', ['ngRoute']);
app.controller('CreateUser1Controller', function ($scope) {
$scope.models = {
helloAngular: 'I workssss!'
};
});
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'New/CreateUser1'
});
}]);
where in templateUrl "New" is the name of the controller and "CreateUser1" is action metohd
Home.cshtml
<body ng-app="WebApplication3" ng-controller="CreateUser1Controller">
<div ng-view></div>
<input type="text" ng-model="models.helloAngular" />{{models.helloAngular}}
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/WebApplication3.js"></script>
</body>
CreateUser1.cshtml is not rendering in div ng-view.
CreateUser1.cshtml
<h2>CreateUser1</h2>
<input type="text" ng-model="models.helloAngular" />
<h1>{{models.helloAngular}}</h1>
The problem is in WebApplication.js file
in templateUrl add "/" before New
update this
$routeProvider.
when('/', {
templateUrl: 'New/CreateUser1'
});
To this
$routeProvider.
when('/', {
templateUrl: '/New/CreateUser1'
});
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
i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.
Main.html:
<body ng-app="MyApp" ng-controller="mainController">
<div data-role="page" data-theme="b">
<a ng-href="detail.html"></a>
</div>
</body>
detail.html:
<div data-role="page" data-theme="b" ng-controller="DetailContoller">
<button>{{a}}</button></div>
Contoller:
MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});
MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});
When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.
Do you have any suggestion?
Thanks!
Looks like you're mixing jQuery Mobile and Angular notation.
To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.
Here's an example of how to config this on your module:
angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/page1'
});
}]);
Now in your html, use the directive ng-view to specify the tag that should contain the template.
<body ng-app="app">
<div ng-view>
</div>
</body>