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>
Related
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
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();
})
})
I cannot get the "posts" service to work in the "angular services" section of this tutorial from thinkster.io:
https://thinkster.io/mean-stack-tutorial/
Why won't the new posts show up when created? I used Yeoman to set up the app. Here is my code:
app.js
use strict';
/**
* #ngdoc overview
* #name meanStackTutorialApp
* #description
* # meanStackTutorialApp
*
* Main module of the application.
*/
angular.module('meanStackTutorialApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
main.js
angular.module('mainMod').factory('posts', [function(){
var o = {
posts : []
};
return o;
}]);
var MainMod = angular.module('mainMod')
.controller('MainCtrl', ['$scope', 'posts', function ($scope, posts) {
$scope.posts = posts.posts;
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title,
link: $scope.link,
upvotes: 0});
$scope.title = '';
$scope.link = '';
};
}]);
main.html:
<div class="jumbotron">
</div>
<form ng-submit="addPost()">
<input type="text" placeholder="Title" ng-model="title"></input>
<br>
<input type="text" placeholder="Link" ng-model="link"></input>
<br>
<button type="submit">Post</button>
</form>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span ng-click="incrementUpvotes(post)">^</span>
{{post.title}} -
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
upvotes: {{post.upvotes}}
</div>
<div class="row marketing">h
</div>
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="meanStackTutorialApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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>
<a class="navbar-brand" href="#/">meanStackTutorial</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/mainModServices.js"></script>
<!-- endbuild -->
</body>
</html>