I have an application that uses a Router to load pages across a shared template, and other pages that are organized by Controllers, Services, and templates that run within the context of those controllers. It's a simple process to get the various entries of the Controllers and application to run within the same context, but when I have a set of ngRoute defined rules in place, the router stops working.
The routes I have in place are set in js/core/app.js and look like this:
var app = angular.module('ApplicationSystem', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'js/login/templates/login.html',
controller: 'LoginController'
})
.when('/application', {
templateUrl: 'js/application/templates/application.html',
controller: 'ApplicationController'
})
.otherwise({
redirectTo: '/login'
});
}
]);
And as an example, the Login application itself does not load. Only a blank page loads. The Actual application in reference is loaded via an ng-controller directive (ng-app is used in the parent template).
<div class="container" ng-controller="LoginController">
<h2>Login</h2>
<!-- Contents -->
</div>
The parent template (index.html by reference)
<!doctype html>
<html>
<head>
<title>Application</title>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-grid/ui-grid.min.js"></script>
<script type="text/javascript" src="lib/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="lib/spin.js/spin.min.js"></script>
<script type="text/javascript" src="js/core/app.js"></script>
<script type="text/javascript" src="js/login/LoginController.js"></script>
</head>
<body>
<div class="masterwrapper" ng-app="ApplicationSystem">
<div ng-view></div>
</div>
</body>
</html>
And the aforementioned controller
var app = angular.module('ApplicationSystem', []);
app.controller('LoginController', function ($scope, $cookies, $location, $ngStorage) {
console.log("Init LoginController");
$scope.LogIn = function (username, password) {
//Login service and factory calls here
};
});
I'm not really clear on what the culprit could be here. If I can get the template to render again, that would at least get me back on track. Any suggestions?
Related
I'm trying out ui-router for angular. I added this line of code to my app module in my app.js:
angular
.module("ngClassifieds", ['ngMaterial', 'ui.router'])
.config(function($mdThemingProvider, $stateProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
On my html I just put an empty ui-view to test whether or not i'm getting those two headers but with no luck:
<ui-view></ui-view>
Testing it out on my localhost link by putting in:
localhost:8080/#/stateone
localhost:8080/#/statetwo
But for some reasons it's not loading/showing any of the headers on any of those links but just showing my page without the headers.
I have already included angular-ui-router.js into my index.html
If anyone could point out what I did wrong, that would great.
In case anyone is wondering : this is the order of my scripts:
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
<script src="components/classifieds.fac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
Since you did not get any error it is difficult to understand what went wrong but you can have a look at my plunkr and figure it out. I removed angular-material.
https://plnkr.co/edit/WGjzY6flSx5Ces1moSPk?p=preview
<script>
angular
.module("ngClassifieds", ['ui.router'])
.config(function( $stateProvider){
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
Link1
Link2
<ui-view></ui-view>
</body>
I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
I'm working on an angular application using asp.net web application empty template and i have a problem with using ng-app, when i use it and lave it blank i the $routeProvider doesn't get instantiated, but when i specify ng-app="myApp" to my module name, the content of the body starts to repeat to infinite loop.
I'm sure i'm missing something basic, but this problem is driving me crazy
thanks
here's my html code
this is main
view1
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
and here's myApp code
(function () {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config([
'$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html',
controller: 'main'
}).when('/view1', {
templateUrl: 'view1.html',
controller: 'main'
}).otherwise({
redirectTo: '/'
});
}
]);
app.controller('main', function ($scope) {
setTimeout(function() {
alert("from set");
},10000);
});
})();
the problem here is that index.html is not the template that should be loaded into the ng-app, it is the outer shell page. You are loading the entire app inside itself over and over, producing something like the following:
view1
<div>
view1
<div>
view1
<div>
view1
<div>
//... more and more loaded here
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
... essentially forever.
You should instead be loading only templates in your routes.
Is your default route loading the page into itself?
$routeProvider.when('/', {
templateUrl: 'index.html', <----- ???
controller: 'main'
})
I want to dynamically add menu JavaScript file and html to content.html, but it can't do.
I created simple example
demo
I try move "<script src="menu.js"></script>" to menu.html
Your code moves away from the whole idea of writing single page app with angular. I have updated it to give you basic idea of how you would do the routes and share templates and use controller.
Check out the plunkr
html
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="menu.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="menu.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="menu" ng-include="'menu.html'"></div>
<div ui-view></div>
</body>
</html>
js
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "first.html",
controller: 'firstCtrl'
})
.state('second', {
url: "/second",
templateUrl: "second.html"
})
});
app.controller('firstCtrl', ['$scope', function($scope) {
$scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
shareData.currentPage = 0;
}