I try to run angular-ui-router to handle my views but i have a problem.
The two links of the following view are not clickable.
Angular change variable with link label but i can't click on.
I have this view :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>App</h1>
<nav>
<a ui-shref="app">{{link.home}}</a>
<a ui-shref="app.front.signin">{{link.signin}}</a>
</nav>
<div ui-view="content">
</div>
</body>
</html>
I use this code. It do not returns errors
. All modules (localStorage ... are included) but links are not clickable.
/**
* Declaration of MyAppControllers module
*/
MyAppControllers = angular.module('MyAppControllers',[]);
/**
* Declaration of MyApp Application
*/
MyApp = angular.module('MyApp', ['MyAppControllers','LocalStorageModule','ui.router']);
MyApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
//
// Now set up the states
$stateProvider
.state('app', {
url: "/",
views: {
"content": {templateUrl: "views/front/home-1.0.html"}
}
})
.state('app.front.signin', {
url: "/signin",
views: {
"content": {templateUrl: "views/front/home-1.0.html", controller: "signinCtrl"}
}
});
}
]);
Can someone help me ?
You messed up in type it should be ui-sref instead of ui-shref
<body>
<h1>App</h1>
<nav>
<a ui-sref="app">{{link.home}}</a>
<a ui-sref="app.front.signin">{{link.signin}}</a>
</nav>
<div ui-view="content">
</div>
</body>
Your second link should be app.signin instead of app.front.signin because you don't have parent route front
.state('app.signin', {
url: "/signin",
views: {
"content": {
templateUrl: "views/front/home-1.0.html",
controller: "signinCtrl"
}
}
});
Related
I created a directive, everything is working well except that "ng-click" does not work from my controller. Nothing happens when i click the button. What am I getting wrong?
Here is my app.js
var app = angular.module('mainApp',[ 'ui.router' ]);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginPageCtrl',
});
}])
app.directive('loginPage', function loginPage() {
return {
restrict: 'EA',
templateUrl: 'app/partial/login.html',
}
})
app.controller('LoginPageCtrl', function($scope) {
$scope.login = function() {
alert("You Clicked Me")
}
})
Then in my login.html I have
<button ng-click="login()" type="submit" class="btn btn-default">Sign in</button>
EDITED -- JUST ADDED CODES BELOW
Am using directive because of the login am using to use specific css for different page layout (login page & user page). It might sound awkward though.
Here is my index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlurAdmin">
<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>Admin</title>
<link ng-if="!$authPage" rel="stylesheet" href="styles/app-b6796b3788.css">
<link ng-if="$authPage" rel="stylesheet" href="styles/auth-a200a050c1.css">
</head>
<body>
<page-content ng-if="!$authPage"></page-content>
<login-page ng-if="$authPage"></login-page>
<script src="scripts/app-5a80256787.js"></script>
</body>
</html>
The problem was solved by adding <div ui-view></div> which was ommited. Now I can now call the templateUrl in the login state to load in the ui-view
Here is the new layout.html
<div ui-view></div>
Then the directive now changed in the app.js
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginPageCtrl',
templateUrl: 'app/pages/login.form.html',
});
}])
app.directive('loginPage', function loginPage() {
return {
restrict: 'EA',
templateUrl: 'app/partial/layout.html',
}
})
angularjs route not working properly . first page show other page not switch the view . here is the code
script.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome Home</title>
</head>
<body ng-app="myApp">
<p>Main</p>
About
contact
<h3> welcome to the page</h3>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</body>
</html>
home.html
<h1>Welcome Home </h1>
About.html
<h1>Welcome About </h1>
contact.html
<h1>Welcome Contact </h1>
Also be careful about dependency injection.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
$locationProvider.html5Mode(true);
}]);
I have a root index.html file which has a ui-view tag, to which a main template file home.html is injected.
home.html has a ui-view tag which needs to change depending on the current route. I followed the official ui-router documentation and wrote the app.js, but the nested ui-view in home.html tag is not being injected with a view.
The structure is as follows:
index.html
| home.html
- dashboard.html
- tables.html
index.html has a ui-view tag which shows home.html. home.html is a template with a ui-view tag which needs to either show dashboard.html or tables.html depending on the route.
Source:
index.html -
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/css/main.min.css"/>
<script src="lib/js/main.min.js"></script>
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div ui-view></div>
</body>
</html>
templates/home.html -
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div ng-include="sidebar.html" scope="" onload=""></div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div ng-include="header.html" scope="" onload=""></div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
module.js
angular.module('app', ['ui.bootstrap', 'ui.router', 'ngCookies']);
routes.js
'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('home', {
abstract: true,
url: '/',
templateUrl: 'templates/home.html'
})
.state('home.dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html'
})
.state('home.tables', {
url: '/tables',
templateUrl: 'templates/tables.html'
});
}
]);
On add them as routes without inheriting from home, they're being injected normally into index.html, which means it's not an issue with the route themselves.
How can I inherit the template and inject the views, depending on the route?
You need to add ui-router as a dependency to the module
angular.module('app',['ui.router'])
also make sure you have added references
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
DEMO
Solved my issue. I removed the url tag from abstract state home, and just set home.dashboard to /.
This works:
'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('home', {
abstract: true,
templateUrl: 'templates/home.html'
})
.state('home.dashboard', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
.state('home.tables', {
url: '/tables',
templateUrl: 'templates/tables.html'
});
}
]);
I'm really new to Angular and I was trying to add a routeProvider to my app but it keep giving me this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app
due to: Error: [$injector:nomod] Module 'app' is not available! You
either misspelled the module name or forgot to load it. If registering
a module ensure that you specify the dependencies as the second
argument.
This is what my index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.js looks like this:
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
This is the content of the splash.html that i'm using as template for my routing:
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
Before I tried to add the ng-route everything wos working fine. But since I've tried to split it up I keep getting the error and I don't know how to fix it.
Thanks for the help guys!
In your myApp.config you forgot the closing brace ] at the end.
Also since you're new to angular in your .when('/' ....) when you specify the controller it's equivalent to putting an ng-controller at the top of your template so there's no need to do it again in the template itself.
So this:
<div id="splash" class="row" ng-controller="segmentListCtrl">
would be fine as
<div id="splash" class="row">
It apears to me that you have a syntax error in your app config declaration:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Should be:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
AS you can see, the final ']' is missing.
Tell me if this solved for you. Thanks
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo