I am facing one issue.when i am clicking the <li>Course</li> link i am getting the requesting page but when i am refreshing this page again it is not coming using angular.js.its shoqing me the error The requested URL /Gofast/subject was not found on this server..I am getting my home page by typing the url oditek.in/Gofast/.I am explaining my code below.
app.js:
var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
.when('/deptinfo',{
templateUrl : 'view/info.html',
controller : 'infocontroller'
})
.when('/TimeTable',{
templateUrl : 'view/time.html',
controller : 'timecontroller'
})
.when('/course',{
templateUrl : 'view/course.html',
controller : 'coursecontroller'
})
.when('/subject',{
templateUrl : 'view/subject.html',
controller : 'subjectcontroller'
})
.when('/hod',{
templateUrl : 'view/hod.html',
controller : 'hodcontroller'
})
.when('/faculty',{
templateUrl : 'view/faculty.html',
controller : 'facultycontroller'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
})
I am adding also base url in my index page.See the code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script data-require="lodash.js#*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script><script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/app.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Edit <span class="caret"></span>
<ul class="dropdown-menu">
<li>Course</li>
<li>Subject</li>
<li>HOD</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Faculty</li>
<li>One more separated link</li>
</ul>
</li>
<li>Department</li>
<li>Time Table</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="controller/HomeController.js" type="text/javascript"></script>
<script src="controller/CourseController.js" type="text/javascript"></script>
<base href="/Gofast/">
</body>
</html>
Here when i am clicking on the course option the required page is coming but when i am reloading the same page again the its throwing the above error.Please help me to resolve this error.
Related
I have two files in my code folder: app.js, and index.html.
// MODULE
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
// Create the controller function and register it with the module
angularApp.controller('mainController', ['$scope', function($scope) {
$scope.name = 'ABC';
}]);
<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Introduction to 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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html,
body {
font-size: 1.1em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.6.0/angular.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>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
I am getting the following error in app.js file
ERROR: 'angular' is not defined.[no-undef]
for the line:
var angularApp = angular.module('angularApp', []);
But the web page runs fine in Chrome and displays everything properly.
But I am not understanding why this error comes for angular object although angular.min.js is included in index.html.
please tell me why it isn't loading partials.
I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact.
I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading.
Here's my code:
index.html
<html ng-app="streamApp">
<head>
<meta charset="utf-8">
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StreamTest App</title>
<!-- load bootstrap and fontawesome -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body ng-app="streamApp" ng-controller="MainController">
<div id="main">
<!-- including header -->
<div ng-include="'views/templates/header.html'"></div>
<!-- this is where content will be injected -->
<div id="container" style="margin-top: 50px;">
<ng-view></ng-view>
</div>
<!-- including footer -->
<div ng-include="'views/templates/footer.html'"></div>
</div>
</body>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<!-- Scripts End -->
</html>
app.js
// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);
//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
//route for the home page
.when('/home', {
templateURL : 'views/partials/home.html',
controller : 'MainController'
})
//route for the about page
.when('/about', {
templateURL : 'views/partials/about.html',
controller : 'aboutController'
})
//route for the contact page
.when('/contact', {
templateURL : 'views/partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/home'
});
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
// create a message to display in our view
$scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
// create a message to display in our view
$scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
// create a message to display in our view
$scope.contact="Don't be shy to contact us!";
});
header.html
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#home">StreamTEST</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-envelope"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</header>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about }}</p>
</div>
contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact }}</p>
</div>
I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6
$locationProvider.hashPrefix('');
Remove ng-app from your body element. You already have it on the outer html element.
I use ui-router instead of ngRoute, but they are very similar. A couple of things.
You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
$locationProvider.html5Mode(true)
You should set the base href in the <head> section of your index.html with:
<base href="/" >
You might also want to try ng-href instead of href on your links.
I have created index.html as below:
<html lang="en" ng-app="bootProject" >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SASS / Home
</title>
<script src="../../node_modules/angular/angular.min.js"></script>
<script src="../../node_modules/angular-route/angular-route.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../dist/css/main.css" rel="stylesheet">
<!-- Custom styles for font-awesome css -->
<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
angular-route.min.js
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../javascript/main.js"></script>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
There is a "home.html" with a navbar that I want to click on "log in" tab and goes in to "log.html" page.
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Register</li>
<li>Login</li>
<div><ng-view></div>
</ul>
</div>
And this is my "main.js":
// Module
var weatherApp = angular.module('bootProject',['ngRoute']);
// Route
weatherApp.config(function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'homeController'
})
.when('/log',{
templateUrl:'http://localhost:1337/dist/templates/log.html',
controller: 'logController'
})
.when('/dashboard',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'dashboardController'
});
});
//Controllers
weatherApp.controller('logController', [ '$scope', '$location',function($scope,$location){
$scope.submit= function(){
var uname = $scope.username;
console.log(uname);
var pass = $scope.password;
if($scope.username =='admin' && $scope.password =='admin'){
$location.path("/dashboard");
}
};
}]);
When I open my project in localhost / dist it shows me just one line which is "angular-route.min.js", but when I open it in localhost/src it shows me the right pages but still I can see that line in log.html page.
Please let me know what my mistake is?
I don't see a .otherwise in your routing. You should be using .otherwise to catch routes that do not match the ones you have specified.
for example, you might use .otherwise({redirectTo:'/home'});
I have a Angularized bootstrap menu that fully collapses the entire navbar if it is loaded in a view, but not when in the index.html. When loaded into my index.html, it only collapses the dropdown and not the whole navbar when an item is clicked on.
I need it in the index.html before the views (data-ng-view) since I have content between the menu and views (AdSense). When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the overall menu stays open instead of closing after going to a link. However, the dropdown will of "Categories" will collapse as intended, it is just the overall menu that won't.
I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.
Example:
when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).
Here is my navigation:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><h1 id="pfch1">My Title</h1></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
<li>cat6</li>
</ul>
</li>
<li>Add Article Link</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div data-ng-controller="userInfo">
<div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
<input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
</div>
<div data-ng-controller="loginCtrl" data-ng-show="loggedin">
<input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />
</div>
</div>
</div>
</form>
</div>
</nav>
Here is the index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-ng-app="pfcModule">
<head>
<!-- Inform Search Bots that this is a SPA -->
<meta name="fragment" content="!" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription | limitTo: 155}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Just for debuggidata-ng- purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warnidata-ng-.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Analytics -->
<script></script>
</head>
<body>
<!-- Container start -->
<div class="container">
<!-- Top Menu -->
<div data-ng-include="'templates/topmenu.html'"></div>
<!-- Responsive AdSense included here -->
<div data-ng-view></div>
<!-- Responsive AdSense included here -->
<hr>
<footer>
<p>© My Site 2015 | Terms and Conditions</p>
</footer>
</div>
<!-- Container end -->
<!-- Scripts placed at end of Body for execution -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/dirPagination.js"></script>
<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js"> </script>
<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/addArticle.js"></script>
<script src="js/controllers/articleID.js"></script>
<script src="js/controllers/articlesCategory.js"></script>
<script src="js/controllers/articlesCount.js"></script>
<script src="js/controllers/articleVoting.js"></script>
<script src="js/controllers/homeArticles.js"></script>
<script src="js/controllers/loginManagement.js"></script>
<script src="js/controllers/modalDependency.js"></script>
<script src="js/directives/directives.js"></script>
</body>
</html>
Here is my App.js:
var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);
pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
when('/termsandconditions', { templateUrl: './views/terms.html' }).
otherwise({ redirectTo: '/home' });
$httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
$httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
authProvider.init({
domain: 'aurl.com',
clientID: '1111111111111111',
callbackURL: location.href,
loginUrl: '/login'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
// Pagination provider
paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');
}])
.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
});
In order to cause the menu to collapse when you click one of the links you can toggle the value of isCollapsed with ng-click. The reason it was collapsing when inside a view was likely because it was actually reloading the navigation, not collapsing it.
Modify your navigation like this:
<ul class="nav navbar-nav">
<li ng-click="isCollapsed=!isCollapsed">Home</li>
<li" class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-click="isCollapsed=!isCollapsed">cat1</li>
<li ng-click="isCollapsed=!isCollapsed">cat2</li>
<li ng-click="isCollapsed=!isCollapsed">cat3</li>
<li ng-click="isCollapsed=!isCollapsed">cat4</li>
<li ng-click="isCollapsed=!isCollapsed">cat5</li>
<li ng-click="isCollapsed=!isCollapsed">cat6</li>
</ul>
</li>
<li ng-click="isCollapsed=!isCollapsed">Add Article Link</li>
</ul>
Plunker
Morning Folks,
I've been using angularjs for the last few months, and now want to start branching out into the ui router frame so I can start building more fluid and functional apps.
Could anyone point me in the right direction of some good tutorials. I've looked on google for some but alas most of them are some what confusing.
If there was a step by step basic guide out there it would be great.
Here is my html:
<DOCTYPE! html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--<link rel="stylesheet" href="\css\custom.css">-->
</head>
<body ng-app="testApp">
<section class="row">
<section class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<section class="container">
<section class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!--End on the menu button-->
<a class="navbar-brand" ui-sref="#">Test APP</a>
</section><!--End of Nav Header-->
<section class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">FX News</a></li>
<li><a ui-sref="contact">Test News</a></li>
<li><a ui-sref="about">Contact Us</a></li>
<li><a ui-sref="contact">Meet Test</a></li>
<li><a ui-sref="about">Logout</a></li>
</ul>
</section><!--End of the nav-collapse menu-->
</section><!--End of the container section-->
</section><!--End of the navMenu section-->
</section><!--End of the Nav row-->
<section class="row" style="padding-top:2em;"><!--Main content area for the app-->
<section class="col-xs-12">
<section ui-view></section>
</section>
</section><!--End of the main content are of the app-->
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><!--jquery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script><!--bootstrap js-->
<script src="http://code.angularjs.org/1.2.13/angular.js" type="text/javascript"></script><!--angular js-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js" type="text/javascript"></script><!--UI Route-->
<script src="js/app.js" type="text/javascript"></script><!--Custom js for the app-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js" type="text/javascript"></script><!--angular animation-->
</html>
This is the app.js:
// app.js
var testApp = angular.module('testApp', ['ui.test']);
testApp.config(function($stateProvider, $urltestProvider) {
$urltestProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
And this is my partial-home.html:
<section class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</section>
Thanks in advance,
Noob Angular guy.
Pluralsight has some good tutorials for angularJs.
I learnt it from here-
PluralSight
I think so the 4th module has Routing video tutorials.
this article from scotch.io is what I had used as starting point for me.
the best way to learn is start trying it out... so the below code should get you started :
// app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});