I had an angular setup that looked like this:
var dashboard = angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);
dashboard.config(function($routeProvider, $locationProvider){
$routeProvider.when('/route1', {
templateUrl: 'route1.html',
controller: 'DefaultCtrl'
});
})
.controller('DefaultCtrl', function($scope, $rootScope, $http, settings){
function($scope, $rootScope, $http, settings){
$http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
$scope.games = data;
$rootScope.gameId = "";
$rootScope.gameName = "";
$rootScope.apiName = "";
$rootScope.$broadcast("loaded");
});
}
})
And this worked. I then tried to split them up into multiple files (one for each controller), and now it looks like this:
module file:
angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);
angular.module('Dashboard').config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.when('/route1', {
templateUrl: 'route1.html',
controller: 'DefaultCtrl'
});
}
])
controller file:
angular.module('Dashboard').controller("DefaultCtrl", ['$scope', '$rootScope', '$http', 'settings',
function($scope, $rootScope, $http, settings){
$http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
$scope.games = data;
$rootScope.gameId = "";
$rootScope.gameName = "";
$rootScope.apiName = "";
$rootScope.$broadcast("loaded");
});
}
]);
Now when I load the page I get this:
I am loading the files like this:
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/media/js/highcharts-ng.min.js"></script>
<!-- Begin app code -->
<script src="/admin/Dashboard.js"></script>
<!-- Built with smarty -->
<script>
angular.module('Dashboard').value("settings", {
userId: "{$userId}",
secret: "{$secret}"
});
</script>
<script src="/admin/components/default/DefaultController.js"></script>
<script src="/admin/components/game/GameController.js"></script>
<script src="/admin/components/leaderboard/LeaderboardController.js"></script>
<script src="/admin/components/newsFeed/NewsFeedController.js"></script>
I do notice that commenting out one of the following stops the Aw, Snap error.
DefaultController.js file
Inline JavaScript
highcharts-ng.min.js file
Edit:
I changed the name of the module to my site's name and made the Dashboard a dependency like this:
angular.module('GMServer', ["ngRoute", "highcharts-ng", "Dashboard"]);
angular.module('Dashboard')
This fixes the "Aw, Snap" issue, but now I get this error: https://docs.angularjs.org/error/$injector/nomod?p0=Dashboard
I'm not entirely sure what happens when you call the same angular.module several times but I would avoid it.
You want to save the module globally so then you can reference it in different files instead of calling angular.module('Dashboard') each time:
window.Dashboard = angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);
window.Dashboard.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.when('/route1', {
templateUrl: 'route1.html',
controller: 'DefaultCtrl'
});
}
])
and
window.Dashboard.controller("DefaultCtrl", ['$scope', '$rootScope', '$http', 'settings',
function($scope, $rootScope, $http, settings){
$http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
$scope.games = data;
$rootScope.gameId = "";
$rootScope.gameName = "";
$rootScope.apiName = "";
$rootScope.$broadcast("loaded");
});
}
]);
You'll just need to make sure your <script> tags are included in the correct order.
Avoid polluting the window object though, you may wanna namespace everything under window.App or use someting like requireJS or Browserify.
Edit
It's perfectly safe to retrieve a module like the OP is doing as pointed out #Sunil and documented here
Related
I am making an angularjs app but my routing part is not working.
Once I login into application using Login.html,it should route to index.html but it is not working.
app.js
/**
* Created by gupta_000 on 7/19/2016.
*/
'use strict';
var myApp = angular.module('myApp',[
'Controllers','ngRoute'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'Login.html',
controller: 'LoginCtrl'
}).
when('/home/student', {
templateUrl: 'index.html',
controller: 'DictionaryController'
}).
otherwise({
redirectTo: '/main'
});
}]);
I uploaded all my custom files at below location.
http://plnkr.co/edit/mi2JS4y2FfMD9kIl58qk?p=catalogue
I have already included all the dependency files like angular.js and angular-route.js etc..
Thanks in advance.
Here is a working plunker based on your code. You are missing the ng-view that the ngRoute will replace based on your config. So, the index.html looks like:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ng-view></ng-view>
</body>
ng-view is an Angular directive that will include the template of the current route (/main or /home/student) in the main layout file. In plain words, it takes the file based on the route and injects it into the main layout (index.html).
In the config, ng-view will be replace by 'main' that points to Login.html. I change the '/home/student/' to point to a new page 'dic.html' to avoid infinite loop as it used to point to index.html
var app = angular.module('plunker', ['ngRoute', 'Controllers']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'Login.html',
controller: 'LoginCtrl'
}).
when('/home/student', {
templateUrl: 'dic.html',
controller: 'DictionaryController'
}).
otherwise({
redirectTo: '/main'
});
}
]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Like your example, if one logs in with 'harish' as an e-mail and 'harish' as a password, the successCallback is called and goes to '/home/student' that replaces ng-view by dic.html:
$scope.validate = function() {
$http.get('credentials.json').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Data: ' + JSON.stringify(response));
$scope.users = response.data;
var count = 0;
for (var i = 0, len = $scope.users.length; i < len; i++) {
if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) {
alert("login successful");
count = count + 1;
if ($scope.users[i].role === "student") {
$location.path('/home/student');
break;
}
}
}
if (count != 1) {
alert("Please provide valid login credentials");
$location.path("/main")
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("Error: " + JSON.stringify(response));
alert(JSON.stringify(response));
});
};
Let us know if that helps.
You need to add ng-view in the index.html inside the ng-app.
Something like..
<body ng-app="myApp">
<ng-view></ng-view>
</body>
Now, the angular app would assign the view template and controller as defined by your routes configuration, INSIDE the ng-view directive.
Also, should have a generic index.html where all dependencies are included, and render the templates & assign them controllers in accordance with routes configurations. No need to create separate files which includes the dependencies all over again, like you did with index.html and login.html.
You have not injected $location in your controller.
app.controller('MainCtrl', function($scope, $http, $location) {
$scope.name = 'World';
});
I have bunch of JSON models in my project and I need to show different models depends on user's actions.
Here is Angular router code:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}).when('/doc/:section, {
templateUrl: 'views/doc.html',
controller: 'DocCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
And here is DocCtrl.js file:
app.controller('DocCtrl', ['$scope', '$http', 'JSONModelsService',
function ($scope, $http, JSONModelsService) {
var formData = {};
$scope.group = {};
$scope.sections = [];
JSONModelsService.get([section])
.then(function (response) {
console.log(response);
$scope.group = response.data.groups[0];
$scope.sections = $scope.group.sections;
});
}]);
I basically need to make section dynamic so I can show different models in my views. However, I'm confused how I can do it. I just have a folder called JSONModels with multiple json files.
If I understand your question correctly, you are aiming at replacing the [section] part of your code with an actual section identifier?
When a user visits your /doc/:section route, e.g. /doc/my-doc you can access the :section part by injecting the $routeParams service into your controller.
app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService',
function ($scope, $http, $routeParams, JSONModelsService) {
...
Using the $routeParams service, you have access to your route parameters. So you can simple access the :section parameter, by reading it off $routeParams.section.
A full example (of what I think you're trying to achieve):
app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService',
function ($scope, $http, $routeParams, JSONModelsService) {
var formData = {};
$scope.group = {};
$scope.sections = [];
JSONModelsService.get([$routeParams.section])
.then(function (response) {
console.log(response);
$scope.group = response.data.groups[0];
$scope.sections = $scope.group.sections;
});
}]);
If you would like to know more, take a look at step 7 of the angular tutorial: https://docs.angularjs.org/tutorial/step_07
I started to write an Ionic application and started to write my views and controllers. I want to use a tab-layout.
For clarity i want to seperate my controllers in different files.
My controllers-Folder:
controller.js
main.js
tabs.js
controller.js contains:
angular.module('myApp.controllers', []);
main.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('TabsCtrl', function ($scope) {
});
In the app.js i specify my routings:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'app/templates/tabs.html',
controller: 'TabsCtrl'
})
.state('tab.main', {
url: '/main',
views: {
'tab-main': {
templateUrl: 'app/templates/main.html',
controller: 'MainCtrl'
}
}
})
And finally in my index.html i include all used files in the header:
<script src="app/app.js"></script>
<!-- Controller-Definition -->
<script src="app/controller/controller.js"></script>
<script src="app/controller/tabs.js"></script>
<script src="app/controller/main.js"></script>
My problem is that in the browser i get the error:
Argument 'TabsCtrl' is not a function, got undefined
and i don't know why its not working!
when i change the order of the tabs.js und main.js in the index.html file
i get:
Argument 'MainCtrl' is not a function, got undefined
Could someone give me help on this problem? it's probably is something small and simple but i don't get it :-)
You overwrite 'myApp.controllers' module in each file. Try this:
controller.js:
angular.module('myApp.controllers', ['myApp.services','ionic']);
main.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js
angular.module('myApp.controllers')
.controller('TabsCtrl', function ($scope) {
});
I want to use AngularJS in combination with Django to make single-page application. In general, I have index page (search) and details page with more sub-pages.
And that makes a problem. I have one controller (for details and it is getting info about object which is chosen) and other controllers user that main controller using $controller function.
It looks like:
.controller('BuildingDetailsCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location',
function($scope, $routeParams, buildingsRepository, $location) {
$scope.details = null;
$scope.menu = templatesFolder + "buildings/menus/";
$scope.currentUrl = $location.url();
$scope.loading = true;
buildingsRepository.getDetails($routeParams.slug).then(function(res) {
$scope.details = res.data[0];
$scope.loading = false;
});
$scope.alert = {"type": null, "message": null};
}])
.controller('SecondCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location', '$controller',
function($scope, $routeParams, buildingsRepository, $location, $controller) {
$controller('BuildingDetailsCtrl', {$scope: $scope, $routeParams: $routeParams, buildingsRepository: buildingsRepository, $location: $location})
$scope.partial = templatesFolder + "buildings/details/info.html";
}])
and my urls:
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: templatesFolder + "buildings/index.html", controller: 'UserBuildingsCtrl'});
$routeProvider.when('/details/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingInfoCtrl'});
$routeProvider.when('/test/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'SecondCtrl'});
$routeProvider.when('/contact/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingContactCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
On that details.htmlpage, I have one menu, but problem is loading, and everytime I change from, for example, InfoCtrl to SecondCtrl, my menu is being refreshed and I can see that (less than half second). It is irritating.
Is there any way to prevent loading of those templates, to load just partial, but with changing URL (I need it to be accessed from copied url etc)?
You can embed your template in the already-rendered page as a script of type text/ng-template:
<script type="text/ng-template" id="details.html">
<p>hello world</p>
</script>
Here is a plunk.
You should not need to call $controller() in your controller. You angular app will instance the controller needed by including a directive in your html like this:
<div ng-controller="BuildingDetailsCtrl">
...
</div>
I'm trying to parse for the access_token from Foursquare where the URL is like this:
https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX
I've tried $routeParams and $location and get nothing returned. Only after I tried $route, I did get an object back with the following attribute in it:
current: {
params: { }
pathParams: { }
loadedTemplateUrl: partials/4sqredirect
locals: { }
scope: {
this: {
$ref: $["current"]["scope"]
}
route: {
$ref: $
}
location: { }
token: null
}
}
Does this mean there's no way to get it using native AngularJS functions cause of the hash?
UPDATE:
my controller looks like as follows:
angular.module('myApp')
.controller('4sqredirectCtrl', function ($scope, $route, $location, $routeParams) {
$scope.route = $route;
$scope.location = $location;
$scope.token = $routeParams.access_token;
});
my main js looks like as follows:
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'partials/main',
controller: 'MainCtrl'
})
.when('/4sqredirect/', {
templateUrl: 'partials/4sqredirect',
controller: '4sqredirectCtrl'
})
.otherwise({
redirectTo: '/'
});
});
From angular location service $location.hash() method return #after-hash
so if your url is look like
https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX
then
$location.hash() return access_token=1234567890XXXXX
you need to split it split('=')[1]
see this plunker when you click 4Square then $location.url() return
/4sqredirect/#access_token=123456
$location.hash().split('=')[1]
return 123456
Use $location.search()
//e.g. url https://www.example.com/#!?name=123
var s = $location.search();
// {name: '123'}
http://docs.angularjs.org/api/ng.$location
Search:
Returns search part (as object) of current url when called without any parameter.
I'm not aware of a "native angular" way to do it, but you do have access to the hash via location.hash as a string type. it's probably not ideal, but it's workable.
There is in fact no direct support from Angular JS to do this. I wouldn't use ngRoute, because it already might expect the # at a different place. A simple solution to your problem is to use the location.hash and the substring() function:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
angular.module('app', [])
.controller('AppCtrl', ['$scope', '$window', function($scope, $window) {
$scope.accessToken = $window.location.hash.substring(14);
}]);
</script>
</head>
<body ng-controller="AppCtrl">
<h1>Access Token</h1>
<p>{{accessToken}}</p>
</body>
</html>