There is the following code (posts.js) :
'use strict'
angular.module('myBlog.posts', [
'myBlog.posts.controllers',
'myBlog.posts.directives',
'myBlog.posts.services',
'myBlog.posts.filters',
'ui.router'
]).config(['$stateProvider', '$locationProvider', function(stateProvider, locationProvider) {
stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
and main code (app.js):
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myBlog', [
'myBlog.posts',
'myBlog.controllers',
'myBlog.directives',
'myBlog.filters',
'myBlog.services'
]).run(['$state', function(state) {
state.go('allPosts');
}]);
I got no errors, but this code didn't work (i.e. after module loading I was not got to the 'posts' state. What's wrong?
Related
I have a problem with migrating from ngroute to ui.router:
using ngroute i have couple angular files:
module.js
angular.module('betTogether', ['ngRoute']);
route.js
angular.module('betTogether').config(['$routeProvider',
function (
$routeProvider
) {
$routeProvider.
when('/descriptionBets', {
templateUrl: 'descriptionBets',
controller: 'descriptionBetsCtrl'
}).
when('/normalBets', {
templateUrl: 'normal',
controller: 'normalBetsCtrl'
}).
when('/addBet', {
templateUrl: 'addBet',
controller: 'addBetCtrl'
}).
otherwise({
redirectTo: '/descriptionBets'
});
}]);
normalBets.js
angular.module('betTogether').controller('normalBetsCtrl', [
'$scope','$http',
function($scope,$http){
$scope.typeBetsImages = [{link: "images/basketball.png", title:"basketball"},
{link: "images/tenis.png", title: "tenis"},
{link: "images/volleyball.png", title: "volleyball"},
{link: "images/football.png", title:"football"}
];
$http.get("/normalBets").success(function(data){
$scope.normalBets = data;
});
}]);
...and rest of controllers. And everything works ok.
Now i want to migrate to ui-router. so i change module.js and route.js like that:
module.js
angular.module('betTogether', ['ui.router']);
route.js
angular.module('betTogether').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/descriptionBets")
$stateProvider
.state('descriptionBets', {//State demonstrating Nested views
url: "/descriptionBets",
templateUrl: "descriptionBets",
controller: "descriptionBetsCtrl"
})
.state('normalBets', {//nested state [products is the nested state of business state]
url: "/normalBets",
templateUrl: "normal",
controller: "normalBetsCtrl"
})
.state('addBet', {//nested state [services is the nested state of business state]
url: "/addBet",
templateUrl: "addBet",
controller: "addBetCtrl"
});
}]);
and it doesnt work. i have error:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.10/$injector/nomod?p0=betTogether angular.min.js:6:417
... and it is for 1st line of each controllers.
Someone could help me?
PS: sorry for my english, hope You understand all.
Check the order of your <script> imports in your index.html. The likelihood is that you've included the ui-router module after your betTogether module whereas it should come before it because betTogether depends on ui.router.
I have the following app.js file:
'use strict';
var app = angular.module('app', [
'auth0',
'angular-storage',
'angular-jwt',
'ui.router',
'Environment',
'Api',
'Profile'
]);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'js/modules/App/views/frontpage.html'
})
.state('login', {
url: '/login',
templateUrl: 'js/modules/User/views/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider
.otherwise('/main');
}]);
app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider',
function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
authProvider.init({
domain: 'marcrasmussen.eu.auth0.com',
clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe',
loginUrl: '/login'
});
authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store',
function ($location, profilePromise, idToken, store) {
console.log("Login Success");
profilePromise.then(function (profile) {
store.set('profile', profile);
store.set('token', idToken);
});
$location.path('/');
}]);
//Called when login fails
authProvider.on('loginFailure', function () {
alert("Error");
});
//Angular HTTP Interceptor function
jwtInterceptorProvider.tokenGetter = ['store', function (store) {
return store.get('token');
}];
//Push interceptor function to $httpProvider's interceptors
$httpProvider.interceptors.push('jwtInterceptor');
}]);
app.run(['auth', function (auth) {
// This hooks all auth events to check everything as soon as the app starts
auth.hookEvents();
}]);
And i have the following profile.js file:
angular.module('Profile', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile', {
abstract: true,
url: '/profile'
})
.state('profile.index', {
url: '/index',
templateUrl: 'js/modules/Profile/views/viewProfile.html'
})
}]);
in my index.html the files are listed as such:
<script src="js/modules/Profile/lib/profile.js"></script>
<script src="js/modules/App/lib/app.js"></script>
<script src="js/modules/App/directives/login/login.js"></script>
And lastly ofcourse i have my view port:
<div class="main" ui-view>
</div>
As you can tell my application starts on the route /main this works perfectly fine and frontpage.html is being rendered with all the html inside that file.
However when i go to profile.index or /profile/index no error is displayed in the console and no html within the template file js/modules/Profile/views/viewProfile.html is displayed.
Can anyone tell me why this is happening? what am i doing wrong?
I think the issue may be your abstract state. You are not defining a template or templateUrl for this state. Also note that the template for your abstract state must include a ui-view directive in order for its children to populate.
https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples
You may need to do something along the lines of:
.state('profile', {
abstract: true,
url: '/profile',
template: '<ui-view />
})
I want to implement pluginable angular app and i use this tutorial for solve problem and this tutorial uses RequireJs for load scripts in correct order
I want to convert this project to type script and i don't know how to use RequireJs in Typescript
for example this is my App.js Code :
define(['require', 'angular', 'underscore', 'src/modules/definitionsLoader.js', 'ngMaterial', 'ui.router', 'ngCookies', 'ngFileUpload' , 'src/controllers/controllers.js'],
function (require, angular, _ , definitionsLoader) {
require(definitionsLoader.scriptsToLoad, function () {
return initializeApp(angular);
});
function initializeApp(angular) {
var application = angular.module('app', definitionsLoader.modulesToLoad)
.config([
'$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/home');
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'src/views/dashboard.html',
controller: function() {
},
controllerAs: 'ctrl'
});
var states = definitionsLoader.statesToConfigure;
for (var i = 0; i < states.length; i++) {
var state = states[i];
$stateProvider.state(state.stateName, { url: state.url, controllerAs:'vm' , abstract: state.abstract, templateUrl: state.templateUrl, controller: state.controller });
}
}]).run(['$rootScope', function ($rootScope) {
$rootScope.modules = definitionsLoader.modules;
}])
angular.bootstrap(document, ['app']);
};
});
Since valid JavaScript code is also valid TypeScript code, your snippet "is already" TypeScript. If you also want intellisense and all the good stuff that comes with TypeScript you have to use a .d.ts file. You can find the requirejs.d.ts here. For an easy install I would recommend typings.
I've been following this tutorial https://www.youtube.com/watch?v=X_NZr_-RaLw and in my clientapp.js, when I insert
.factory('UserService', function($resource) {
return $resource('https://troop.tech/api/users/:user', {user: '#user'});
});
Into my code, all the angular UI routing just stops working.
Context:
var myApp = angular.module('myApp', ['ui.router','ngRouter'])
myApp.factory('UserService', function($resource) {
return $resource('https://troop.tech/api/users/:user', {user: '#user'});
});
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partial-dashboard.html'
})
.state('about', {
url: '/about',
templateUrl: 'partial-about.html'
})
.state('register', {
url: '/register',
templateUrl: 'partial-register.html'
});
$httpProvider.interceptors.push('authInterceptor');
});
myApp.controller('userController', function ($scope, $http, $window, UserService) {
$scope.users = UserService.query();
$scope.setDataForUser = function(userID) {
};
$scope.addUser = function(){
};
...
In your factroy you use $resource as a parameter so you need inject angular built in resource liberary.
In index.html:
<script src="yourComponentFolder/angular-resource/angular-resource.js"></script>
And add a module ngResource...
var myApp = angular.module('myApp', ['ui.router','ngRouter','ngResource']);
Reference in your Application that yoy follow
And one thing if you use ui-router not necessary to inject ngRouter so if you can discard ngRouter from module.
It was working fine when I used the $http service, but I wanted to make it RESTful. I'm getting errors now. Can someone kick me in the right direction? What am I doing wrong?
app.js:
'use strict';
angular
.module('swoleincApp', [
'ngRoute',
'ngSanitize',
'ngAnimate',
'ngResource'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/models', {
templateUrl: 'app/views/main.html',
controller: 'MainCtrl'
})
.when('/models/:modelId', {
templateUrl: 'app/views/individual.html',
controller: 'ProfileCtrl'
})
.otherwise({
redirectTo: '/models'
});
$locationProvider.html5Mode(true);
}]);
ProfileService.js:
'use strict';
angular
.module('swoleincApp')
.factory('Profile', ['$resource', ProfileService]);
function ProfileService($resource) {
return $resource('app/storage/individual/:modelId.json', {}, {
query: {
method: 'GET',
params: {
modelId: 'individual'
},
isArray: true
}
});
}
ProfileCtrl.js:
'use strict';
angular
.module('swoleincApp')
.controller('ProfileCtrl', ['$scope', ProfileCtrl]);
function ProfileCtrl($scope) {
$scope.profile = Profile.query();
}
When I load the models/:modelId page, the page loads respective to the modelId that was clicked but the angular doesn't compile or whatever, I just get brackets with strings in them.
I also get this error (note I am using Laravel with Homestead and VirtualBox):
ReferenceError: Profile is not defined
at new ProfileCtrl (http://laravel.app/app/js/controllers/ProfileCtrl.js:8:19)
at e (http://laravel.app/app/js/dependencies/angular.min.js:39:193)
at Object.instantiate (http://laravel.app/app/js/dependencies/angular.min.js:39:310)
at http://laravel.app/app/js/dependencies/angular.min.js:80:313
at A.link (http://laravel.app/app/js/dependencies/angular-route.min.js:7:268)
at aa (http://laravel.app/app/js/dependencies/angular.min.js:73:90)
at K (http://laravel.app/app/js/dependencies/angular.min.js:62:39)
at g (http://laravel.app/app/js/dependencies/angular.min.js:54:410)
at http://laravel.app/app/js/dependencies/angular.min.js:53:480
at http://laravel.app/app/js/dependencies/angular.min.js:55:397 <div ng-view="" class="view-frame ng-scope" data-ng-animate="1">(anonymous function) # angular.min.js:107
http://laravel.app/models/dom Failed to load resource: the server responded with a status of 404 (Not Found)
Seems like in your controller
function ProfileCtrl($scope) {
$scope.profile = Profile.query();
}
you didn't inject Profile factory.