I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>
Related
I'm new to Angular but this has been a bit of an issue.
So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.
However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.
I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.
Here is the relevant information from my files. (also I'm using Chrome)
app.js
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
$locationProvider.html5Mode(true);
}]);
myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}]);
myApp.controller('aboutController', ['$scope', function($scope) {
}]);
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it
use below HTML code
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="#!/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
While learning/reading angular docs, it warns about declaring the controller again using ng-controller.
Does this describe my code below, declaring MainMenuCtrl twice. First in the app.js and the second time in the body tag of index.html? Thanks
//---index.html-------------------------------
<!doctype html>
<html lang="en" ng-app="angApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/project_student/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/first_page.js"></script>
<script src="js/controllers/second_page.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body ng-controller="MainMenuCtrl"> //<<------1st declare-----------------
<header>
<button class="menuLeft" type="button" ng-click="toggleList()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main class="listview" ng-hide="showListView" ng-view></main>
<footer id="footer" class="footer">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
//---app.js-------------------------------
(function () { //y010
'use strict';
angular
.module('angApp', ['ngRoute', 'MainMenuCtrl']) //<<------2nd declare-----------
.config(['$routeProvider', routeProvider]); //y024
})();
function routeProvider ($routeProvider) {
$routeProvider.when('/menuItems', {
url: "/menuItems",
templateUrl: 'views/mainMenu.html',
controller: 'MainMenuCtrl' //<<-------- called-------------
}).when('/first_page', {
url: "/first_page",
templateUrl: 'views/first_page.html',
controller: 'FirstPageController'
}).when('/second_page', {
url: "/second_page",
templateUrl: 'views/second_page.html',
controller: 'SecondPageController'
})
.otherwise({ //home page
redirectTo: '/menuItems'
});
}
No, you are declaring it only once. In the template you are just declaring that body and its contents should come in the scope of the controller.
I am noticing before I created this controller that ng-app="myApp" broke the data binding with an input field and the template I had before.
Now i have a controller with route provider and the ng-view in the index.html doesn't work at all (blank page).
Am I missing something?
<!doctype index.html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="js/lib/angualar.min.js"></script>
<script src="js/lib/angualar-route.min.js"></script>
<script src="js/lib/angualar-animate.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
<!doctype views/nav.html>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
So few inputs watching your code:
Do a CTRL+Shift+I and open console tab in your browser to view the error reported, as your code has too many logical error and needs to be debugged.
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
In app.js appControllers is used as a dependency but its never mentioned in your html as data-ng-controller="appController"
Hence remove appControllers dependency.
With context of your code
var appControllers = angular.module('appControllers', []); is redundant too and will have errors as there are no appControllers defined in html
Here is the working code of, have kept it simple:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
</script>
</head>
<body>
<header>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
what is <!doctype index.html> if it is part of your code then remove all doctype from your code. your working code on plunker
and also you have not included your views/login.html code in your app.
I have the following scenario:
Mobile application written in Angular.
Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.
So i want to be able to use two layouts 1- blank 2- with header and footer.
on my index.html page i added:
<div ui-view class="app-content"></div>
This is how my state provider looks like:
.state('layout', {
templateUrl: 'partials/mobile/layout.html',
reloadOnSearch: false
})
.state('homepage', {
url: "/",
templateUrl: 'partials/mobile/home.html',
parent: 'layout',
})
.state('internal-page', {
url: "/internal/:id",
templateUrl: 'partials/mobile/internal.html',
parent: 'layout',
controller:'InternalController',
})
.state('login', {
url: "/login",
templateUrl: 'partials/mobile/login.html',
controller: 'MobileLoginController',
})
in layout.html i have used the same ui-view again:
<!-- App Body -->
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
</div>
The result is duplicate views, i get the same view twice when i'm using layouts.
The question:
Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?
My index.html complete page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
<link rel="stylesheet" href="css/mobile/layout.css"/>
<script src="bower_components/angular1.3/angular.js"></script>
<script src="bower_components/angular1.3/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-websocket/angular-websocket.js"></script>
<script src="js/common/app.js"></script>
<script src="js/mobile/app.js"></script>
<script src="js/common/services.js"></script>
<script src="js/common/controllers.js"></script>
<script src="js/common/filters.js"></script>
<script src="js/mobile/controllers.js"></script>
<script src="js/mobile/directives.js"></script>
<script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
<div class="spinner-background">
<div class="loader-image"></div>
</div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>
My app.js page:
angular.module('myApp', [
'myApp.common',
'ngRoute',
'ngTouch',
'ui.router',
'ui.bootstrap',
'mobile-angular-ui',
'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.services.mobile',
'myApp.directives',
'myApp.controllers',
'myApp.controllers.mobile',
'mobile-angular-ui.gestures',
'mobile-angular-ui.migrate',
'angular-websocket'
])
I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:
All your (shown) code is correct and working. The issue is elsewhere...
It could be some lost ui-view elsewhere
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
// suspected to me is lost child ... with the ui-view attribute
<div ui-view></div> // doubled target declaration
</div>
Check that your code is working here
app.js file is
var app = angular.module('TaskApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/Home/Index', {
controller: 'TaskManager',
templateUrl: '/Home/Index'
}).otherwise({ redirectTo: "/" });
$locationProvider.html5Mode(true);
}]);
app.controller('TaskManager', function () {
//$location.path('/');
});
<!DOCTYPE html>
<html ng-app="TaskApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div ng-view></div>
Home
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1> #Html.Label("Task Manager", new { #class = "heading" })</h1>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/Page/app.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
When i click on home link button then a lots of request is running and my page is hang give warning that :
WARNING: Tried to load angular more than once.
I can't found what problem is in my code