Hi currently i am using ngRoute to fetch template from backend. but because of the size of template, it freezes till the template is loaded. What i want is a progress bar that shows the status of template as it is downloading .
I have found that ngProgress might be something that i want but i have not been able to integrate the same. Here is a small snippet for the ngRoute
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'authCtl'
})
.when('/signup', {
templateUrl : '/templates/signup.html',
controller : 'authCtl'
})
.otherwise({
templateUrl : '/templates/404.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
});
Have you tried angular-loading-bar?
https://chieffancypants.github.io/angular-loading-bar/
Related
I have the following code
var balaitus = angular.module("balaitus", ["ngRoute"]);
// configure our routes
balaitus.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
.when('/home_usuario', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
// route for the about page
.when('/estadisticas', {
templateUrl : 'estadisticas.html',
controller : 'estadisticasCtrl'
})
// route for the contact page
.when('/hashtags', {
templateUrl : 'hashtags.html',
controller : 'hashtagsCtrl'
})
.otherwise({
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
});
});
// create the controller and inject Angular's $scope
balaitus.controller('usuarioCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Hi! This is the home page.';
});
balaitus.controller('estadisticasCtrl', function($scope) {
$scope.message = 'Hi! This is the estadisticas page.';
});
balaitus.controller('hashtagsCtrl', function($scope) {
$scope.message = 'Would you like to contact us?';
});
The code simply routes different pages, and set the corresponding controller. It works fine, but when I add another angular module between [ ], for example ngFileUpload or ui.bootstrap.demo, ng-route doesn't work, ¿but why?
you should add it in the constructor, like:
var balaitus=angular.module("balaitus", ['webix', 'ngRoute','ui.router']);
balaitus.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$qProvider', function ($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider, $qProvider) {
$routeProvider ....
and of course include the js files in ur html code
<script src="Scripts/angular-route.js"></script>
If we edit the URL forcefully the web page shows the same content with different URL.
For example http://www.example.com/# and http://www.example.com/#/abc serves same content.
Wants to Redirect edited URL on Home page every time show correct path in URL.
.state('system.confirmation', {
url: '/confirmation',
templateUrl: 'tpls/views/system/confirmation/confirmation.html',
controller: 'ConfirmationController',
controllerAs:'confirmationController',
}
What you're looking for is the otherswise() function. Try adding this in your config function:
$urlRouterProvider.otherwise('/')
This will make sure that all uncaught routes will be redirected to your base URL.
$rootScope.$on('$routeChangeStart', function (event, next, last) {
console.log(event, next, last)// get all info, about current controller
$scope.someFunction();
});
You can do everything with this, before change any routes, this function will call, there you can check for something you are talking about.
try this
App.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/index', {
templateUrl : 'views/site/index.html',
controller : 'indexController'
})
// route for the about page
.when('/about', {
templateUrl : 'views/site/about.html',
controller : 'aboutController'
})
.when('/404', {
templateUrl : 'views/site/404.html',
controller : '404Controller'
})
.when('/signup', {
templateUrl : 'views/site/signup.html',
controller : 'signupController'
})
.when('/forgotPass', {
templateUrl : 'views/site/forgotPassword.html',
controller : 'forgotPassController'
})
.when('/login', {
templateUrl : 'views/site/login.html',
controller : 'loginController'
}).otherwise({
redirectTo: '/404'
});;
});
App.controller('404Controller',['$scope', function($scope) {
$scope.message = 'Page not found 404.';
}]);
I've created a single page application using ngRoute like so:
index.html (ngRoute)
var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.when('/chat', {
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
});
}).run(function ($rootScope) {
// App is loading, so set isAppLoading to true and start a timer
console.log($rootScope);
$rootScope.isAppLoading = true;
});;
small-talkz.model.js (ngRoute)
<div ng-app="smallTalkzModel" >
<div ng-view>
</div>
</div>
Then I heard that it is better to use ui.router because it is a 3rd party which have more capabilities and can does everything that ngRoute does and more and will be supported in future version of angular js...
So, I tried to refactore my code into the code below. which does not work...
Can anyone tell me why? I did not use ng-surf because I don't have any links into my html. I get to them by localhost:3000/somePage and not by navigation...
index.html (ui.router)
<div ng-app="smallTalkzModel" class="loader">
<div ui-view>
</div>
</div>
small-talkz.model.js (ui.router)
var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router']);
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.state('chat', {
url: '/chat',
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
});
});;
Expecting that you have included the library ui-router.js in your project. Code looks fine. One thing i think might me causing issue is to define the route when none of the states defined by you matches the state of application. Use otherwise option for that as below:
$urlRouterProvider.otherwise('/');
Code should look like:
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.state('chat', {
url: '/chat',
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
})
$urlRouterProvider.otherwise('/');
});
angular-ui-router is based on states.
If you want to go from one state to another then you have to use "ui-sref" or "$state.go()"
for example to go to your chat page (State), use:
<a ui-sref="chat">to go chat page</a>
I've been using other MVC Frameworks but I'm new to AngularJS and have ran into an issue. I have a controller called "Projects" and the route is /projects but I want to be able to do /projects/java where i would call a new page template/view and display that content.
How would I do this in AngularJS? Is there a way to create actions for projects or would I have to do something else?
angular
.module('konradApp', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
title : 'Welcome',
templateUrl : 'views/main.html',
controller : 'MainCtrl',
controllerAs : 'main'
})
.when('/about', {
title : 'About',
templateUrl : 'views/about.html',
controller : 'AboutCtrl',
controllerAs : 'about'
})
.when('/projects', {
title : 'Projects',
templateUrl : 'views/projects.html',
controller : 'ProjectsCtrl',
controllerAs : 'projects'
})
.when('/contact', {
title : 'Contact',
templateUrl : 'views/contact.html',
controller : 'ContactCtrl',
controllerAs : 'contact'
})
.otherwise({
redirectTo : '/'
});
});
Controller:
angular.module('konradApp')
.controller('ProjectsCtrl', function () {
});
You'll want to do this using something called $routeParams which will allow you to code out your views. As a result your route configuration becomes:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
title : 'Welcome',
templateUrl : 'views/main.html',
controller : 'MainCtrl',
})
.when('/:view', {
title : function($routeParams){return $routeParams.view},
templateUrl : function(params){return 'views/'+params.view+'.html'},
controller : function($routeParams){return $routeParams.view+'Ctrl'},
})
.otherwise({
redirectTo : '/'
});
});
What you're after is a way to add nested views. Refer to the ui-router docs on how to do that: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
The idea is to add a nested ui-view in your projects.html and add a child route for your sub-view.
$routeProvider
.when('/default', {
templateUrl: 'HTML/login.html',
controller : 'funct2'
}).when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller : 'admin'
}).otherwise({
redirectTo : '/default'
});
When i try to use the controller adminMenu i get a no adminMenu defined even though its defined with in the js files linked to adminMenu.html.
When going to the individual adminMenu.html page it loads, however when specifying the controller in routeProvider it never loads. Any ideas?
if you defined your controller like this:
function MyCtrl($scope) {
}
You will have to specify your controller like this (without the quotes):
.when('/default', {
templateUrl: 'myCtrl.html',
controller : MyCtrl
})