when I reload page I'm getting a warning saying that "Tried to load angular more than once".But I didn't import angular script more than once.
If any one please give any answer for this question
Its a generic errors it could have many reasons to get this warning. I will try to give suggestions for two cases
first it's a problem of routeProvider not finding a file and recursively loading the default.
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
if you are using ui-view then it should be like below
<ui-view></ui-view>
3. You have to add jquery script tag before angularjs so that angularjs can replace jqLite by jQuery.
script loading order should be like below
jquery.js
jqueryui.js
angular.js
Related
I am using AngularJS routing, which is changing the template when I select a link. However, for the last page, I have a link that I want to go to another internal HTML page and not load a template view again. How can I do this?
So far I have tried a few options but here is what I have now.
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
.when("/page-eight", {
templateUrl : "views/page-eight.html",
controller: 'primaryController'
})
.otherwise({
templateUrl : "views/start.html"
});
}]);
The above routing work, but as I have a link in my page-eight.html template as shown below, how can I force it to go to an internal page instead?
<a ng-href="internal-page.html" class="btn-solid">Go to Internal Page</a>
It seems that by clicking on the link above, this is connected to the 'otherwise' part of my route set up. Therefore, this doesn't go to my internal-page.html but loads in my start.html, not what I want.
I believe if you add target="_self" it will bypass the router.
Also, your server side route handler needs to serve up the correct "non-SPA" content for that specific page, depending how you have it set up.
I try to write my first component. Actually, I refactor one of my previous webpage to use more of the AngularJS functionality.
I use AngularJS 1.5.8
Honestly I always got the following inject error:
http://screencast.com/t/xpyVqSjwUxU
Here is my component code:
http://screencast.com/t/zMaED5ZfZ
The error only came up, when I add the component.js file in index.html with a script tag.
Any idea, what I'm gonna mess? I read the component angularjs documentation but not find the error.
Try putting the return value { templateUrl: ..., controller..., etc } in the .component() function.
angular
.module('Profile')
.component('UpdatePasswordComponent', {
templateUrl: '/modules/profile/update-password/update-password.component.html',
controller: UpdatePasswordController,
controllerAs: 'vm'
});
Another option might be to just change this line
.component('UpdatePasswordComponent', Component)
to
.component('UpdatePasswordComponent', Component())
which will actually call and return the object, but I'm not positive on this one.
I'm new to angularJS so I'm still learning the "angular way" of doing things and therefore seek for advice.
I started building my login/register/forgotten_password views which now work perfectly fine. So the routing looks basically like this:
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.when('/register',
{
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/dashboard',
{
controller: 'dashboardCtrl',
templateUrl: 'views/dashboard.html'
})
})
Now here's the problem and/or question I have :
After a successful login, you get redirected to the dashboard which gets loaded into ng-view. The dashboard is indeed the view but there should be more controllers and templates once you enter the app (sidebar, topbar, chat...).
How would you approach this ?
I also have a globalCtrl on the html element to handle other things, just in case that information might be helpful in any way.
You shouldn't think in controllers anymore. Rather think in "components". There are lots of articles on the internet on how to learn this (better) approach. Here is one to start: Refactoring Angular Apps to Component Style
tl;dr; Create a component (element directive) for every section/part of your view. In your case a <dashboard>, <sidebar>, <topbar>, ...
You can (and should) route to components! See this issue for more information. Here is a "real life" example on how to achieve this: https://github.com/ui-router/sample-app-ng1
This is the con giving of using $routeProvider in Angular JS. When you use a $routeProvider to define routes in angular JS, a single route can only point to a single view and there is no concept of nested views using $routeProvider.
And when you talk about having more than one template inside the view, you are talking about having nested views inside a single view. Unfortunately Angular's $routeProvider doesn't provide that. But now comes the ui-router, which replace the concept of route with states. You can define multiple sub states in a state and each sub state can point to different template. Look at the following link and follow simple steps to power up views and nested views in your app.
ui-router
I am quite new to Angular and now trying to make a simple routing with it. I have my landing page, currently called index2.html, containing some .js and .css includes and a div containing <ng-view></ng-view> where my content should go into.
My app.js looks like this:
var module1 = angular.module('module1', ['ngRoute']);
module1.config(function($routeProvider, $locationProvider){
$routeProvider.when("/",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/:param",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/transactions",
{
templateUrl: "page2.html",
controller: "uiCtrl"
});
});
But actually this does quite confusing things. Calling http://myurl.com/index2.html, the content of page1.html is properly loaded into the ng-view. So far, so good, but calling index2.html/123 gives my a Not Found instead of interpreting 123 as a parameter. I don't know why, but to make 123 a paremeter i have to call index2.html#123, which works, but then instantly updates the url to index2.html#/123.
Calling index2.html/transactions doesn't work at all. How can i call my /transactions route?
EDIT: If this is useful, i am using JQueryMobile as well in these pages.
I finally got what I want by getting the HTML5 mode work, which makes things so much easier.
After setting $locationProvider.html5Mode(true); I had to re-configure my webserver, what I wasn't able to manage until I found this nice guide: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Now I can access each of my routes at the conventional way using a slash. Parameters can be passed with ? and &, as usual and I don't need to grapple with confusing hashtags and self-changing url's anymore.
I'm new to angularjs and want to integrate it in a cakephp app. For some pages I don't have a controller since no javascript is exectuted there or because I still have to create them. I however don't want to list them all in the routes. For this reason i set it like the following:
angular.module('desktop', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {templateUrl: 'pages/index', controller: IndexController})
.when('/clubs', {templateUrl: 'partials/clubs.html',controller: ClubListController})
.otherwise({templateUrl: location.pathname});
}]);
This is however not working. When I go to /help, nothing happens. What am i doing wrong?
From my comments:
As far as I know it there is currently no way to do this with just routes. Routes are made to be static, they are defined as the app loads and do not update dynamically as time goes by. So using location.pathname() (or directly checking window.location) won't work since the route be set to whatever the value is when the app starts, and then never change again. It won't update when you load a new path unless you do a full browser reload (this is btw possible, but a hacky sollution).
But people have been working around it using includes, which might work for you depending on what you are after. See this question and the accepted answer for an example of how this works.
AngularJS - How to use $routeParams in generating the templateUrl?