We Keep Coding

Angular ui-view (UI-Router) not rendering template - plunker included

Question Background:
I am using AngulaJS's UI Router for the first time to create two views within my app.
The Issue:
Plunker link: https://plnkr.co/edit/2XAKa6mDCUyzyOPz2CNK
I feel I'm missing something simple here but I cannot get any route to render the specified html templates set in the app.js.
Eventually I want the Update.html template to render when the submit fucntion of the home.html (search()) is clicked but first off I need to be able to actually render a single view which I currently cannot.
I would expect on-load for the route to render up the home.html page but it wont:
Any help sorting this will be much appreciated.
app.js:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('update', {
url: '/update',
templateUrl: 'Update.html',
controller: 'UpdateController'
})
}])

Looking at your plunker briefly, it looks like your controller files are creating new angular apps with the same name. They were overriding each other so the .config() block didn't exist in the final app. I have updated the controller files in this plunker and it seems to be rendering the first ui view fine:
https://plnkr.co/edit/cdpWWOaBJWL3dONtIXzv?p=preview
Notice in the controller files, the angular.module('app') no longer has the second argument ['ui-bootstrap'] which was causing a new angular app to be created for each controller file. Check it out here in the angular docs.
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Hope this helps!

How to create Tabs using AngularJs and Bootstrap - Need to modify existing code

I have found on stackoverflow a good example of how to create Tabs using AngularJS and Bootstrap, but I have a problem. The original code is using an old library of Angular (1.0.4) and if I switch to the current one (1.4.7) the script does not work anymore.
Here is the original code on Plunker
Here is the original Post
Here is what I've tried so far to change:
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/jobs', {
templateUrl: 'jobs-partial.html',
controller: JobsCtrl
})
.when('/invoices', {
templateUrl: 'invoices-partial.html',
controller: InvoicesCtrl
})
.when('/payments', {
templateUrl: 'payments-partial.html',
controller: PaymentsCtrl
})
.otherwise({
redirectTo: '/jobs'
});
});
Where is the problem?

As of AngularJS 1.2 and later:
ngRoute is now its own module
As of AngularJS 1.3 and later:
...$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
Therefore [1] adding ngRoute as a dependency to your module and [2] including the angular-route.js source file and [3] explicitly registering the controllers fixed it for me:
http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview
[1]
var app = angular.module('plunker', ['ngRoute']);
[2]
<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>
[3]
app.controller('TabsCtrl', TabsCtrl);
app.controller('JobsCtrl', JobsCtrl);
app.controller('InvoicesCtrl', InvoicesCtrl);
app.controller('PaymentsCtrl', PaymentsCtrl);

Older versions of angular allowed for the use of global functions as controllers.
Support for that was dropped in version 1.3 and you need to register controllers as a module component.
Also ngRoute is a separate include now and must be injected as a module dependency
Here's an updated demo using angular 1.4.
Note that controllers are registered using:
angular.module('plunker')
.controller('TabsCtrl',TabsCtrl)
.controller('InvoicesCtrl',InvoicesCtrl)
.controller('PaymentsCtrl',PaymentsCtrl)
And in routing the controller is now string. Also ngRoute is included as module dependency
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/jobs', {templateUrl: 'jobs-partial.html', controller: 'JobsCtrl' }).
DEMO

Angular ngRoute don't work with Express 4

I try set up client side route with Angular and Express 4.
I worked with guide ngView and without Express that's good, but when Express routing is enable ngRoute don't work. How can I setup Express that it work with ngRoute?
A little bit of code:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/category/:catgegoryName', {
templateUrl: 'category',
controller: 'categoryController',
controllerAs: 'category'
})
.when('/category/:catgegoryName/device/:deviceName', {
templateUrl: 'device',
controller: 'deviceController',
controllerAs: 'device'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);

Since you configured HTML5 mode you don't need to replicated the same route structure on the Express side. Instead you need to make sure server always responds with landing page (usually index.html) where Angular app is configured and bootstraped.
So it will be that for say route /category/something server still responds with index.html. Then Angular will parse URL and understand that it need to inject template and controller corresponding to .when('/category/:catgegoryName', {...}) route.

Target route while using angular routing

I am trying to integrate angular routing with and existing app.
The webapp uses angular already but does not use routing per se.
I was able to manually integrate routing and my routing js looks like following
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/list1.jsp', {
templateUrl: '/mycontext/templates/list1.jsp',
}).
when('/list2.jsp', {
templateUrl: '/mycontext/templates/list2.jsp',
}).
otherwise({
});
}]);
After using routing for couple of files I found a common pattern, my #path was very similar to the path of the template. Thus I was wondering if there is any way to get the next url in the route itself so that I can dynamically create a fallback. For example
otherwise({
nextURL = $nxtURL;
redirectTo: '/mycontext/templates/'+nextURL;
});

Yeoman and angular - routing doesn't work

I'm trying start developing angular apps with yeoman. It may sounds stupid, but I have a problem with creating routes using yo:angular route.
When I create new route using:
yo:angular route foo
yeoman creates:
app/scripts/controllers/foo.js (controller)
app/views/foo.html (view)
app/test/spec/controllers/foo.js (testing the controller)
in app.js it creates:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
so everything should work fine. Unfortunately the route doesn't work - when I try open
http://localhost:9000/foo
I get following error:
Cannot GET /foo
The idea of routes in yeoman looks pretty easy and I'm not sure where the problem is.

Did you enable HTML5 mode in your Angular application? If not, the URL would be:
http://localhost:9000/#/foo
And if you have enabled HTML5 mode in your Angular application, you have to make sure whatever server you're using has been configured to handle all routes as they were the root of the application.