I making application in Ruby on Rails and using AngularJS.
My application.js file is
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular.min
//= require angular-ui-router.min
var app = angular.module("railsApp", ['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('about', {
url: 'about',
templateUrl: 'about.html'
});
$urlRouterProvider.otherwise('/');
});
app.controller("mainCtrl", function($scope) {
$scope.helloMsg = "Hello from test application";
});
index page
<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
{{helloMsg}}<br>
<ui-view></ui-view>
<a ui-sref="about">about</a>
when index page loaded I see message "Hello from test application" and into <ui-view></ui-view> substituted template content, but I clicked about link new template is not loading and url not changed to /about. what is the problem? Thanks and Sorry for my english
Please try this will fix your URL issue and renders the requested views.You have to give perfect URL
so that view will be mathced perfactly.
var app = angular.module("railsApp", ['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('/about', {
url: 'about',
templateUrl: 'about.html'
});
$urlRouterProvider.otherwise('/');
});
as per the ui router readme, try to change url: 'about' tourl: '/about'
Related
Strugle alot but couldn't solve this problem. It been nightmare for me. I am using rails 6. and jquery ui "jquery-ui": "^1.13.0". I have added gem gem 'acts_as_list' and added yarn as yarn add jquery-ui.
I have added in application.js file
`require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")`
and added the code
$(document).on("turbolinks:load", () => {
$("#employeeLevel").sortable({
handle: '.handle',
update: function(e, ui) {
Rails.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize'),
success: function(result){
console.log('my msg'+result);
}
});
}
});
})
In index.html.slim addded an id as
tbody id="employeeLevel" data-url="<%= sort_employee_levels_path %>"
Waiting for your response. Thank you in advance
This is what I require for sortable:
import 'jquery'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/theme.css'
import 'jquery-ui/ui/widgets/sortable'
import 'jquery-ui/themes/base/sortable.css'
You may need to expose jQuery in config/webpack/environment.js:
// Expose jQuery to scripts external to webpack
environment.loaders.append('expose', {
test: require.resolve('jquery'),
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery']
}
})
I'm getting a WARNING: Tried to load angular more than once. when trying to use nested views on a Ruby on Rails and Angular app. I'm using ui-router and angular-rails-templates.
Angular config and controllers:
var app = angular.module('app', ['ui.router', 'templates']);
app.factory('categories', ['$http', function($http) {
var o = {
categories: []
};
o.get = function (id) {
return $http.get('/categories/' + id + '.json').then(function (res) {
return res.data;
});
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/_home.html',
controller: 'MainCtrl',
});
$stateProvider
.state('home.categories', {
url: '/categories/:categoryId',
templateUrl: 'categories/_categories.html',
controller: 'CategoriesCtrl',
resolve: {
category: ['$stateParams', 'categories', function($stateParams, categories) {
return categories.get($stateParams.categoryId);
}]
}
});
$urlRouterProvider.otherwise('/home');
}]);
app.controller('MainCtrl', function ($state) {
$state.transitionTo('home.categories');
});
app.controller('CategoriesCtrl', [
'$scope',
'categories',
'category',
function($scope, categories, category) {
$scope.posts = category.posts;
}
]);
And the templates:
_home.html (*edited: deleted body and ng-app from this template, following #apneadiving advice, and used the right path, as pointed by #Pankaj Now, views are rendered properly, but the 'loading more than once' persists)
Category One
Category Two
<ui-view></ui-view>
_categories.html
<ul ng-repeat="post in posts">
<li>{{post.title}}</li>
</ul>
app/views/layouts/application.html.erb
<!--<rails head>-->
<body ng-app="app">
<ui-view></ui-view>
</body>
What is happening is that the state 'home' appears and when I click on the links, the URL changes but nothing else happens. And I get the message that Angular is being loaded more than once.
EDITED: Got it working. It was a <%= yield %> conflict in another part of the app that should have nothing to do with the Angular part.
As you are defined the child states, you need to change your URL's to /home as they are child of home state, the URL gets inherited from parent state.
Category One
Category Two
You shouldnt boot your app in a template like you do.
Add the ng-app to your html's body and remove it from the template (actually your template shouldnt bear the body either)
I made this small API on rails with a single resource called Items, that works fine while I use it on the browser (a.k.a http://localhost:9000/api/items/1.js - Configured port 9000 with Grunt proxy), but when I try to get that data from Angular I get nothing.
//app.js
.config(function ($routeProvider) {
$routeProvider
.when('/items', {
templateUrl: 'views/items.html',
controller: 'ItemsCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.factory('Item', ['$resource', function($resource) {
return $resource('http://localhost:9000/api/items/:id.json', null, {
'update': { method:'PUT' }
});
}]);
//items.js
angular.module('balenciagaApp')
.controller('ItemsCtrl', ['$scope', 'Item', function ($scope, Item) {
$scope.items = Item.query();
}]);
//items.html
<ul ng-repeat="item in items">
<li>{{item.name}}</li>
</ul>
I'm using angularsj routing inside my asp.net mvc application.
Here's my configs for $routeProvider :
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Organization/Employee/:id', {
controller: 'UserCtrl',
templateUrl: '/Areas/Organization/App/user/partial/info.html'
})
.when('/Organization/Employee/:id/edit', {
controller: 'EditCtrl',
templateUrl: '/Areas/Organization/App/user/partial/edit.html'
})
.otherwise({
redirectTo: '/'
})
;
}])
As you can see there only two routes I want to be handled by angularjs.
How I can make use asp.net for handling routing for the otherwise case?
.otherwise({
controller: function ($location, $window) {
$window.location.href = $location.path();
return false;
},
template: ""
});
That did the trick. But blink with an empty ng-view first. Maybe someone know's how to get rid of that blink?
I'm trying to understand the concept of using the ui-router (v0.2.10) with AngularJS (v1.2.15) through converting an old project that previously used ngRoute and have been unable to figure out why it isn't working. I have an ASP.NET MVC website that shows the base page with something similar to the following:
index.cshtml
<!DOCTYPE html>
<html lang="en-US" ng-app="home">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
</head>
<body>
<div ui-view></div>
#Scripts.Render(*all the angular, jquery and other script references here)
</body>
</html>
app.js
angular.module('home') ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when("", "/");
$urlRouterProvider.otherwise("/");
var root = {
name: 'root',
url: '/',
abstract: true,
templateUrl: '/Scripts/home/templates/root.html',
controller: 'RootController'
};
var home = {
name: 'root.home',
url: '/home',
parent: root,
templateUrl: 'Scripts/home/templates/home.html',
controller: 'HomeController'
};
$stateProvider
.state(root)
.state(home);
$locationProvider.html5Mode(true);
};
rootCtrl.js
angular.module('home').controller('RootController', function() {
});
homeCtrl.js
angular.module('home').controller('HomeController', function() {
});
root.html
<navbar/>
<div class="wrapper" style="padding-top:25px;margin-bottom:20px">
<div ui-view></div>
</div>
<footer/>
navbar.js
angular.module('home').directive('navbar', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '/Scripts/home/templates/directives/navbar.html'
};
});
The navbar directive template simply contains the bootstrap navbar.
footer.js
angular.module('home').directive('footer', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '/Scripts/home/templates/directives/footer.html'
};
});
Except that nothing shows up on the page except for the CSS references at the top, the following, and then the javascript references at the bottom:
Why doesn't the root.html view show up on the screen when I load up the page? Thanks!
As per another answer on this site, one cannot self-close the tags for custom directives. Thus, if I change the tags in root.html to the following:
<navbar></navbar>
<div class="wrapper" style="padding-top:25px;margin-bottom:20px">
<div ui-view></div>
</div>
<footer></footer>
It works fine.