Im trying to use the Ionic Framework to create an app but i have problems to get a simple example to work. This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- pouchdb -->
<script src="lib/pouchdb/pouchdb.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/modules/home.js"></script>
<script src="js/controller/home.js"></script>
</head>
<body ng-app="App">
<ion-nav-view></ion-nav-view>
</body>
</html>
My app.js
angular.module("App", ["ionic", "App.Home"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/home.html",
});
$urlRouterProvider.otherwise("/app/home");
})
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
My module home:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
});
As you can see here i want the home.html to use the HomeController So here is the HomeController
angular.module("App.Home")
.controller("HomeController", function() {
console.log("controller");
});
But the home controller actually never is called. The logoutput never appears. My home.html is showing:
<ion-view view-title="Home">
<ion-content>
Home
</ion-content>
</ion-view>
I mapped the controller to the template so why isnt the controller method getting called?
EDIT
if i change my home.html to the following:
<ion-view view-title="Home">
<ion-content ng-controller="HomeController">
Home
</ion-content>
</ion-view>
It works. So setting ng-controller="HomeController" works fine but
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
or
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"main": {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
Does not work. For me that makes no sense. I want to use the stateProvider to set the controller.
EDIT 2
created a plunker
Fixed!
The controller gets instantiated when it gets bound to the view.
I set the templateUrl of my abstract state to be templates\home.html
That is wrong. I just had to do:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "",
});
$urlRouterProvider.otherwise("/app/home");
})
and to use:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeController"
});
});
So without to define views.
Related
I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.
Here is my plunker.
And my code:
Created my navigation:
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
<a href='#/privat'>Log in</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>
Made the templates:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])
Added the $routeProvider to my config:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
$locationProvider.hashPrefix('!');
}]);
In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.
There were some errors in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a ng-href="#home">Home</a>
</li>
<li>
<a ng-href="#private">Private</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
</body>
</html>
Import Angular BEFORE ngRoute or any other module
Use ng-href='#routeName' or, otherwise
And in your js:
var myApp = angular.module('Productportfolio', ['ngRoute']);
myApp.controller('ProductCtrl', ['$scope',function ($scope) {
var vm = this;
}]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]);
You need to inject only external modules in your app module, not all controller, services etc
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
Last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs, you need to add <base href="/" /> at the end of your head.
For some reason, plunker does not allow me to do that, but I'm sure you'll get it to work on your version.
Here You can find the working plunker reproducing your application.
Hope I've been helpful.
The remaining and not visible problem is here :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider',
config() function of module object takes as parameter, a array of strings and not a string with "," as separator char inside it.
See example and doc here :
https://docs.angularjs.org/guide/providers#provider-recipe
So, it should be :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider', '$locationProvider',
Update :
But in fact, in your case, it works even without precising the array :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(
I updated the plunker and the app.js with both versions. I have the impression that the array is not mandatory (any longer). So, it seems better to ignore that parameter, especially, if with bad value, it may create side-effects.
Here the plunker with corrections (ordered lib, typos and config function called) :
http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview
I have removed $locationProvider.hashPrefix('!') as not suitable for the url you are using. See #AndreaM16 answer for that.
Besides, you have not declared your service you want to use in your controller.
app.js
angular.module('Productportfolio', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]
);
or app.js without the array parameter in config function :
angular.module('Productportfolio', ['ngRoute'])
.config(
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
// $locationProvider.hashPrefix('!');
}
);
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--Bootstrap-->
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</head>
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
Log in
</li>
</ul>
<div ng-view></div>
</body>
</html>
The order of loading java script files is very important. Load in the following order:
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet"
href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="3.0.0"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2"
src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8"
src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8"
src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
It means that you are loading Bootstrap.js files, but Bootstrap cannot work without jQuery library. So it means you should load jQuery at first, then Bootstrap.js. And other libraries should be reordered(I've shown in an example above).
In addition, you can use Console in your browser to see whether there are errors and what errors you have.
I have configured some basic state pretty much as it should but it seems the template is not injecting in <div ui-view></div>.
Here's my code.
https://plnkr.co/edit/LaMMc8JpCuq09Dav7CFW
EDIT:
My Index.html
<!DOCTYPE html>
<html ng-app="crudMasters">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.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://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script data-require="ui-router#*" data-semver="1.0.0-beta.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ui-view></div>
</body>
</html>
script.js
var app = angular.module('crudMasters', ['ui.router']);
app.config(function($stateProvider, $urlRouteProvider){
$urlRouteProvider.otherwise('/');
$stateProvider
.state('root',{
url: '/',
templateUrl: "home.htm"
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.htm",
controller: 'master1Ctrl',
controllerAs: '$ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.htm",
controller: 'master2Ctrl',
controllerAs: '$ctrl'
})
})
app.controller('mainCtrl', mainCtrl);
function mainCtrl(){
let ctrl = this;
}
You have many issues with your code,
(i) It's not urlRouteProvider it is $urlRouterProvider
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/");
$stateProvider
.state('root', {
url: '/',
templateUrl: "home.html",
controller: 'HomeCtrl'
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.html",
controller: 'master1Ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.html",
controller: 'master2Ctrl'
})
})
DEMO
1) The main issue of your code is your first route,
.state('root',{
url: '/',
templateUrl: "home.htm"
})
Should be,
.state('root',{
url: '',
templateUrl: "home.htm"
})
This should has the url as '' if you are not on '/' url.
2) Also, as #Sajeetharan mentioned, $urlRouteProvider, should be $urlRouterProvider.
check this plunker now, with the same code as yours and with these two changes
Working DEMO with your code
So, make those two changes and your plunker is good to go.
I am trying to incorporate $firebaseAuth into my Ionic project. I used a sample example, logging in with Twitter (auth.$authWithOAuthPopup('twitter')), from the Firebase website and incorporated it into my Ionic Framework. The code is shown below.
I am using the following versions (everything is up to date as of today):
firebase 2.0.4
angularfire 0.9.1
ionic 1.0.0-beta.14 "magnesium-mongoose"
Clicking on the button "Login" correctly opens the popup window and I can login. After that, however, in the Ionic project nothing has changed, while actually being logged in. When I refresh my browser, then it shows my displayname and it also notifies me that I am correctly logged in.
I had the same "stickyness" when trying to incorporate the ui-router authentication of Firebase, also copying the code from the website. Moreover, I had to refresh for changes to be processed.
Why is there this delay? Isn't firebase supposed to be real-time? My guess is that it has to do something with the settings of Ionic, since using the Angularfire-seed (without Ionic) works perfectly fine. Or maybe its something else?
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
services.js
angular.module('starter.services', [])
// let's create a re-usable factory that generates the $firebaseAuth instance
.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://cloakit.firebaseio.com/");
return $firebaseAuth(ref);
}])
controllers.js
// other controllers
// AccountCtrl
.controller("AccountCtrl", ["$scope", "Auth", function($scope, Auth) {
$scope.settings = {
enableFriends: true
};
$scope.auth = Auth;
$scope.user = $scope.auth.$getAuth();
}]);
tab-account.html
<ion-view view-title="Account">
<ion-content>
<ion-list>
<ion-item class="item-toggle">
Enable Friends
<label class="toggle">
<input type="checkbox" ng-model="settings.enableFriends">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
<ion-item>
<div ng-show="user">
<p>Hello, {{ user.twitter.displayName }}</p>
<button ng-click="auth.$unauth()">Logout</button>
</div>
<div ng-hide="user">
<p>Welcome, please log in.</p>
<button ng-click="auth.$authWithOAuthPopup('twitter')">Login</button>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- firebase js -->
<script src="lib/firebase/firebase.js"></script>
<script src="lib/firebase/angularfire/angularfire.min.js"></script>
<!-- loading bar -->
<script src="lib/angular-loading-bar/src/loading-bar.js"></script>
<link href='lib/angular-loading-bar/src/loading-bar.css' rel='stylesheet' />
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
You might want to take a look at $onAuth.
$onAuth Listens for changes to the client’s authentication state.
So your code would look like:
$scope.auth = Auth;
var authData = $scope.auth.$getAuth();
$scope.auth.$onAuth(function(authData) {
if (authData) {
$scope.user = authData
} else {
console.error("Could not retrieve user");
}
});
You may need to run a $scope.$apply(). I'm thinking you won't since $firebase should be within Angulars digest cycle, but I would throw one in there if it still doesn't work just to be sure you don't need it
I got an example from here : http://scotch.io/tutorials/javascript/angular-routing-using-ui-router and I see an example about using route-ui as below:
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
my question is : how can I use controller in other file and then call the name of that controller into .state's option ?
Here is my controller that I want to use in other file :
(function () {
'use strict';
angular.module("myCtrl", [])
.controller('myCtrl', function ($scope) {
$scope.dogs = ['name 1', 'name 2', 'name 3', 'name 4'];
})
})();
and here is my rout-ui :
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/partial-home.html',
controller: 'myCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'about/partial-about.html'
});
});
and below is my html page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testRoute</title>
<!-- testRoute references -->
<link href="css/index.css" rel="stylesheet" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
<div ui-view></div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app.js"></script>
<!--<script src="scripts/myController.js"></script>-->
</body>
</html>
Have you tried just doing controller: 'Name_of_your_Controller'?
I've created a index.html page where I am defining 2 links as:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="js/app.js"></script>
</head>
<body>
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
I my app.js file, I am defining the route as:
angular.module('test', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
}])
When I click on the links, defined in index.html file, it is not showing the another page as defined in app.js
You need not inject the dependencies in the config folder.
You can do it like this:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '/partials/login.html',
controller: 'login'
});
$urlRouterProvider.otherwise('/');
});