I am trying to setup a one page application with AngularJS.
I am using Node with Express, and I have an apache server used as a middleware, if that matters.
My index.html page loads well but no view is loaded inside the ng-view.
Here is my code
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="public/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="public/img/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<link rel="stylesheet" type="text/css" href="public/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular.min.js"></script>
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-base64.min.js"></script>
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-sanitize.js"></script>
<script type="text/javascript" src="vendor/lodash.js/4.16.4/js/lodash.min.js"></script>
<script type="text/javascript" src="vendor/jquery/1.11.3/js/jquery.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script>
var myApp = angular.module('lispCDpoc', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
console.log('oui');
$locationProvider.hashPrefix('');
$routeProvider.
when('/', {
templateUrl: 'pages/test.html',
controller: 'testController'
}).
otherwise({
redirectTo: '/'
});
});
myApp.controller('testController', function($scope) {
$scope.message = 'Message for my test page';
});
</script>
<meta charset="utf-8">
<title>LISP Monitoring POC</title>
</head>
<body>
<div>
<nav class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Release Note</li>
</ul>
<div>
<img class="logo-lisp" src="public/img/lisp2.png">
</div>
</nav>
<div ng-view></div>
</div>
</body>
</html>
I can't find the reason why my index.html page loads but it does not insert the test.html code
<div>
<h1>Test Page</h1>
<p>{{message}}</p>
</div>
Don't forget to declare your app module in your main template.
<body ng-app="lispCDpoc">
<div>
<nav class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Release Note</li>
</ul>
<div>
<img class="logo-lisp" src="public/img/lisp2.png">
</div>
</nav>
<div ng-view></div>
</div>
</body>
Here's a working Plunkr: https://plnkr.co/edit/HlYxdCsLzfCNCY1dq7vp?p=preview
Related
I'm using AngularJs 1.6.9 with ASP.NET Core 2.
The error is
The controller with the name 'pag1Controller' is not registered.
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog-theme-default.min.css" rel="stylesheet">
<script src="~/lib/angular-1.6.9/angular.js"></script>
<script src="~/lib/angular-1.6.9/angular-route.js"></script>
<script src="~/lib/ngDialog-master/js/ngDialog.js"></script>
<script src="~/lib/angular-1.6.9/angular-cookies.min.js"></script>
<script src="~/js/app/app.js"></script>
</head>
<body class="" ng-app="MyApp">
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li>
<i class="fa fa-th-large"></i> <span class="nav-label">Pag:</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>Pag1</li>
</ul>
<ul class="nav nav-second-level collapse">
<li>Pag2</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="wrapper wrapper-content">
#RenderBody()
</div>
</body>
</html>
Home.cshtml:
#{
ViewData["Title"] = "Home Page";
}
<div ng-view>
</div>
<div ng-controller="homeController">
{{Message}}
</div>
<script src="~/js/app/controllers/homeController.js"></script>
app.js:
var app = angular.module("MyApp", ['ngCookies', 'ngDialog', 'ngRoute']);
app.config(function ($routeProvider) {
config.baseURL = "http://localhost/";
$routeProvider.when('/Pag1', {
templateUrl: config.baseURL + "Pag1/Index",
controller: 'pag1Controller'
})
$routeProvider.when('/Pag2', {
templateUrl: config.baseURL + "Pag2/Index",
controller: 'pag2Controller'
})
});
pag1.cshtml
<div ng-controller="pag1Controller">
Pag1
<button ng-click="onMensaje()">View alert</button>
<script type="text/ng-template" id="templateId">
<h1>Template heading</h1>
<p>Content goes here</p>
</script>
</div>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
pag1Controller.js:
app.controller('pag1Controller', function ($scope, ngDialog) {
$scope.onMensaje = function () {
ngDialog.open({ template: 'templateId' });
};
});
You need to include the controller in the index.html file , so that controller gets registered when app loads,
<script src="~/js/app/app.js"></script>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
Import that controller in your index.html file.
<script srs=".../pag1Controller"></script>
Following is the folder structure I am using for my demo application
css
fonts
images
js
views
index.html
The code for index.html is as follows :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Sandhu Tutors</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Top Navigation-->
<nav class="nav navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABSS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li><a ng-href="">First</a></li>
<li><a ng-href="">Second</a></li>
</ul>
</div>
</div>
</nav>
<!--Main view goes here -->
<div ng-view></div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull=left">
<p> ABSS © Sandhu 2017.</p>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
And here goes the code for controller.js :
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'views/home.html',
controller : 'homeCtrl'
})
.when('/first',{
templateUrl:'views/first.html',
controller : 'firstCtrl'
})
.when('/second',{
templateUrl:'views/second.html',
controller : 'secondCtrl'
})
.otherwise({
redirect :'/'
});
});
app.controller('homeCtrl',function($scope){
$scope.name="Angad";
});
app.controller('firstCtrl',function($scope){
$scope.name="Second";
});
app.controller('secondCtrl',function($scope){
$scope.name="Second";
});
Routing doesnt seems to work here .... The only error it shows is :
-Error: [$compile:tpload]
-XMLHttpRequest cannot load
Apart from this if anyone could help as to how to make the desired pages open in the ng-view section on the click of the top navbar buttons ...would be highly appreciated !!
Your code seems to be correct. If you are using chrome as a browser use a local webserver to test your site (for example lite-server). Chrome won't allow you to load local files for security reasons. You could also try and test your application with another browser.
Your Navbar hrefs should look like:
<li>About Us</li>
or if you are using AngularJS 1.6
<li>About Us</li>
I am new to angularjs kindly help me out:
The following runs fine. It shows me the HelloWorld on page but the message I am saving in the controller is not shown when ng-view is called by the controller.
app-config.js code:
var abc=angular
.module('videoManagement',['ngRoute']);
abc
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/video',
{
templateUrl:'video.html',
controller: 'videoController'
}).when('/category', {
templateUrl:'category.html',
controller: 'categoryController'
}).otherwise({
redirectTo:'/video'
});
}]);
abc.controller('videoController', function($scope) {
$scope.message = 'This is Add new order screen';
});
abc.controller('categoryController', function($scope) {
$scope.message = 'This is Add new Ali ';
});
my index.html
<!DOCTYPE html>
<html ng-app="videoManagement" >
<head>
<meta charset="ISO-8859-1 ">
<title>Index</title>
<link type="text/css" rel="stylesheet"
href="resources/css/bootstrap.min.css"/>
</head>
<body >
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Video Management</span>
</div>
<div>
<ul class="nav navbar-nav">
<li> Video</li>
<li> Category</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div>Hello World</div>
<ng-view />
</div>
<div class="footer"> Please Allah! Help Us All</div>
<script> type="text/javascript"
scr="resources/js/lib/angular.min.js"</script>
<script> type="text/javascript"
scr="resources/js/lib/angular-route.min.js"</script>
<script> type="text/javascript"
scr="resources/js/controller/app-config.js"</script>
<script> type="text/javascript"
scr="resources/js/service/video-service.js"</script>
<script> type="text/javascript"
scr="resources/js/controller/video-controller.js"</script>
<script> type="text/javascript"
scr="resources/js/controller/category-controller.js"</script>
</body>
</html>
<ul class="nav navbar-nav">
<li> Video</li>
<li> Category</li>
</ul>
Replace it with following
<ul class="nav navbar-nav">
<li> Video</li>
<li> Category</li>
</ul>
Material design features not working while using Angular states.
My set up is as follows:
1. index.html contains all styles and scripts
2. layout.html contains elements of the page layout and UI-VIEW
3. and partial pages are the rest
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Material Admin - Form basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Short explanation about this website">
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
</head>
<body class="menubar-hoverable header-fixed ">
<!-- BEGIN JAVASCRIPT -->
<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
<script src="js/Mdesign/bootstrap.min.js"></script>
<script src="js/Mdesign/spin.min.js"></script>
<script src="js/Mdesign/jquery.autosize.min.js"></script>
<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
<script src="js/Mdesign/App.js"></script>
<script src="js/Mdesign/AppNavigation.js"></script>
<script src="js/Mdesign/AppOffcanvas.js"></script>
<script src="js/Mdesign/AppCard.js"></script>
<script src="js/Mdesign/AppForm.js"></script>
<script src="js/Mdesign/AppNavSearch.js"></script>
<script src="js/Mdesign/AppVendor.js"></script>
<script src="js/Mdesign/Demo.js"></script>
<script src="js/Dependencies/angular.js"></script>
<script src="js/Dependencies/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Layout.html
<!-- HEADER BEGINS -->
<header id="header" >
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand" >
<div class="brand-holder">
<a href="">
<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
</a>
</div>
</li>
<li>
<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- BASE BEGINS -->
<div id="base">
<div id="content">
<!-- SECTION BEGINS - our UI-VIEW goes here -->
<section>
<div class="container">
<div ui-view>
</div>
</div>
</section>
<!-- SECTION ENDS -->
</div>
<!-- BEGIN MENUBAR-->
<div id="menubar" class="menubar-inverse ">
<div class="menubar-fixed-panel">
<div>
<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="expanded">
<a href="../../html/dashboards/dashboard.html">
<span class="text-lg text-bold text-primary ">MATERIAL ADMIN</span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<!-- BEGIN MAIN MENU -->
<ul id="main-menu" class="gui-controls">
<li>
<a href="">
<div class="gui-icon"><i class="md md-home"></i></div>
<span class="title">Dashboard</span>
</a>
</li>
<li class="gui-folder">
<a>
<div class="gui-icon"><i class="md md-email"></i></div>
<span class="title">Email</span>
</a>
</li>
</ul>
<!-- END MAIN MENU -->
<!-- FOOTER COPYRIGHT BEGINS-->
<div class="menubar-foot-panel">
<small class="no-linebreak hidden-folded">
<span class="opacity-75">Copyright © 2014</span> <strong>Vinayak</strong>
</small>
</div>
<!-- FOOTER COPYRIGHT ENDS -->
</div>
</div>
<!-- END MENUBAR -->
</div>
<!-- END BASE -->
app.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'index.html'
})
.state('layout', {
url: '',
templateUrl: 'pages/layout.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'pages/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/page2.html'
})
});
I know its late, but just had the same issue and maybe can help someone else.
Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file.
adding the following to your angular.run function ensures the components get rendered correctly:
app.run(function($rootScope, $timeout) {
// Required so that MDL components render correctly when using nested views
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
})
})
So, I have an angular routing app working locally, but it's not working on plunker, I'm trying to get it working there to demonstrate an issue, but anyway... It's not working, and it doesn't make sense why. The views are not being injected into <div ui-view></div> on the index page :(
Here's my plunker
Here's the js:
var routerApp = angular.module('routerApp', ['ui.router','ui.bootstrap']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(false).hashPrefix("");
$stateProvider
// HOME VIEW ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
// onEnter: scrollContent
})
// ONE VIEW ========================================
.state('one', {
url: '/one',
templateUrl: 'partial-one.html'
})
// TWO VIEW ========================================
.state('two', {
url: '/two',
templateUrl: 'partial-two.html'
})
// THREE VIEW ========================================
.state('three', {
url: '/three',
templateUrl: 'partial-three.html'
})
});
Here's my index.html page (check the plunker above to see the view pages):
<!DOCTYPE html>
<html>
<head>
<!-- // base path for angular routing -->
<base href="/">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
</head>
and the body:
<body ng-app="routerApp">
<!-- NAVIGATION -->
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" ui-sref="home">Some web page somewhere</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="one">Link One</a></li>
<li><a ui-sref="two">Link Two</a></li>
<li><a ui-sref="three">Link Three</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed navbar -->
<!-- MAIN CONTENT -->
<!-- Inject Content Here -->
<div class="container" style="padding-top:68px;">
<div ui-view></div>
</div>
</body>
There is updated plunker
In case of the plunker, we cannot use
<base href="/" />
Because there is always some stuff like 'http://run.plnkr.co/s6tfzR2Tbd1v9qB9gPH8/script.js' instead of the http://run.plnkr.co/script.js
also JQuery is needed for bootstrap, new head:
<head>
<!-- CSS -->
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
<!-- // base path for angular routing -->
<!--<base href="/" />-->
</head>
Check the working version here
The <base> tag is messing with plunker, remove it and it should work.
Working example