I am trying to set up my ui-routes and it seems simple but I don't know what's wrong. I have the following example, making a simple web template with angular ui-router
<script src="./bower_components/angular/angular.min.js" >></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap.min.js" >></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./app/app.module.js"></script>
<script src="./app/app.route.js"></script>
I've written the app.module.js ,app.route.js and index.html something like this
app.module.js
'use strict';
angular.module('ezer',[ 'ui.router'
])
.controller('main-cntrl',['$scope','$rootScope','$state',function($scope,$rootScope,$state)
{
$scope.message = "abc";
}]);
app.route.js
angular.module('ezer')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root',{
url: '',
views: {
'header': {
template: '<h1>My header</h1>',
controller: 'main-cntrl'
},
'footer':{
template : '<h1>My footer</h1>',
controller: 'main-cntrl'
}
}
})
}]);
index.html
<body ng-app="ezer" ng-controller="main-cntrl">
<div ui-view="header"></div>
<div ui-view="footer"></div>
</body>
In my console there are no errors at all.. I don't understand, what is the matter?
In your routes where you have the url, I think you should have 'url' : '/'.
in your app.route, the url should at least be '/' and not ''
Related
I just have a problem with angular routes.
I have a singlePage Application with 4 different views.
I'm using the ui.router for $stateProvider.
The main view is on route: https://testsite.com/
If I'm wanted to get to the page like: https://testsite.com/view1 i have an error. It is working if I'm on the main view and then changing the route on a click event like:
$scope.go = function ( path ) {
$location.path( path );
};
, but if i give the absolute url for the browser, it wont work.
Here is my index.html:
<body>
<div ui-view></div>
<script type="text/javascript" src="assets/javascript/libs/angular.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-route.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-ui-router.min.js"></script>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
view1:
<div class="first-container">
//some content here
</div>
view2:
<div class="second-conteiner">
//some content here
</div>
and my App.js:
var app = angular.module('SofticApp',['ngRoute', 'ui.router']);
app.config(function($routeProvider,$stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$stateProvider
.state( '/', {
url: '/',
templateUrl: 'assets/views/view1.html',
controller: 'viewFirstController'
})
.state( '/view2',{
url: '/view2',
templateUrl: 'assets/views/view2.html',
controller: 'viewSecondController'
});
Thanks for your help!
dont use the absolute url, use the path only
alternatively use
$state.go('view2')
notice that the state name should be 'view2' NOT '/view2'
I am just setting up a simple Angular app as I've done countless times. I added a home state and a separate state for a note taking app, yet neither states are displaying/injecting the html partials into the ui-view. I think it might be an issue with my ui-router setup, but I cannot find the issue. I console log from my controllers and they trigger correctly, so the states are clearly pointing to the right controllers.
Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="factory.js"></script>
<script src="config.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
config
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateURL: './home.html',
controller: 'homeCtrl'
})
.state('list', {
url: '/list',
templateURL: '/list.html',
controller: 'listCtrl'
})
$urlRouterProvider.otherwise('/home');
});
app.js
'use strict';
var app = angular.module('myApp', ['ui.router']);
app.controller('listCtrl', function($scope, myFactory) {
console.log("list working!");
$scope.items = myFactory.items
$scope.addItem = function() {
$scope.items.unshift($scope.newItem);
$scope.newItem = "";
}
})
app.controller('homeCtrl', function($scope) {
console.log("home working!");
$scope.test = 'test'
})
My home state should load a partial containing:
<div>
<h1>Welcome!</h1>
</div>
Plunker
http://plnkr.co/edit/ngHYDtx0VBe2YPlBeJ3t?p=preview
It has to be
templateUrl: './home.html',
Also, it is not desirable to use relative paths for templates, './home.html' and 'home.html' will be cached internally as two different templates.
I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.
The following is my config.js ( where the primary module is also defined )
(function() {
var app= angular.module("spa", [
//oob angular modules
//3rd party modules
'ui.router',
'ui.bootstrap'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
//function to config the routes
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: '../App/Views/dashboard.html',
controller: 'dashboardController',
controllerAs: 'vm'
})
.state('supplier', {
url: '/suppliers',
templateUrl: '../App/Views/supplier.html',
controller: 'supplierController',
controllerAs: 'vm'
})
.state('event', {
url: '/events',
templateUrl: '../App/Views/event.html',
controller: 'eventController',
controllerAs: 'vm'
})
.state('partner', {
url: '/partners',
templateUrl: '../App/Views/partner.html',
controller: 'partnerController',
controllerAs: 'vm'
})
$urlRouterProvider.otherwise('/');
}
app.controller('dashboardController', dashboardController)
function dashboardController() {
alert('dashboard-same function');
}
}());`
the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
});
This is the sequence of my references:
<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!--Jquery Plugins-->
<!--Custom Libs-->
<script src="../App/Common/config.js"></script>
<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>
Thanks in advance
As per my comment, you forgot to execute the wrapping function of eventController.js. It should be
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
})();
//^^--------You forgot these
If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.
Also I don't see routes.js in your html, or maybe you meant config.html.
Not completely sure what is going wrong on your side, but here is an example of how I do it:
For example I am using the following setup for modularizing my AngularJS app (v1.3.6):
index.html:
<html>
<head>
<title>Modularize</title>
<!-- load module -->
<script src="app/app.js"></script>
<script src="app/app.constant.js"></script>
<script src="app/app.config.js"></script>
<script src="app/app.run.js"></script>
<!-- load controllers/services/directives/factories -->
<script src="app/controllers/MyController.js"></script>
</head>
<body>
<!-- REST OF THE APP -->
</body>
</html>
app.js
var myapp = angular.module('spa', ['ui.router']);
app.constant.js
myapp.constant(function () {
});
app.config.js
myapp.config(function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'MyController',
});
});
app.run.js
myApp.run(function () {
});
MyController.js
myapp.controller('MyController', function ($scope) {
});
Am new to Angular JS and trying to implement grunt-angular-templates. I have successfully concatenated all htmls's into one JS file.
My app.js file:
angular.module('LoginApp').config(function ($routeProvider
.when('/login', {
templateUrl: '/views/common/login.html',
controller: 'LoginCtrl'
})
.otherwise({
redirectTo: '/account'
});
);
So from here if i load http://localhost:50/login, i can see login page on the screen and referred from /views/common/login.html path.
I am trying to implement the same using $templateCache. I have all the htmls concatenated in a JS file. I need to refer templates from the common JS file. I have included the template JS file in the index.html
Concatenated JS file:
angular.module('LoginApp').run(["$templateCache", function($templateCache) {
$templateCache.put("../app/views/commmon/login.html",
// contents for login.html ...
);
}]);
My Gruntfile
ngtemplates: {
myapp: {
options: {
base: "web",
module: "LoginApp",
},
src: ['app/views/common/*.html'],
dest: 'dist/views/html.js'
}
},
How can i access/refer templates from $templateCache?
TIA
You don't have to use $templateCache manually. If your template is cached, Angular is going to load it automatically.
The templateUrl should be the ID of your cached template generated by Grunt.
See this Plunker http://plnkr.co/edit/132S5UMLnBzzGGGI85l3
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
<script type="text/ng-template" id="login.html">
login.html
</script>
<script type="text/ng-template" id="account.html">
account.html
</script>
</body>
</html>
script.js
'use strict';
angular.module('sandbox', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
I would like to add new page into default ionic app with tabbed menu and display this page as the default page of the app.
Here is how I tried to do that:
I added new state into app.js
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
and set default router to home page
$urlRouterProvider.otherwise('/home');
And template file:
<ion-view title="Home">
<ion-content class="padding">
<h1>Home page</h1>
</ion-content>
</ion-view>
Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.
What I'm doing wrong?
Thanks for any help.
EDIT:
In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
I'm adding related code.
Added controllers:
angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope, $location) {
})
.controller('DashCtrl', function($scope) {
})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
});
Order in index.html is following
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/overall_stats.js"></script>
<script src="js/services.js"></script>
I would say, that solution here should be surprisingly simple:
Remove the view name 'home'. In fact change it to '' (empty string)
There is a working plunker with this change?
.state('home', {
url: '/home',
views: {
// instead of this
// 'home': {
// use this
'': {
templateUrl: 'tpl.home.html',
controller: 'HomeCtrl',
}
}
})
Why? Because most likely the index.html would look like this:
<body ng-app="myApp" >
...
<ion-nav-view></ion-nav-view>
</body>
And that means that the view name is "", almost like <ion-nav-view name=""></ion-nav-view>
Check that in action here
EXTEND based on the question extension
if we use ionic-like approach with separated file and module for controllers:
// inside of the index.html
<script src="js/controllers.js"></script>
// the controller.js
angular.module('starter.controllers', [])
We must be sure, that our app.js does contain that module as well:
angular.module('myApp', [
'ionic',
'starter.controllers' // this is a MUST
])