We Keep Coding

Issue in Angular route

I have an AngularJS application. I recently added couple of routes but they don't work. The rest is working fine.
I included them in my index.html
<script src="privacy_policy/privacy_policy.js"></script>
<script src="contacts/contacts.js"></script>
I added them in my app.js file:
angular.module('myApp', [
...
'myApp.privacy_policy',
'myApp.contacts',
...
]).
The route system:
$routeProvider.when('/privacy_policy', {
templateurl: 'privacy_policy/privacy_policy.html',
data: {
needauth: false
}
});
$routeProvider.when('/contacts', {
templateurl: 'contacts/contacts.html',
data: {
needauth: false
}
});
I added a simple controller:
'use strict';
angular.module(
'myApp.privacy_policy', ['ngRoute']
).
config(['$routeProvider', function($routeProvider) {
}]).
controller('PrivacyPolicyCtrl', ["$scope", "$http", "store", "URL", function($scope, $http, store, URL) {
}]);
And some simple html:
<div ng-controller="PrivacyPolicyCtrl" class='row below-header'>
PRIVACY POLICY
</div>
Finally I created a simple link to that view:
<li><a href='/privacy_policy'>Privacy policy</a></li>
I created the SAME things for contacts but if I click on those link ng-view is completely empty.
All the others route are working fine and I can't see any difference. I get no error on the console.
In the route system in app.js If I put a different template, for example:
$routeProvider.when('/privacy_policy', {
templateurl: 'faq/faq.html',
data: {
needauth: false
}
});
The faq page is diplayed correctly. What am I missing?

Ok I finally find you what the problem is.
I only needed to change this:
templateurl: 'contacts/contacts.html',
with this:
templateUrl: 'contacts/contacts.html',

How do I make scripts in the main layout apply to an angularjs view when it loads?

I'm trying to integrate angularjs to an existing site.
The problem is that I've transformed a section of the main page into an angular view but when this latter is loaded into the main page using ng-route the main page slider scripts that are located at the bottom of the main page do not seem to render in the loaded view.
Does anyone have an idea how to get through this.
Thanks.
</div>
</header>
<div data-ng-view></div>
<footer id="footer">
<div class="container">
(function() {
var app = angular.module('hbcm', ['ngRoute']);
angular.module('hbcm').controller('DsplController', function() {
this.panel = 1;
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'DsplController',
templateUrl: 'view1.html'
})
.when('/about-us/', {
templateUrl: 'about-us.html'
})
.otherwise({
redirectTo: '/'
});
});
})();

create a controller to handle you template (View), and attach that controller in the Route configuration
$routeProvider.when('/somewhere', { controller: TheNameOfYourController, });

AngularJS: UI Router doesn't load the inline template and controller

This is my first time using UI Router inside AngularJS project. I have a problem where when I click a link to view a post, it doesn't show up.
The post template is not showing and I'm still at the home page. I can see the URL flashing like http://localhost:8000/#/posts/1 and attempt to change, but, it goes back to http://localhost:8000/#/home.
Plunker: http://plnkr.co/edit/KV6lwzKUHrIZgVWVdrzt
What I am missing here?
Note 1: I already read UI Router documentation and I think I'm not missing anything.
Note 2: I'm following this tutorial (thinkster).
Note 3: I'm using SimpleHTTPServer python -m SimpleHTTPServer 8000 command to serve this project.
This is my app.js:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: 'posts/:id',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
...
app.controller("PostsCtrl", ["$scope", "$stateParams", "postsFactory", function($scope, $stateParams, postsFactory){
// grab the right post from postsFactory posts array
$scope.post = postsFactory.posts[$stateParams.id];
console.log($scope.post);
}]);
And this is my index.html:
<ui-view></ui-view>
...
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
</script>

Issue in your code is in your router config for posts state. It should be like below. URL should be /posts/:id instead of posts/:id.
$stateProvider
.state('posts', {
url: '/posts/:id',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});

You are basically missing / slash at the start of your posts state URL, because of / is missing it was redirecting to .otherwise rule of $urlRouterProvider
Code
.state('posts', {
url: '/posts/:id',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});

You also need to add $locationProvider.html5Mode(true); in the app.config block and <'base href="/"'> in the head section of your HTML file.
Otherwise, the #/posts/:id routing won't work.

Route "ui-route" not working. TemplateUrl html not visible in ui-view

I use ui-router angular js file for routing and its not working when used in a complex scenario. I have posted all my code in Plunker for your view and thanks in advance for your time and help.
"use strict";
var app = angular.module( "productManagement", ["ui.router", "common.services", "productResourceMock"] );
app.config([ "$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider){
// Redirect to home view when route not found
$urlRouterProvider.otherwise("/");
$stateProvider
// Home state routing
.state("home", {
url: "/",
templateUrl: "route-welcome.html"
})
.state("productList", {
url: "/products",
templateUrl: "route-productlist.html"
})
.state("productDetail", {
url: "/products/detail/:productId",
templateUrl: "route-productdetail.html"
})
}
]);
Plunker link here

Your requests for template pages are being caught by the $httpBackend, which doesn't know about your .html files. It is instead throwing errors like the following:
Error: Unexpected request: GET route-welcome.html
No more request expected
To fix this, you can add a passThrough to your app.run:
....
$httpBackend.whenGET(productUrl).respond(products);
$httpBackend.whenGET(/\.html$/).passThrough();
....

Promises getting resolved twice in AngularJS

I am learning to use angularjs with requirejs and angular-ui-router. I created a plunker over here http://plnkr.co/edit/iA8zVQWP3ypRFiZeRDzY?
<div ui-view ></div>
<script data-main="require-config" src="http://requirejs.org/docs/release/2.1.20/r.js"></script>
The startup file index.html has a reference to require-config.js which loads the required third-party javascript libraries, resolves dependencies and bootstraps my module which is in app.js
angular.element().ready(function() {
//bootstrap the app manually
angular.bootstrap(document,['myApp']);
});
I am using ui.router to resolve appropriate states and navigate to the appropriate page
define(['angular', 'story'
], function(angular) {
angular.module('myApp', ['ui.router', 'ui.bootstrap', 'myApp.story'])
.controller('TabController', ['$scope', '$state', function($scope, $state) {
$scope.tabs = [
{route: 'main.story', label : "Promises", active : false},
//more routes here.
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
}])
$stateProvider will route to appropriate state.
config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
abstract: true,
url: '/main',
templateUrl: 'tabs.html',
controller: 'TabController'
})
.state('main.story', {
url: '/story',
templateUrl: 'story.html',
controller: 'storyController'
})
$urlRouterProvider.otherwise('/main/story');
}])
and ui.bootstrap to use tabs provided by bootstrap library.
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.label}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
This plunker is working with bugs. When I look at the Network in Chrome, the json files ( chapter-1.json and chapter-2.json ) are getting loaded/resolved twice.
I also verified the code without using requireJS and it is working (loading scripts using script tag manually) fine. The promises are getting resolved only once. So, there is some configuration that I am doing incorrectly while using requirejs.
I also verified the files getting loaded twice using $httpProvider.interceptors as well.
How can I resolve this?

In app.js, you are indicating storyController as the controller for your main.story state, but you have an ng-controller="storyController" inside your story.html.
The result is that you are initializing two storyControllers and each one calls .getText() once.
You can solve this by removing the ng-controller from your story.html:
<body>
<div>
{{chapter1}}<br>
{{chapter2}}
</div>
</body>