am new to angular js and learning. i tried a very simple example but it seems everything is right, but not working... I tried routing with two simple html files. The content of html should be placed on a ng-view div, when a userlist is clicked.. Please help in this... thanks in advance.. below is the code
<!DOCTYPE html>
<html>
<head>
<title>Main Page </title>
<script src="js/angular.min.js"> </script>
<script src="js/angular-route.min.js"></script>
<script>
var myApp = angular.module('myApp',['ngRoute']);
myApp.config (function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/first.html',
controller: 'FirstController'
})
.when('/Second', {
templateUrl: 'pages/second.html',
controller: 'SecondController'
});
});
myApp.controller('FirstController',function($scope){
});
myApp.controller('SecondController',function($scope){
});
</script>
</head>
<body ng-app="myApp">
<ul>
<li> Home Page</li>
<li> Go to First Page </li>
<li> <a href="#/Second"> Go to Second Page </li>
<h1> Main Page is here</h1>
</ul>
<div ng-view></div>
</body>
</html>
You have not closed the second </a>
<ul>
<li> Home Page</li>
<li> Go to First Page </li>
<li> Go to Second Page </li>
<h1> Main Page is here</h1>
</ul>
DEMO
Related
I am learning how to implement routing in AngularJS. Everything else is working fine but the views are not getting updated when I click on the navigation.
How can I achieve the desired functionality in the application? I want the navigation to take us to the desired pages without refreshing the page and that's quite obvious.
Here is the code.
Index.html
<!DOCTYPE html>
<html ng-app="routingApp">
<head>
<title>AngularJS routing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="routingAppController">
<!-- Header and Navigation -->
<header>
<nav class= "navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<!-- Main Body where content will be injected -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
Script.js
(function(){
'use strict';
var app = angular.module('routingApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'routingAppController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
app.controller('routingAppController', function($scope){
$scope.message = "This will get updated for sure!";
});
app.controller('aboutController', function($scope){
$scope.message = "This is the about page and it looks awesome!";
});
app.controller('contactController', function($scope){
$scope.message = "This is the contact page!";
});
})();
One of the pages
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
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) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
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) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.
My angular routing is not working (clicking link does not cause route change):
var smu72App = angular.module("smu72App", [
"ngRoute"
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/templates/home.html",
controller: 'smu72Controller'
})
.when("/objects", {
templateUrl: "/templates/objects.html",
controller: 'smu72Controller'
})
.when("/object/:Id", {
templateUrl: '/templates/object.html',
controller: 'smu72Controller'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
That's main page that hold ng-view (cutted a bit for better reading):
<!DOCTYPE html>
<html ng-app="smu72App">
....
<base href="/">
.....
<body data-spy="scroll" data-target="#navbar" data-offset="0">
...
<div class="collapse navbar-collapse"> //THAT'S SCROLLSPY LINKS (NOT ANGULAR)
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i></li>
<li> УСЛУГИ</li>
<li> OБЪЕКТЫ</li>
<li> OТЗЫВЫ</li>
<li> СЕРТИФИКАТЫ</li>
<li> КОНТАКТЫ</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-resource.min.js"></script>
<script src="Scripts/simplbox.min.js"></script>
<script src="http://localhost:25018/Scripts/main.js"></script>
<script src="http://localhost:25018/Scripts/app.js"></script>
<script src="http://localhost:25018/Scripts/smu72Controller.js"></script>
</body>
</html>
Declare your module first
angular.module("smu72App", ["ngRoute"]);
Then initialize config
angular.module("smu72App").config("....ur routes in here");
Are you getting any console errors?
I have noticed one morething that ur anchor tag href doesn't match with the routes in ur config section except ur home page and that is why ur home page is loading fine.
Just an example try ur anchor tag like this <a href="#/about"> or like <a href="/about"> coz i think ur not using hash
and create ur route like below
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
I write simple code for understanding ui-router of angular js but code is working properly but my partial html code is automatic renaming, i am unable to undertable why it happing
Html code is <a ui-sref="state1.list">Show List</a>
and browser code is <a ui-sref="state.list" class="ng-scope">Show List</a> due to rename the state1 to state my another partial view is not calling and give error.
Please take a look
<!--index.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Angular UI Router Test </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<a ui-sref="state1"> State 1</a>
<div ui-view></div>
<script>
var module = angular.module('myApp', ['ui.router']);
module.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/state1');
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
})
.state('state1.list', {
url: '/list',
templateUrl: 'partials/state1.list.html',
controller: function ($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
});
}]);
</script>
</body>
</html>
<!--state1.html-->
<h1>State 1</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
<!--state1.list.html-->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
what i am missing?
I would say, you are most likely not observing the proper element. I created working plunker here, and it shows, that this:
<a ui-sref="state1.list">Show List</a>
is generated as this
<a ui-sref="state1.list" class="ng-scope" href="#/state1/list">Show List</a>
As we can see no change from state1.list into state.list
The biggest change made? - used are up to date angular and UI-Router versions
Check it here, and maybe try to reset it to the "wrong state described above"
I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:
my main view is index.gsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="routeApplication">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add </li>
<li> Show </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.
my app.js is as follows:
var sampleApp = angular.module('routeApplication', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
var base = '${request.contextPath}';
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.gsp',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Note: i created a templates folder and placed my parital views on that.
This problem is that, whenever i click to load my partial views it shows
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
Am i missing something or is there any problem of placing the partial views?
I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.
You have to redirect to
http://localhost/#/angularJSrouting/templates/show_orders.gsp url
can you use '/' instead of '#' in those html line
<li> Add </li>
<li> Show </li>