Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
Related
When I include ngRoute for routing I get this error $injector MOdulerr, Kindly let me know what am I doing wrong. Any help would be greatly appreciated.
Below are my two files, index.html and app.js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
<script type="text/javascript" src='app.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
app.js
var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider,$locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/sign-in', {
templateUrl: 'templates/sign-in.html',
controller: 'appctrl'
})
})
myapp.controller('appctrl', function ($scope) {
});
When I type http://localhost:8000 in the browser, it is redirecting to http://localhost:8000/home. This is working fine as per code. When I refresh the page with same http://localhost:8000/home getting 404 error. Can anyone help me why this is happening and correct me.
app.js
var myapp=angular
.module("demo",['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
templateUrl:'Templates/home.html',
controller:'homeController'
})
.when('/about', {
templateUrl:'Templates/about.html',
controller:'aboutController'
})
.when('/contact',{
templateUrl:'Templates/contact.html',
controller:'contactController'
})
.otherwise({
redirectTo: '/home'
})
$locationProvider.html5Mode(true);
});
index.html
<!doctype html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="rest-controller.component.js"></script>
<script src="Controllers/contact.js"></script>
<script src="Controllers/about.js"></script>
<script src="Controllers/home.js"></script>
<base href="/">
</head>
<body>
<ol>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ol>
<div ng-view></div>
</body>
</html>
home.js (controller file)
angular.module('demo').controller("homeController", function($scope){
$scope.hello ="home";
});
about.js
angular.module('demo').controller("aboutController", function($scope){
$scope.tap="About Me";
});
contact.js
angular.module('demo').controller("contactController", function($scope){
$scope.message="hello";
});
Can you try disabling html5 mode?
// $locationProvider.html5Mode(true);
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
I'm trying to create a portfolio in angular, and can't seem to get the routing correct. I double checked with an app I had made previously, and can't seem to find anything. When I compile, there are no errors logged in the console. Could someone check if my code is properly laid out?
the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css"> -->
</head>
<body np-app="myPort">
<div id="navigation-bar">
<ul>
<li>Home</li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</div>
<div ui-view></div>
<!-- loading angular frameworks -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- app js stuff -->
<script src="app.js"></script>
</body>
</html>
the module
angular.module('myPort', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/bio/index.html',
})
.state('projects', {
url: '/projects',
templateUrl: 'partials/projects/index.html',
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact/index.html',
})
$urlRouterProvider.otherwise('/home');
}]);
//no controllers linked for troubleshooting
There is a spelling mistake while defining ng-app.
Change <body np-app="myPort>" to <body ng-app="myPort>"
I am new to angular js
I was trying to load another html dyamically, below is the code i was trying
My Base HTML include
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="Module/app.js"></script>
</body>
</html>
and my app JS
var app = angular.module('LoginModule', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: '',
templateUrl: '/Module/View/Login/Login.html'
})
.otherwise({ redirectTo: '/login' });
});
Put your jquery and angular script in the body tag:
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
</head>
<body>
<div ng-view></div>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
<script src="Resource/angular-route.js"></script>
<script src="Module/app.js"></script>
</body>
</html>
Also I would set ng-view with ng-view=""
<div ng-view=""></div>
EDIT:
You forgot to include the ngRoute module. Please look at the following plnkr to more detail: http://plnkr.co/edit/A5X4BNsnuXxhmgPVOXpv
var app = angular.module('LoginModule', ['ngRoute']);