index.html:
<!doctype html>
<html ng-app ng-csp>
<head>
<meta charset="UTF-8">
<title>Presently</title>
<link rel="stylesheet" href="app/styles/angular-csp.css">
<!--<link rel="stylesheet" href="css/main.css">-->
<script src="assets/dependencies/angular/angular.min.js"></script>
<script src="assets/dependencies/angular-ui-router/release/angular-ui-router.js"></script>
<script src="main.js"></script>
<script src="app/states/home/home.controller.js"></script>
<script src="app/states/home/favs/fav.controller.js"></script>
</head>
<body>
hello {{'foo'.length}}
<div ui-view></div>
</body>
</html>
main.js:
console.log('main.js');
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouteProvider'
, function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('state1', {
url: "/",
template: "home"
});
}]);
console.log(myApp);
So the console logs show for main.js and the app but nothing is rendered in the view. I would expect to see the word 'home'
You had a typo ($urlRouteProvider instead of the $urlRouterProvider)
.config(['$stateProvider', '$urlRouteProvider'
, function($stateProvider, $urlRouterProvider) {
Which I fixed here in this working plunker
.config(['$stateProvider', '$urlRouterProvider'
, function($stateProvider, $urlRouterProvider) {
Check the Router in the $urlRouterProvider
Related
I want to remove #! from url and I used
$locationProvider.html5Mode(true);
For this and it works but when I refreshes the page it can't be able to find the page and give error.
what should I do for this?
Index.html
<!DOCTYPE html>
<html dir="ltr" lang="en" ng-app="myapp">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
</head>
<body class="product-product-82 responsive full default layout_2">
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/config.js"></script>
<script type="text/javascript" src="controllers/productCtrl.js"></script>
<script type="text/javascript" src="controllers/menuCtrl.js"></script>
<page-loader flag="isLoading"></page-loader>
<div ui-view="layout"></div>
</body>
</html>
config file for routing
var app = angular.module('myapp');
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('productpagelayout', {
abstract: true,
views: {
layout: {
templateUrl: 'template/layout/productpagelayout .html',
},
controller : 'productCtrl'
}
})
.state('landing', {
url: '/',
templateUrl: 'template/landing/mainpages.html',
controller: 'menuCtrl',
parent: 'productpagelayout',
})
.state('home', {
url: '/home',
templateUrl: 'template/landing/landing.html',
controller: 'menuCtrl',
parent: 'productpagelayout',
})
.state('category2',{
url: '/c/:name1/:name2',
templateUrl: 'template/product/productsgridpage.html',
controller: 'productCtrl',
parent: 'productpagelayout'
})
$locationProvider.html5Mode(true);
}])
app.js
var app = angular.module('myapp', ['ui.router',
'rzModule',
'ngCookies',
'ui.bootstrap',
'ngSanitize',
]);
You can try and use:
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
I cannot see my index page till I uncomment my code in controller.What am i doing wrong.here is my sample code.I have tried all possible options, not getting where am i going wrong
`
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript">
var abc = angular.module('myApp', ["ui.router"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{
template: '<h1>This template is displayed with Ui route </h1>'
});
$urlRouterProvider.otherwise('/');
}).
controller('myNewCtrl',function($scope,$state){
// $state.go('home');
});
</script>
<title>My Angular App</title>
</head>
<body ng-app='myApp'>
<div ng-controller="myNewCtrl">
<ui-view></ui-view>
</div>
</body>
</html>`
DEMO
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl', ['$scope', function($scope) {
}])
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav>
<a ui-sref="home">Home</a>
</nav>
<div ui-view></div>
</body>
Working demo :
var myApp = angular.module('myApp',['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl',['$scope','$state', function($scope,$state) {
$state.go('home');
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="myApp" ng-controller="myNewCtrl">
<div ui-view></div>
</div>
"angular 1.6.1", "angular-ui-router 0.3.1", All ui views changed/worked correctly but i'm getting the following error in my console window, i don't know why.
My HTML code is
<!DOCTYPE html>
<html lang="en" data-ng-app="manoj">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="assets/style/angular-material.css">
<link rel="stylesheet" href="assets/style/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/style/style.css">
</head>
<body>
<div ui-view class="main-body"></div>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!--Angular Library-->
<script src="angular/angular.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-aria.min.js"></script>
<script src="angular/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="assets/js/angular-material.min.js"></script>
<!--App Scripts-->
<script src="app/app.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/login/login.js"></script>
</body>
</html>
app.js file
angular.module('manoj', ['ui.router','ngMaterial'])
.config(function ($mdThemingProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider.disableTheming();
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/a/dashboard');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'app/login/index.html',
controller: 'loginCtrl'
})
.state('a',{
url:'/a',
templateUrl:'app/app.html'
})
.state('a.dashboard',{
url: '/dashboard',
templateUrl: 'app/dashboard/dashboard.html',
controller:'dashboardCtrl'
});
}).run(function ($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Please somebody help me...
You need to update ui-router, try with "angular-ui-router 1.0.3"
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
So I'm new to Angular and I've been struggling all day to get ngRoute to work without any success. So I decided to try out the ui-router but that's not working for me either.
(angularjs 1.5.0)
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My app</title>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State hello</a>
<a ui-sref="state2">State show</a>
</body>
</html>
main.js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/hello.html"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/show.html"
});
});
hello.html & show.html
<div>{{"hello"}}</div>
When loading index.html I get this error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=MyApp&p1=Error%3A%2…
You're using wrong module name.
<html ng-app="MyApp">
var myApp = angular.module('myApp', ['ui.router']);
Change your module name to "MyApp" in your js file. i.e.
var myApp = angular.module('MyApp', ['ui.router']);