Hashbang defaulting in angular application - javascript

Do the newest versions of angular/angular-route 1.6.1 use hashbang by default? Take this piece of code for example, I have to use #! when linking to partials because #/ or #/partial2 does not work. I thought that you'd have to set a hash prefix but it looks like it's defaulting to that behavior:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title></title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"</script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'partials/view1.html',
})
.when('/partial2',{
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('view1Controller', function ($scope) {
$scope.sports = ['golf', 'basketball', 'hockey', 'tennis', 'football'];
});
myApp.controller('view2Controller', function ($scope) {
$scope.message = 'We are using another controller';
});
</script>
</head>
<body>
<div ng-app='myApp'>
Partial 1 | Partial 2
<div ng-view="">
</div>
</div>
</body>
</html>

Starting angular 1.6.0, #!/ becomes defaults in routes. I basically worked down versions until #/ worked, which was 1.5.11.

Related

Angular Routing not populating ng-view

I have an issue were my routing is not populating my view.
I have the following code running from an Xampp local server:
angular 1.4.9
index.html:
<html>
<head>
<script src="scripts/angular.js" type="javascript/text"></script>
<script src="scripts/Ng-Route.js" type="javascript/text"></script>
<script src="scripts/app.js" type="javascript/text"></script>
</head>
<body ng-app="myApp">
<div ng-view></div>
</body>
</html>
user.html:
<div>
<fieldset>
Hello, {{ctrl.message}}
</fieldset>
</div>
app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'user.html',
controller : 'controller as ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
app.controller('controller', function() {
var self = this;
self.message = 'Everyone';
});
I have absolutely no clue why this is failing, nothing shows up on the page. I am expecting "Hello, Everyone".
Any help would appreciated.
You had mistaken declaring your controller on your route. controller does accept controller name in string/controller function. And use controllerAs option to alias your controller.
$routeProvider
.when('/', {
templateUrl : 'user.html',
controller : 'controller',
controllerAs: 'ctrl'
});

ui-router not replacing ui-view in index.html

I have set up a basic AngularJS app in VS and cannot get the ui-router functionality working. I have looked at videos, blogs, SO answers and as far as I can tell I am doing everything right, although, I am brand new to web development.
First, here is the solution structure:
and the code...
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body ng-app="app">
<div ui-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="app/app.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
</body>
</html>
app.js:
(function () {
'use strict';
angular.module('app', ['ui.router']);
})();
app.states.js:
(function () {
'use strict';
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/test.html',
controller: 'testCtrl',
controllerAs: 'vm'
})
});
})();
test.html:
<div>
<p>TEST PAGE</p>
</div>
testCtrl.js:
(function () {
'use strict';
angular.module('app')
.controller('testCtrl', testCtrl);
testCtrl.$inject = ['$state'];
function testCtrl($state) {
var vm = this;
var userAuthenticated = false;
init();
function init() {
$state.go('home');
};
};
})();
Can anyone see anywhere I have made a mistake?
There is a working example
I would say, that I miss these lines in your index.html
...
<script src="app/app.states.js"></script>
<script src="templates/testCtrl.js"></script>
That will loade the crucial state definition, and related controller. Check it in action here

Angular states point to correct controller but not html

I am just setting up a simple Angular app as I've done countless times. I added a home state and a separate state for a note taking app, yet neither states are displaying/injecting the html partials into the ui-view. I think it might be an issue with my ui-router setup, but I cannot find the issue. I console log from my controllers and they trigger correctly, so the states are clearly pointing to the right controllers.
Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="factory.js"></script>
<script src="config.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
config
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateURL: './home.html',
controller: 'homeCtrl'
})
.state('list', {
url: '/list',
templateURL: '/list.html',
controller: 'listCtrl'
})
$urlRouterProvider.otherwise('/home');
});
app.js
'use strict';
var app = angular.module('myApp', ['ui.router']);
app.controller('listCtrl', function($scope, myFactory) {
console.log("list working!");
$scope.items = myFactory.items
$scope.addItem = function() {
$scope.items.unshift($scope.newItem);
$scope.newItem = "";
}
})
app.controller('homeCtrl', function($scope) {
console.log("home working!");
$scope.test = 'test'
})
My home state should load a partial containing:
<div>
<h1>Welcome!</h1>
</div>
Plunker
http://plnkr.co/edit/ngHYDtx0VBe2YPlBeJ3t?p=preview
It has to be
templateUrl: './home.html',
Also, it is not desirable to use relative paths for templates, './home.html' and 'home.html' will be cached internally as two different templates.

angular ui router not working / routing

I have this project structure :
-root
|-JS
|-app.js
|-COMPONENTS
|-HOME
|-homeController.js
|-homeView.html
|-ERROR
|-error.html
|-index.html
Here is index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS LOADING -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--APP JS -->
<script src="js/components/app.js"></script>
<script src="./js/shared/services/lb-service.js"></script>
<!--HOME JS-->
<script src="./js/components/home/homeController.js"></script>
</head>
<body ng-app='benirius'>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="error">Error</a></li>
</ul>
<div ui-view></div>
</body>
</html>
and app.js:
'use strict';
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/components/home/homeView.html',
controller: 'homeController'
})
.state('error', {
url: '/error',
templateUrl: '/components/error/error.html'
});
$urlRouterProvider.otherwise('/');
}]);
edit adding homeController.js:
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
Angular ui router does not create links / load pages.
All js files are loaded and no javascript error shown in console.
Does someone know why ui-router is not working ?
Ps : I've been playing around with templateUrl path with no success.
As show here in angular doc, when you separate files and add controllers, services, or others to a module, you have to load it with no arguments.
You first define your app in a file :
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(
// CODE IN HERE
);
$urlRouterProvider.otherwise('/');
}]);
Then if you want to add elements to your app in another file, you load the module with no arguments, like this:
// notice there is no second argument therefore it loads the previously defined module 'benirius'
angular.module('benirius')
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> NO ERROR
instead of:
// In this case, it is considered as a redefinition of 'benirius' module with no dependencies injected
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> ERROR

Infinite loops inside of angular controller

When I open up my app in a window, I get stuck in an infinite loop where angular keeps calling the GameCtrl and freezes the window. Here's the code:
index.html
<!DOCTYPE html>
<html ng-app="baseball">
<head>
<script src="/js/vendor/angular.min.js"></script>
<script src="/js/vendor/d3.v3.min.js"></script>
<script src="/js/baseball.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
baseball.js
var app = angular.module('baseball', []);
function GameCtrl ($scope) {
}
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
})
.otherwise({redirectTo:'/'});
});
I feel like this should be trivial; any help would be much appreciated.
Edit
Even with the templateUrl, it still goes into an infinite loop. Here's the updated config and the template code:
baseball.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: '/templates/field.html'
})
.otherwise({redirectTo:'/'});
});
templates/field.html
<div>hi</div>
Add the content you want to display here <div ng-view></div>
in your route
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: path/to/your_content.html
})
You need to include angular-route.js in the head
and then inject 'ngRoute' into your module.
See http://docs.angularjs.org/api/ngRoute and http://docs.angularjs.org/api/ngRoute.$routeProvider

Categories