I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Related
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
I have included angular.min.js and related controller and Service files in _Layout.cshtml. It throws me an error and takes me to this link
https://docs.angularjs.org/error/$injector/nomod?p0=OmsApp
However when I exclude Layout page and put those scripts in my child page, it works. Is there anything I am missing.
_OmsLayout.cshtml
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<title>_OmsLayout</title>
<link href="~/Content/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/assets/css/OmsStyles.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"> </script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="~/Scripts/Controller/OmsController.js"></script>
<script type="text/javascript" src="~/Scripts/Service/OmsService.js"></script>
</head>
<body>
<div class="container-fluid" ng-app="OmsApp" ng-controller="OmsCtlr">
#RenderBody()
</div>
</body>
</html>
Child Page
#{
ViewBag.Title = "ProductsList";
Layout = "~/Views/Shared/_OmsLayout.cshtml";
}
<h2>ProductsList</h2>
<div class="row">
<div class="col-md-2 col-sm-2">
<img src="~/Content/assets/images/DotNet_4.5.jpg" height="200" width="200" class="img-responsive CursorPointer" />
<span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
</div>
<div class="col-md-2 col-sm-2">
<img src="~/Content/assets/images/DotNet_4.5_2.jpg" height="200" width="200" class="img-responsive CursorPointer" />
<span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
<input type="button" ng-click="ProductsCount();" value="Click" />
</div>
</div>
My Controller
var app = angular.module("OmsApp", []);
app.controller("OmsCtlr", function ($scope) { $scope.ProductsCount = function () {
alert("Hi");
};
});
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
UI router not working at all.
I have:
angular.module('bApp', ['ui.router']);
angular.module('bApp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('register', {
url: '/register',
templateUrl: '/views/register.html',
controller: 'RegisterCtrl'
});
});
<!doctype html>
<html>
<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/bootstrap-hero.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.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-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
</head>
<body ng-app="bApp">
<!-- 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="#/">b</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="main">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
<div ui-view></div>
<script src="scripts/app.js"></script>
<script src="scripts/app.config.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
</div>
</body>
</html>
There is no Errors at the console,
Even URL not changing when I'm clicking on register TAB.
I do not have any Idea why that is not working.
I tried to remove controllers from states and got the same behavior.
That solution also didn't worked
Please help.
Did you try to take away the begining slash on your url? i'm not quite sure about this, but when I code in AngularJS instead using
/views/main.html
I use:
views/main.html
Try $state.go('register'); in controller or app.run block. maybe it raise some error.
watch in DevTools for requests, maybe some of them doesnt works (E.G. 404, 403)..
I need to load/start revealjs slides via angularjs route provider, following is the code.
It works however revealjs slide size is abnormally very small, any clue why ?
1) index.html
<!doctype html>
<html ng-app="ngApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
</head>
<body>
<button type="button" onclick="startRevealjs()">start revealjs slides</button>
</div>
<script>
function startRevealjs()
{
var res=document.getElementById("revealjsId");
res.click();
}
angular.module('ngApp', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/revealjs', {
templateUrl: 'revealjs.html'
});
//for html5 compatibility
$locationProvider.html5Mode(true);
}])
</script>
<form action="" method="post">
<div ng-view> </div>
</form>
</body>
</html>
2) revealjs.html
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>slide 1</h1>
</section>
<section>
<h1>slide 2</h1>
</section>
<section>
<h1>slide 3</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({});
</script>
</body>
Note: I have recently started working on above tech.