I'm using Angular for my android application. After given time I need to open a template file. This is my app.js for the particular template file
.when('/tracker/',
{
templateUrl: 'views/tracker.html',
controller: 'MainController'
})
I want to open this tracker.html file directly from my MainController and I'm not sure how to do that. If you need more information let me know.
Since I'm still new to Angular any help would be appreciated to make this happen.
You can try linking one of your scope attributes to a modal (this would open your tracker.html as a popup and then you can define other stuffs)
function MainController($scope, $uibModal) {
var modalInstance;
$scope.open= function () {
modalInstance = $uibModal.open({
templateUrl: 'views/tracker.html',
controller: 'MainController'
});
};
}
What you've done seems sufficient, I'll explain your code snippet.
.when('/tracker/',...
The above snippet says, when a user or browser requests the URL yourhost.com/tracker/', do what's following,
.., {
templateUrl: 'views/tracker.html',
controller: 'MainController'
})
Direct them to the template views/tracker.html and use the controller MainController on the specified template above.
That's the simplest explanation i could come up with. I hope navigating your browser to the link, yourhost.com/tracker/ will show you the tracker.html template you need.
If the above fails, make sure you have correctly defined your ng-view directives in your index.html file (https://docs.angularjs.org/api/ngRoute/directive/ngView) or watch out the browser console for any errors.
Related
I want to display an HTML file when a user has logged in. Right now we have a slideshow that is presented to the user after logging in, but after it, I want to display another view.
I jumped on this project although I'm new to Angular and Ionic, I assume this is how we render out the slideshow:
In our controller, we have an IntroCtrl which operates the logic behind the slideshow. So, do I need to create another controller to display my view afterwards?
.controller('IntroCtrl', function ($scope, $state, $localStorage, $ionicSlideBoxDelegate, $ionicScrollDelegate, $stateParams) {
$scope.$on('$ionicView.enter', function (e) {
$ionicScrollDelegate.resize()
$ionicSlideBoxDelegate.slide(0, 1)
})
$scope.email = $stateParams.email
$scope.startApp = function () {
$localStorage.hasViewedSlideBox
$state.transitionTo('tab.dash')
}
$scope.next = function () {
$ionicSlideBoxDelegate.next();
}
})
I found this in our app.js and this file contains $stateProvider, $urlRouterProvider, $ionicConfigProvider.
At the bottom I found a lot of these:
.state('login', {
url: '/login',
cache: false,
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
Therefore I assume I should create a new one containing the templateUrl and controller of my view? I read online that these .state has to do with Angular routing, but I can be wrong.
However, I would be really happy if anyone could guide me here.
Like I said, I want to display a new view after the slideshow.
Thanks!
I suggest create a new html and design your "afterLogin" html and copy your state(to which you will be redirected after login), comment it out and change the templateUrl to your new html file.
That should do all what you want.
You don't need your IntroCrl in the new file because it will only run a slideshow which is not present.
But you should insert
$scope.startApp = function () {
$localStorage.hasViewedSlideBox
$state.transitionTo('tab.dash')
}
into your new controller.
If you don't have a route to which you are redirected after login, you have to provide more code, so we can dive more deep into it
I am not sure what the problem is, im assuming its something with the way my angular routing is? If anyone could help that would be very appreciated.
This is my controller, the console log here actually prints.
app.controller('ClientCtrl',['$http','$scope',
'$stateParams',function($http,$scope, $stateParams){
var clientid = [$stateParams.id];
var client = this;
client.infos = []
$http.get('../client.JSON').success(function(data){
client.infos = data;
console.log(client.infos)
});
}]);
This is my routes, im using ui.router, since im using angular. the client route is the one causing problems.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'MainCtrl',
})
.state('clients', {
url: '/clients/{id}',
templateUrl: 'clientsmain.html',
controller: 'ClientCtrl'
})
.state('photoplans', {
url: '/photoplans/:id',
templateUrl: 'photoplanmain.html'
});
}])
This is the html file thats causing me problems
<h1>Hi! </h1>
<div class="col-sm-6" ng-repeat="info in client.infos" >
<p>{{info.active}}</p>
</div>
<script> console.log("this sucks") console.log(client.infos)</script>
And this is the console right now
I have tried everything i can think of to get this to work, but nothing works currently. As you can see angular is not throwing errors, but nothing is console logging from this page nor is the ng-repeat working. Any help is greatly appreciated, thanks in advance.
You have already printed a result from the angular controller in console its there in screen shot.
Seems like you should us controllerAs alias there for controller, you could declare alias inside your state itself like by doing controller: 'ClientCtrl as client'
Markup
<h1>Hi! </h1>
<div class="col-sm-6" ng-repeat="info in client.infos" >
<p>{{info.active}}</p>
</div>
State
.state('clients', {
url: '/clients/{id}',
templateUrl: 'clientsmain.html',
controller: 'ClientCtrl as client'
})
Update
You can not load script from the partials, they will never get readed when they are loaded through the partial html. Though using console.log(client.infos) never make sense how can you think of angular context will available for the global script.
If you want it something like this then you could take a look at this thread, but my personal advice is you shouldn't go for this.
In AngularJS it has the ability to route a section of the page using ng-view. This is really nice for smaller projects but as projects get larger it does not scale very well due to the inability to load scripts in the script tag. I've seen a few other posts that regard this but I cannot get a solution to work. The only way I can get it to work (I consider it a hack and doesn't work the way I would like it) is if I include all the scripts at the top of the base Index.html.
What I would like is when the view changes to have the Javascript files, in the header of the View being loaded, be loaded at that point since they are going to actually be used at that point and not have to pre-load them at the beginning of the application.
http://plnkr.co/edit/7LMv0j2sAcjigPuW7ryv?p=preview
In the demo project the Index.html calls the console.log command but I cannot get page1 or page2 to call the log command. Any help would be greatly appreciated.
I am using Angular 1.3.0 Beta 11.
2 things, in your view you don't have to write <html> or <body> tags, you've already got those on you main page. You should see the view as a part of the main page.
second, to add javascript to your views you add a controller to the view like this:
.config(function ($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: function ($log) {
$log.info('page 1');
}
})
.when('/page2', {
templateUrl: 'page2.html',
controller: function ($log) {
$log.info('page 2');
}
});
});
it's also possible to add a controller to a view like this:
var app = angular.module('routeApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: function ($log) {
$log.info('page 1');
}
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'ViewController'
});
});
app.controller('ViewController', function ($log) {
$log.info('page 2');
})
i updated your plunker: Here
Here's the [plunker]:http://plnkr.co/edit/iPsyEAIQWxJIJuneZb8B?p=preview
What I want is when I click login, the auth directive should change template to 'logout.html' automatically , and then when logout clicked, switch to use 'login.html'.
But so far, I should refresh page manully to make directive to switch template.
How can I achieve this purpose?
Using routes.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/logout', {
templateUrl: 'logout.html',
controller: 'logoutCtrl'
})
}]);
Then you do $location.path('/logout') or $location.path('/login')
Here is the tutorial:
http://docs.angularjs.org/tutorial/step_07
I've fixed a couple of bugs in your plunker. Check it out here
Your major error was the $watch expression. It should be scope.$watch('authed', function () {}); not scope.$watch(scope.authed, function () {});.
I've also played a bit with it and came up with this version. The idea is to separate logon/logout logic with cookie manipulation and get rid of explicit DOM manipulation, $compile() etc.
Let's say I have this config:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/index.html',
controller: 'defaultCtrl'
})
.when('/other', {
templateUrl: 'app/partials/other.html',
controller: 'errorCtrl'
})
.otherwise({
templateUrl: 'app/partials/404.html'
});
}
]);
I'm looking for a place to do some basic, common maintenance code before the router calls the route. Say I'd like to clear the console log via console.clear() every time the route is changed. How and where would be the best place in the code to do that?
The $route service raise events like $routeChangeStart which you can use to perform such tasks. You can implement them using the $scope.$on method. Someting like
$scope.$on('$routeChangeStart',function(angularEvent,next,current) {
//do you work here
});
Read the $route documentation to get idea on this and other such events.
Also $routeProvider configuration method when also can take a parameter resolve which actually is used to setup dependencies before the route is resolved. This resolve object map can also be used to achieve what you want to do.